Flutter Custom Widget: Creating Custom Widgets in Flutter

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.

We can have flutter custom widget with parameters such that these widget’s can have wide usage as well in various requirements.

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.

Here we are trying to create a flutter custom widget library kind of implementation which you can use in any flutter app.

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: [
              CustomText(text: "Hello World"),
              CustomText(text: "Hello World 2"),
              CustomText(text: "Hello World 3"),
            ],
          ),
        ),
      ),
    );
  }
}

customtext.dart :

Originally implemented within the main.dart file, we’ve now extracted it as a custom widget.

Transform the Text Widget into a custom widget and proceed to utilize 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’s explore creating a custom TextField for repeated use within a form. Incorporate it into the body section as follows

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 :

Explore the ease and flexibility of custom widgets with our straightforward implementation code. Enhance your app’s user interface effortlessly

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

Additionally, we can manage Flutter custom widget onPressed functionality by utilizing custom widgets. To achieve this, we simply need to pass the method to be implemented as a parameter.

If you have any questions about this Custom Widget tutorial, feel free to ask in the comments below. If you found this tutorial helpful, please like and share for more intriguing updates.