Creating custom widgets helps in minimizing time while development. I have added a few custom widgets that might help you in the development process.
- Create constants.dart. Anywhere you see kRed, kWhite then that is from this constants.dart class. You can add any constants.
import 'package:flutter/material.dart'; const kRed = Colors.red; const kWhite = Colors.white; - Create a custom_text.dart. Any attributes you want to add can be added as final and add it to the constructor.
import 'package:flutter/material.dart'; class CustomText extends StatelessWidget { final String text; final double fontSize; final FontWeight fontWeight; final Color color; const CustomText( {@required this.text, this.fontSize, this.fontWeight, this.color}); @override Widget build(BuildContext context) { return Text( text, style: TextStyle( color: color, fontSize: fontSize, fontWeight: fontWeight, ), ); } } - Create custom_icon.dart. Any attributes you want to add can be added as final and add it to the constructor.
import 'package:flutter/material.dart'; class CustomIcon extends StatelessWidget { final IconData iconData; final Color color; final double size; const CustomIcon({@required this.iconData, this.color, this.size}); @override Widget build(BuildContext context) { return Icon( iconData, color: color, size: size, ); } } - Create custom_icon_button.dart. In this stateless class, I have added CustomIcon as an argument.
import 'package:flutter/material.dart'; import 'package:flutter_ecom/widgets/custom_icon.dart'; class CustomIconButton extends StatelessWidget { final CustomIcon customIcon; final Function onIconPressed; const CustomIconButton( {@required this.customIcon, @required this.onIconPressed}); @override Widget build(BuildContext context) { return IconButton( icon: customIcon, onPressed: onIconPressed, ); } } - Create custom_drawer.dart with ListView.builder/ListView.separated
import 'package:flutter/material.dart'; import 'package:flutter_ecom/commons/constants.dart'; import 'package:flutter_ecom/commons/custom_icon.dart'; import 'package:flutter_ecom/commons/custom_text.dart'; import 'package:flutter_ecom/commons/images.dart'; class CustomDrawer extends StatefulWidget { @override _CustomDrawerState createState() => _CustomDrawerState(); } class _CustomDrawerState extends State<CustomDrawer> { List _drawerItems = [ {"icon": Icons.home, "name": "Home"}, {"icon": Icons.account_circle, "name": "My account"}, {"icon": Icons.shopping_basket, "name": "Shopping"}, {"icon": Icons.dashboard, "name": "My orders"}, {"icon": Icons.favorite, "name": "Favourites"}, {"icon": Icons.settings, "name": "Settings"}, {"icon": Icons.help, "name": "About"}, ]; _iconColor(int i) { int _count = _drawerItems.length; if (_count - 1 == i) { return kBlue; } } @override Widget build(BuildContext context) { return Drawer( child: ListView( padding: EdgeInsets.zero, children: <Widget>[ UserAccountsDrawerHeader( accountName: CustomText( text: 'John Doe', ), accountEmail: CustomText( text: 'xyz@gmail.com', ), currentAccountPicture: GestureDetector( child: CircleAvatar( backgroundImage: AssetImage(Images.profileImage), ), ), decoration: BoxDecoration( color: kRed, ), ), ListView.separated( physics: NeverScrollableScrollPhysics(), shrinkWrap: true, itemCount: _drawerItems.length, separatorBuilder: (_, index) { return (_drawerItems.length - 3 == index) ? Divider( color: kBlack, ) : Container(); }, itemBuilder: (_, index) { Map item = _drawerItems[index]; return InkWell( onTap: () {}, child: ListTile( leading: CustomIcon( iconData: item['icon'], color: _iconColor(index), ), title: CustomText( text: item['name'], ), ), ); }, ), ], ), ); } } 
Top comments (1)
where images.dart file is missing, let us know about this file