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