Last active
November 24, 2020 04:03
-
-
Save yusufpats/5e1f5df75ab12ff3377f026fffc55df1 to your computer and use it in GitHub Desktop.
Picker Widget using `setState` - This PickerWidget can be used to create any type of selector
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
final Color darkBlue = Color.fromARGB(255, 18, 32, 47); | |
void main() { | |
runApp(MyApp()); | |
} | |
class MyApp extends StatelessWidget { | |
final List<PickerItem> paymentModes = [ | |
PickerItem("Cash On Delivery", ""), | |
PickerItem("Visa Card", ""), | |
]; | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue), | |
debugShowCheckedModeBanner: false, | |
home: Scaffold( | |
backgroundColor: Colors.white, | |
body: Center( | |
child: PickerWidget(pickerItems: paymentModes), | |
), | |
), | |
); | |
} | |
} | |
class PickerItem { | |
String label; | |
String icon; | |
PickerItem(this.label, this.icon); | |
} | |
class PickerWidget extends StatefulWidget { | |
final List<PickerItem> pickerItems; | |
const PickerWidget({ | |
Key key, | |
this.pickerItems, | |
}) : super(key: key); | |
@override | |
_PickerWidgetState createState() => _PickerWidgetState(); | |
} | |
class _PickerWidgetState extends State<PickerWidget> { | |
int selectedIndex = -1; | |
@override | |
Widget build(BuildContext context) { | |
return ListView.builder( | |
itemBuilder: (context, index) { | |
PickerItem pickerItem = widget.pickerItems[index]; | |
bool isItemSelected = index == selectedIndex; | |
return InkWell( | |
onTap: (){ | |
selectedIndex = index; | |
setState(() {}); | |
}, | |
child: Container( | |
alignment: Alignment.center, | |
margin: const EdgeInsets.symmetric(horizontal:16.0, vertical: 4), | |
decoration: BoxDecoration( | |
// color: Color(0xff04385f), | |
border: Border.all(color: Colors.grey[400]), | |
borderRadius: BorderRadius.all(Radius.circular(12)), | |
), | |
child: Padding( | |
padding: const EdgeInsets.all(8.0), | |
child: Row( | |
children: [ | |
Container( | |
height: 24, | |
child: Image.asset('images/cod.png'), | |
), | |
SizedBox(width: 4), | |
Expanded( | |
child: Text( | |
pickerItem.label, | |
style: TextStyle( | |
color: Color(0xff04385f), | |
fontFamily: 'UbuntuMedium', | |
), | |
), | |
), | |
isItemSelected | |
? Icon(Icons.check_circle, size: 16, color: Colors.green,) | |
: Container(), | |
], | |
), | |
), | |
), | |
); | |
}, | |
itemCount: widget.pickerItems.length, | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment