Flutter Widgets Examples | List of Widgets with Examples in 2023

- Advertisement -

We will discover flutter widgets examples, how to make them, and the various types that the Flutter framework offers in this section. Everything in Flutter is a widget, as we already know.

The app is constructed by nesting widgets inside of one another. It denotes that your app’s root element and every widget below it are both widgets. A widget, for instance, can handle interaction, define design, display something, and more.

The widget tree is simply visualized in the image below.

Widget Tree
Widget Tree

The Flutter widget can be made in the following way:

Class ImageWidget extends StatelessWidget {  
         // Class Stuff  
}  
- Advertisement -

Flutter is simple to understand if you are familiar with React or Vue.js.

Every time you write code for something in Flutter, it will be contained within a widget. The main goal is to construct the application using flutter widgets examples. With their current configuration and state, it describes how your app view ought to appear. When you change anything in the code, the widget rebuilds its description by comparing the differences between the old and new widgets to figure out which changes are absolutely necessary to render in the app’s user interface.

People, who read this article also read: Flutter Liquid Swipe Animation

Flutter Widgets Examples & Types

We can categorize the Flutter widgets examples into two groups:

  1. Visible (Output and Input)
  2. Invisible (Layout and Control)

Visible widget

The data that the user inputs and outputs is connected to the visible widgets. Among this widget’s crucial varieties are the following:

Text

Text that will be displayed on the screen is stored in a Text widget. Using the textAlign property, we can align the text widget. The style property enables us to customize the text’s font, font weight, font style, letter spacing, color, and many other aspects. The following code snippets show how to use it.

new Text(     
'Hello, Javatpoint!',     
textAlign: TextAlign.center,       
style: new TextStyle(fontWeight: FontWeight.bold),   
)  

Button

You can take action when you click on this widget. Flutter uses different types of buttons, such as a FlatButton and a RaisedButton, as opposed to allowing you to use the Button widget directly. The following code snippets show how to use it.

//FlatButton Example  
new FlatButton(  
  child: Text("Click here"),  
  onPressed: () {  
    // Do something here  
  },  
),  
  
//RaisedButton Example  
new RaisedButton(  
  child: Text("Click here"),  
  elevation: 5.0,  
  onPressed: () {  
    // Do something here  
  },  
),  

The onPressed property in the example above enables us to carry out an action when the button is clicked, and the elevation property is used to alter how prominent the button is.

Image

This widget stores the image, which can be fetched from a variety of places, including the asset folder or a URL. It provides many constructors for loading images, which are given below:

  • network: The network is used to load the images.
  • image: ImageProvider uses this general-purpose image loader.
  • file: From the system folder, it loads images.
  • memory: The image is loaded from memory.
  • asset: From your project asset folder, the image was loaded.

You must first make an assets folder in which to store your images before adding the line listed below to the pubspec.yaml file to add an image to the project.

assets:  
  - assets/  

Add the next line to the dart file now.

Image.asset('assets/computer.png') 

Below is a screenshot of the hello world example’s source code in its entirety.

class MyHomePage extends StatelessWidget {  
  MyHomePage({Key key, this.title}) : super(key: key);  
  // This widget is the home page of your application.  
  final String title;  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text(this.title),  
      ),  
      body: Center(  
        child: Image.asset('assets/computer.png'),  
      ),  
    );  
  }  
}  

The output that the app produces when it is run is as follows.

Output
Output

Icon

For storing the Icon in the Flutter, this widget serves as a container. More details are provided in the code below.

new Icon(  
  Icons.add,  
  size: 34.0,  
)  

Invisible widget

Widget layout and control are both impacted by invisible widgets. It offers control over how the widgets appear on the screen and behave in real life. Among the crucial varieties of these widgets are:

People, who read this article also read: Flutter SDK Installation on Windows, macOS, Linux

Column

A column widget is a particular kind of widget that aligns all of its children’s widgets vertically. With the help of the mainAxisAlignment and crossAxisAlignment properties, it creates separation between the widgets. The vertical axis serves as the primary axis in these properties, while the horizontal axis serves as the cross axis.

Example

Two widget elements are built vertically in the code snippets below.

new Column(  
  mainAxisAlignment: MainAxisAlignment.center,  
  children: <Widget>[  
    new Text(  
      "VegElement",  
    ),  
    new Text(  
      "Non-vegElement"  
    ),  
  ],  
),  

Row

In contrast to the column widget, which builds a widget vertically, the row widget builds a widget horizontally. The horizontal axis in this case serves as both the main axis and the cross axis.

Example

The code fragments below to create two widget elements horizontally.

new Row(  
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
  children: <Widget>[  
    new Text(  
      "VegElement",  
    ),  
    new Text(  
      "Non-vegElement"  
    ),  
  ],  
),  

Center

The center, the child widget that is placed inside of it, uses this widget. Each of the earlier examples includes the center widget.

Example

Center(  
  child: new clumn(  
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
    children: <Widget>[  
      new Text(  
        "VegElement",  
      ),  
      new Text(  
        "Non-vegElement"  
      ),  
    ],  
  ),  
),  

Padding

To give them padding in particular directions, this widget wraps other widgets. Additionally, you can add padding in every direction. The example below, which provides padding of 6.0 in all directions for the text widget, helps us to understand it.

Example

Padding(  
  padding: const EdgeInsets.all(6.0),  
  child: new Text(  
    "Element 1",  
  ),  
),  

Scaffold

You can add common material design components like AppBar, Floating Action Buttons, Drawers, etc. using the framework provided by this widget.

Stack

It is a necessary widget that is mostly used to overlap widgets, like a button on a gradient background.

State Management Widget

The two main widget types in Flutter are:

  1. StatelessWidget
  2. StatefulWidget

StatefulWidget

The state of a StatefulWidget is known. The state object and the widget are its two main classes. It is dynamic because the internal data may change over the course of the widget’s lifetime. No build() method exists for this widget. A class that extends the Flutters State Class is returned by the createState() method, which is present. The StatefulWidget includes Checkbox, Radio, Slider, InkWell, Form, and TextField as examples.

Example

class Car extends StatefulWidget {  
  const Car({ Key key, this.title }) : super(key: key);   
  
  @override  
  _CarState createState() => _CarState();  
}  
  
class _CarState extends State<Car> {  
  @override  
  Widget build(BuildContext context) {  
    return Container(  
      color: const Color(0xFEEFE),  
           child: Container(  
            child: Container( //child: Container() )  
        )  
    );  
  }  
}  

StatelessWidget

There is no state information available in the StatelessWidget. Throughout its entire lifespan, it doesn’t change. Text, Row, Column, Container, and other widget types are examples of the StatelessWidget.

Example

class MyStatelessCarWidget extends StatelessWidget {  
  const MyStatelessCarWidget ({ Key key }) : super(key: key);  
  
  @override  
  Widget build(BuildContext context) {  
    return Container(color: const Color(0x0xFEEFE));  
  }  
}  
class MyStatelessCarWidget extends StatelessWidget {  
  const MyStatelessCarWidget ({ Key key }) : super(key: key);  
  
  @override  
  Widget build(BuildContext context) {  
    return Container(color: const Color(0x0xFEEFE));  
  }  
}  

Conclusion

You’ve learned about flutter widgets examples. 

Now, Iā€™d like to hear from you: Do you know how to use the flutter widgets with examples? Did you think it would be this easy? 

Either way, let me know by leaving a quick comment below.

- Advertisement -

Help Us!!!

We are expert developer providing free content to help the flutter learner. We need your support. Your little support inspire us šŸ¤—

Sarhan Bakshi
Sarhan Bakshi
I am a Writer, Designer, and Artist who is professional in all sectors. I am someone who can prove his worth and is witty and smart enough to handle any situation. I have photography skills and quick-to-act leadership abilities. I am young and sporty. Moreover, I have great social skills and can hold a conversation with people of more than one language. I am well adept in English, Bengali, and Hindi languages.

Related blog posts