How to build your own widget in Flutter ? Explained

Building Custom Widget 

Custom Widget can add flavor and personality to your app and you could design something that aligns with your brand or theme. Widgets are really customizable, you can extend and customize the existing widgets, or use them s the backbone to a unique one that you create.

Look at our category widget. It is composed of an icon and some text.
Using built-in ListTile widget.

import 'package:flutter/material.dart';// @required is defined in the meta.dart packageimport 'package:meta/meta.dart';
// We use an underscore to indicate that these variables are private.// See https://www.dartlang.org/guides/language/effective-dart/design#librariesfinal _rowHeight = 100.0;final _borderRadius = BorderRadius.circular(_rowHeight / 2);

/// A custom [Category] widget.////// The widget is composed on an [Icon] and [Text]. Tapping on the widget shows/// a colored [InkWell] animation.class Category extends StatelessWidget {
  final String name;  final ColorSwatch color;  final IconData iconLocation;

  /// Creates a [Category].  ///  /// A [Category] saves the name of the Category (e.g. 'Length'), its color for  /// the UI, and the icon that represents it (e.g. a ruler).  // You'll need the name, color, and iconLocation from main.dart  const Category({
    Key key,    @required this.name,    @required this.color,    @required this.iconLocation,  })  : assert(name != null),        assert(color != null),        assert(iconLocation != null),        super(key: key);
  /// Builds a custom widget that shows [Category] information.  ///  /// This information includes the icon, name, and color for the [Category].  @override  // This `context` parameter describes the location of this widget in the  // widget tree. It can be used for obtaining Theme data from the nearest  // Theme ancestor in the tree. Below, we obtain the display1 text theme.  // See https://docs.flutter.io/flutter/material/Theme-class.html  Widget build(BuildContext context) {
    // Build the custom widget here, referring to the Specs.    assert(debugCheckHasMaterial(context));    return Material(
      color: Colors.transparent,      child: Container(
        height: _rowHeight,        child: InkWell(
          borderRadius: _borderRadius,          highlightColor: color[50],          splashColor: color[100],          // We can use either the () => function() or the () { function(); }          // syntax.          onTap: () {
            print('I was tapped!');          },          child: Padding(
            padding: EdgeInsets.all(8.0),            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,              // There are two ways to denote a list: `[]` and `List()`.              // Prefer to use the literal syntax, i.e. `[]`, instead of `List()`.              // You can add the type argument if you'd like, i.e. <Widget>[].              // See https://www.dartlang.org/guides/language/effective-dart/usage#do-use-collection-literals-when-possible              children: <Widget>[
                Padding(
                  padding: EdgeInsets.all(16.0),                  child: Icon(
                    iconLocation,                    size: 60.0,                  ),                ),                Center(
                  child: Text(
                    name,                    textAlign: TextAlign.center,                    style: Theme.of(context).textTheme.headline,                  ),                )
              ],            ),          ),        ),      ),    );  }
}