Flutter Custom Widget | Create a custom widget | Flutter app

 

Flutter Custom Widget :

Flutter Custom Widget creation and implementation is explained in this part of the tutorial with a real time example.By the name itself we can explain that customising the existing widget we can achieve this.

What is a Custom Widget ??

Custom widget is been created by making use of the widgets provided by flutter  i.e., Text widget TextForm and many more widgets available.

It’s a simple concept to understand we have designed a easy tutorials to make the work much easier for you so why late let’s begin.

We have designed 2 tutorials on this topic to explain you the usage and implementation, you might have been using list views, grid views where one single row is designed and is used multiple times.

Yes the same scenario is used here even considering a Text Widget we can customize it and add styles we require, provide decorations and make it ready for our use.

Now the Text widget which is designed can be used throughout the app we copy and paste the same code multiple times.

Advantage of Custom Widgets ??

We can reduce the code usage and also make it easier to add the same functionality through out the code which also saves development time.

Not only development time but also testing is made easy by using same component multiple times.

 

main.dart :

Let’s start with void main()

void main(){
  runApp(MyApp());
}

 

Add column such that we can add multiple widgets on to the screen.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    CustomTextField(fontSize: 20, text:"Enter email id"),
    CustomTextField(fontSize: 20, text:"Enter password"),
  ],
),

 

Full code for main.dart file

import 'package:flutter/material.dart';

import 'CustomText.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Custom Widget"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CustomTextField(text:"Hello World"),
              CustomTextField(text:"Hello World 2"),
              CustomTextField(text:"Hello World 3"),
            ],
          ),
        ),
      ),
    );
  }
}

 

customtext.dart :

Initially we have created this inside main.dart file from there extracted this as a custom widget.

Create a custom widget out of Text Widget and now make use of it.

class CustomText extends StatelessWidget {

  String text = "";

  CustomText({
    required this.text,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(text,
      style: TextStyle(fontSize: 20,color: Colors.deepPurple),);
  }
}

 

 

Custom TextField :

Now let us consider creating a custom TextField for using it multiple times in a form.Add the usage as below in body section.

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      CustomTextField(fontSize: 20, text:"Enter email id"),
      CustomTextField(fontSize: 20, text:"Enter password"),
    ],
  ),
),

 

Flutter Custom Widget Code :

Code for the implementation

class CustomTextField extends StatelessWidget {

  String text = "";
  double fontSize = 0;

   CustomTextField({
    required this.text,
     required this.fontSize,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextField(
      style: TextStyle(fontSize: fontSize,
      fontStyle: FontStyle.italic,
      color: Colors.black),
      decoration: InputDecoration(
        hintText: text,
        hintStyle: TextStyle(fontSize: fontSize,
            fontStyle: FontStyle.italic,
            color: Colors.black),
      ),
    );
  }
}

 

If you have any query’s in this tutorial on Flutter Custom Widget do let us know in the comment section below. If you like this tutorial do like and share us for more interesting updates.