Flutter Create Custom Class Widget with Parameter

Custom widgets are a basic term of creating reusable widgets in flutter. Here reusable widgets means defining widgets as per our need with customization to inbuild widgets and make a new widget. We can customize all the data including Style, width, height, text etc. So in today's tutorial we will make a standalone class in flutter in lib folder and make custom widget and call the widget in our main screen.

Flutter Create Custom Class Widget with Parameter

1. Create a folder Components in the lib folder of flutter project.

2. Creating a Dart file CustomText.dart in the components folder. This is our custom Text widget class file.

3. Copy Below code into CustomText.dart widget file.

Explanation:

• text argument is required and we must have to pass Text when we call this widget.
• textAlignment is non required with default value given. If use does not pass alignment value then it will call the default value which is TextAlign.start .
• textStyle is also non required value with default Text style defined.

import 'package:flutter/material.dart';

class CustomText extends StatelessWidget {
  String text;
  TextAlign? textAlignment = TextAlign.start;
  TextStyle? textStyle = const TextStyle(color: Colors.green, fontSize: 24);

  CustomText(
      {super.key, required this.text, this.textAlignment, this.textStyle});

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: textStyle,
      textAlign: textAlignment,
    );
  }
}

4. Importing CustomText.dart file into our main.dart file.

import 'package:flutter/material.dart';
import 'Components/CustomText.dart';

5. Creating 2 Custom Styles.

 static const TextStyle redHeading =
      TextStyle(color: Colors.red, fontSize: 28, fontWeight: FontWeight.bold);

  static const TextStyle greenHeading =
      TextStyle(color: Colors.green, fontSize: 30, fontWeight: FontWeight.bold);

6. Calling CustomText widget in Column widget and pass custom styling on it.

Column(
      children: [
        CustomText(
          text:
              'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
          textAlignment: TextAlign.center,
          textStyle: redHeading,
        ),
        CustomText(
          text:
              'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
          // textAlignment: TextAlign.center,
          textStyle: greenHeading,
        ),
      ],
    )

Source code for main.dart file:

import 'package:flutter/material.dart';
import 'Components/CustomText.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  static const TextStyle redHeading =
      TextStyle(color: Colors.red, fontSize: 28, fontWeight: FontWeight.bold);

  static const TextStyle greenHeading =
      TextStyle(color: Colors.green, fontSize: 30, fontWeight: FontWeight.bold);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
                    child: Column(
      children: [
        CustomText(
          text:
              'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
          textAlignment: TextAlign.center,
          textStyle: redHeading,
        ),
        CustomText(
          text:
              'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
          // textAlignment: TextAlign.center,
          textStyle: greenHeading,
        ),
      ],
    )))));
  }
}

Screenshot: