Flutter custom widget creation Text, Icon, Icon Button, Drawer

Bikash Katwal — Fri, 24 Jan 2020 11:06:49 +0000

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'],
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

DEV Community: Bikash Katwal

Flutter custom widget creation Text, Icon, Icon Button, Drawer