CODEWITHSUNDEEP
flutter
Saman Kc
Saman Kc

Reputation: 149

What is the easy way to create reusable widgets in flutter?

Container(
                  child: Column(
                    children: <Widget>[
                      Container(
                        alignment: Alignment.topLeft,
                        padding: EdgeInsets.only(left: 10.0),
                        child: Text("Random Text",
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Colors.black)),
                      ),
                      Container(
                        alignment: Alignment.topLeft,
                        padding: EdgeInsets.all(10.0),
                        child: Text("Owner",
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Colors.grey)),
                      ),
                    ],
                  ),
                ),

Upvotes: 0

Views: 299

Answers (1)

hisam
hisam

Reputation: 1609

I don't know if it's an easy way. But for a simple reusable widget, you can place your widget inside a StatelessWidget or a StatefulWidget.

Here's the example:

import 'package:flutter/material.dart';

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


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: <Widget>[
            MyReusableWidget('Nikola Tesla', 'Owner'), //Input the name and role variable when you call the widget
            MyReusableWidget('Albert Einstein', 'Developer'),
            MyReusableWidget('Isaac Newton', 'Technician'),
          ],
        ),
      ),
    );
  }
}


class MyReusableWidget extends StatelessWidget {
  final String name; // provide a place for the input's data
  final String role;

  MyReusableWidget(this.name, this.role);

  @override
  Widget build(BuildContext context) {
    return Container(
          child: Column(
            children: [
              Container(
                alignment: Alignment.topLeft,
                padding: EdgeInsets.only(left: 10.0),
                child: Text(
                  name, // This is where you place your 'name' data
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.black),
                ),
              ),
              Container(
                alignment: Alignment.topLeft,
                padding: EdgeInsets.all(10.0),
                child: Text(
                  role, // This is where you place your 'role' data
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.grey),
                ),
              ),
            ],
          ),
        );
  }
}

I'm creating a widget called MyReusableWidget. I am gonna call that widget inside my MyApp 3 times. And then each widget should provide different names and roles.

So inside my MyReusableWidget, I provide two String data-types called name and role to store my data when I call the widget.

  final String name; // provide a place for the input's data
  final String role;

  MyReusableWidget(this.name, this.role);

And then I want to place my name and role variable inside a Text widget:

                child: Text(
                  name, // This is where you place your 'name' data
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.black),
                ),

and:

               child: Text(
                  role, // This is where you place your 'role' data
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.grey),
                ),

After that, inside my MyApp widget, I can call MyReusableWidget as much as I want and provide different name and role value on each widget.

Column(
          children: <Widget>[
            MyReusableWidget('Nikola Tesla', 'Owner'), //Input the name and role variable when you call the widget
            MyReusableWidget('Albert Einstein', 'Developer'),
            MyReusableWidget('Isaac Newton', 'Technician'),
          ],
        ),

Result:

Result

And that's it. You can store any kind of data-type on it (String, int, double, etc).

I hope it will be helpful.

Upvotes: 3

Related Questions