Flutter Create Custom Reusable Widget

Last updated Nov 16, 2021


Flutter is all about widgets and everything is a widget in Flutter So, In today's tutorial, we will see how we can build a custom widget in Flutter.

Building custom widgets can reduce boilerplate code and the same widget can be used in different places which makes our application lighter.

Let's Start

Step 1: Create a new Flutter Application.

Step 2: Now for this tutorial, we will be building a custom button widget as buttons are used everywhere in mobile apps. So, inside our body first, create a button using Container and different widgets for example

Container(

      margin: const EdgeInsets.symmetric(horizontal: 20),

      decoration: BoxDecoration(

          color: Colors.blue,

          border: Border.all(color: Colors.white),

          borderRadius: BorderRadius.circular(borderRadius ?? 0)),

      child: Material(

        color: Colors.transparent,

        child: InkWell(

          onTap: (){},

          child: Container(

            padding: const EdgeInsets.all(20),

            child: Center(

              child: Text(

                'first button',

                style: TextStyle(

                    color: Colors.white,

                    fontSize: 16,

                    fontWeight: FontWeight.w400),

              ),

            ),

          ),

        ),

      ),

    );

 

 

 

Step 3: Once you have your button widget Right-Click on the top-level Container/widget and choose Extract as Widget Option, when you click on it you will be asked to name it, and once done you will have a new stateless widget created.

Now Declare Variables that you want to change and add it the constructor

CustomButton({

    required this.onTap,

    this.borderRadius,

    this.buttonColor,

    this.textColor,

    this.borderColor,

    required this.buttonText,

    Key? key,

  }) : super(key: key);

 

  VoidCallback onTap;

  Color? buttonColor;

  double? borderRadius;

  Color? textColor;

  String buttonText;

  Color? borderColor;

 

Now you can use these properties in your custom button to change the look and behavior of the button for example:

import 'package:flutter/material.dart';

 

class CustomButton extends StatelessWidget {

  CustomButton({

    required this.onTap,

    this.borderRadius,

    this.buttonColor,

    this.textColor,

    this.borderColor,

    required this.buttonText,

    Key? key,

  }) : super(key: key);

 

  VoidCallback onTap;

  Color? buttonColor;

  double? borderRadius;

  Color? textColor;

  String buttonText;

  Color? borderColor;

 

  @override

  Widget build(BuildContext context) {

    return Container(

      margin: const EdgeInsets.symmetric(horizontal: 20),

      decoration: BoxDecoration(

          color: buttonColor ?? Colors.white,

          border: Border.all(color: borderColor ?? Colors.white),

          borderRadius: BorderRadius.circular(borderRadius ?? 0)),

      child: Material(

        color: Colors.transparent,

        child: InkWell(

          onTap: onTap,

          child: Container(

            padding: const EdgeInsets.all(20),

            child: Center(

              child: Text(

                buttonText,

                style: TextStyle(

                    color: textColor,

                    fontSize: 16,

                    fontWeight: FontWeight.w400),

              ),

            ),

          ),

        ),

      ),

    );

  }

}

 

 

Step 4: Now we can use this Widget as a custom button widget where we want a button in our application. Simply call the CustomWidget and give the properties that you want for example:

CustomButton(

                  onTap: () {},

                  buttonText: 'New Button',

                  textColor: Colors.white,

                  borderRadius: 10,

                  buttonColor: Colors.black,

                  borderColor: Colors.white,

                ),

 

 

Complete Source Code to create custom reusable widget in flutter

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import 'package:flutter_custom_widget_demo/widget/custom_button.dart';

 

class DemoApp extends StatelessWidget {

  const DemoApp({Key? key}) : super(key: key);

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        backgroundColor: Colors.black,

        title: const Text('Custom Widget in Flutter'),

      ),

      body: Column(

        mainAxisAlignment: MainAxisAlignment.center,

        children: [

          CustomButton(

            onTap: () {},

            buttonText: 'First Button',

            buttonColor: Colors.blue,

            textColor: Colors.white,

            borderRadius: 10,

          ),

          const SizedBox(

            height: 30,

          ),

          Row(

            children: [

              Expanded(

                child: CustomButton(

                  onTap: () {},

                  buttonText: 'second Button',

                  textColor: Colors.black,

                  borderRadius: 0,

                  borderColor: Colors.red,

                ),

              ),

              Expanded(

                child: CustomButton(

                  onTap: () {},

                  buttonText: 'New Button',

                  textColor: Colors.white,

                  borderRadius: 10,

                  buttonColor: Colors.black,

                  borderColor: Colors.white,

                ),

              )

            ],

          ),

          const SizedBox(

            height: 30,

          ),

          CustomButton(

            onTap: () {},

            buttonText: 'Last Button',

            textColor: Colors.green,

            buttonColor: Colors.greenAccent.shade100,

            borderRadius: 30,

          )

        ],

      ),

    );

  }

}

 

 

Output: 

 

Conclusion: In this way, we have learned how we can create a custom reusable widget in Flutter.

 

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

27 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions