Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Widgets in Flutter
3.
Layout Widgets
4.
Types of Widget
5.
Visible widget
5.1.
Text
5.2.
Image
5.3.
Button
5.4.
Example for Visible Widget
6.
Invisible Widget
6.1.
Column
6.2.
Row
6.3.
Center
6.4.
Example for Invisible Widget
7.
State Management Widget
8.
StatefulWidget
9.
StatelessWidget
9.1.
Example for State Management Widget
10.
Frequently Asked Questions
10.1.
What is flutter?
10.2.
What are the advantages of flutter?
10.3.
What are widgets in flutter?
10.4.
How many are flutter widgets categories available?
10.5.
What are the standard layout widgets?
11.
Conclusion
Last Updated: Mar 27, 2024
Medium

Flutter Widgets

Author Jaglike Makkar
2 upvotes
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

Flutter is an open-source UI software development toolkit from Google that allows you to create cross-platform apps from a single code base. We begin by creating widgets, the foundation of all flutter apps. Widgets indicate how their present configuration and status should appear in their display. Text widgets, row widgets, column widgets, container widgets, and many others are included.

Widgets in Flutter

A widget is any component on a display of the Flutter app. The screen's appearance is entirely determined by the widgets used to construct the app and the order in which they are used. A tree of widgets is the structure of an app's code.

Source: youtube.jedipixels

 

Widget Categories

The flutter widgets are grouped into 14 groups in general. They're mainly divided into categories based on the functionality they give in a flutter app.

 

1. Accessibility: This group of widgets makes a flutter app more user-friendly.

2. Animation and motion: Widgets that bring animation and motion to other widgets are known as animation and motion widgets.

3. Assets, Images, and Icons: These widgets manage assets like displaying images and icons.

4. Async: These are used in the flutter application to give async capabilities.

5. Basics: This is a collection of widgets that are required for the building of any flutter application.

6. Cupertino: These widgets are created for iOS.

7. Input: In a flutter application, this collection of widgets provides input capability.

8. Interaction Models: Such widgets manage touch events and direct users to various views inside the app.

9. Layout: This collection of flutter widgets aids in placing other widgets on the screen.

10. Material Components: This is a collection of flutter widgets based on Google's Material Design.

11. Painting and effects: These are a group of flutter widgets that change the appearance of their children without altering their design or shape.

12. Scrolling: This adds scroll ability to several other flutter widgets that aren't ordinarily scrollable.

13. Styling refers to the app's theme, responsiveness, and sizing.

14. Text: These are used to display text.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Layout Widgets

A widget in Flutter can be made by combining one or more widgets. Flutter provides a vast range of widgets with layout features that can be used to connect many widgets into a single widget. The child widget, for example, can be centered using the Center widget.

The following are some of the most common layout widgets:

Container: A rectangular box with a backdrop, border, and shadow decorated with BoxDecoration widgets.

Center: Its child widget should be centered.

Row: Arrange the children in a row in a horizontal direction.

Column: Arrange the children of a column in a vertical direction.

Stack: Arrange them in a stack, one on the other.

Source: docs.flutter.dev

Types of Widget

The Flutter widget is divided into two categories:

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

Visible widget

The viewable widgets are connected to the data entered and outputted by the user. This widget's most important kinds are:

Text

A Text widget contains text that will be shown on the screen. We may align the text widget using the text-align property, and the style property allows us to customize Text with font, font weight, font style, letter spacing, color, and many other options.

Image

This widget contains the picture, which may be retrieved from various sources, including the asset folder or straight from the URL.      

Button

This widget allows you to conduct an activity with a single click. Flutter does not support the Button widget natively; instead, it employs buttons like the FlatButton and the RaisedButton.

Example for Visible Widget

Below is the complete source code for using a button:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      // Name of Application

      title: 'Flutter Widgets',

      theme: ThemeData(

        primarySwatch: Colors.blue,

      ),

      home: MyHomePage(title: 'Flutter Demo(Coding Ninjas)'),
    );
  }
}

class MyHomePage extends StatelessWidget {

  final String title;

  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text(title),

      ),

      body: Center(

        child: new RaisedButton(

          child: Text("Button"),

          elevation: 5.0,

          onPressed: () {

            // Do something here

          },
        ),
      ),
    );
  }
}

 

Output:

Invisible Widget

The invisible widgets are associated with widget layout and control. It allows you to modify how the widgets operate and appear on the screen. Among the essential sorts of these widgets are:

Column

A column widget is a widget that arranges all of its children's widgets vertically. It uses the mainAxisAlignment and crossAxisAlignment attributes to establish space between widgets. The major axis in these attributes is the vertical axis, while the cross axis is the horizontal axis.

Row

The row widget is similar to the column widget in that it creates widgets horizontally rather than vertically. The horizontal axis is the main axis, while the vertical axis is the cross axis.

Center

This widget is used to center the child widget contained within it. The cente widget is present in all of the preceding examples.

Example for Invisible Widget

Below is the complete source code for using a Column:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  // Root Widget of your application

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      // Name of your Application

      title: 'Flutter Widgets',
   
      theme: ThemeData(

        primarySwatch: Colors.blue,

      ),

      home: MyHomePage(title: 'Flutter Demo(Coding Ninjas)'),

    );
  }
}


class MyHomePage extends StatelessWidget {
  final String title;
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text(title),

      ),

      body: Center(

        child: new Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: <Widget>[

            new Text(

              "Hello",
            ),

            new Text("Ninja!!"),

          ],
        ),
      ),
    );
  }
}

 

Output:

State Management Widget

There are primarily two sorts of widgets in Flutter:

  1. StatelessWidget
  2. StatefulWidget

StatefulWidget

A StatefulWidget keeps track of its current state. It primarily consists of two classes: the state object and the widget. It is dynamic because the inside data might change over the widget's lifespan. This widget lacks a construct() function. It provides a method called createState() that returns a class that extends the Flutters State Class. Checkbox, Radio, Slider, InkWell, Form, and TextField are instances of StatefulWidgets.

StatelessWidget

The StatelessWidget has no state information. Throughout its existence, it stays motionless. Text, Row, Column, Container, and so on are instances of StatelessWidgets.

Example for State Management Widget

The bare app screen layout tree was utilising Stateless Widgets.

import 'package:flutter/material.dart';

// function to trigger build pricess
void main() => runApp(const CodingNinjas());

class CodingNinjas extends StatelessWidget {

  const CodingNinjas({
  
    Key ? key
    
  }): super(key: key);

  @override
  Widget build(BuildContext context) {
  
    return MaterialApp(
    
      home: Scaffold(

        backgroundColor: Colors.lightGreen,

        appBar: AppBar(

          backgroundColor: Colors.green,

          title: const Text("CodingNinjas"),

        ), // AppBar

        body: Container(

          child: const Center(

            child: Text("Hello Ninja!!"),

          ), // Center

        ), // Container

      ), // Scaffold

    ); // MaterialApp

  }

}

 

Output:      

Frequently Asked Questions

What is flutter?

Flutter is a framework that allows you to create entirely platform-agnostic mobile applications for iOS and Android.

What are the advantages of flutter?

The following are some of the significant advantages of using flutter:

  1. Cross-platform Development
  2. Reduce Code Development
  3. Live and Hot Reloading
  4. Flexible UI
  5. Good community support

What are widgets in flutter?

A flutter widget is any component on a display of the Flutter app. The screen's appearance is entirely determined by the widgets used to construct the app and the order in which they are used.

How many are flutter widgets categories available?

Flutter widgets are divided into 14 categories, including accessibility, animation, scrolling, styling, etc.

What are the standard layout widgets?

The standard layout widgets are container, center, row, column, and stack.

Conclusion

In this article, we have extensively discussed the Flutter widgets and their uses. We looked at various categories of widgets.

After reading about the Flutter widgets, are you not feeling excited to read/explore more articles on flutter? Don’t worry; Coding Ninjas has you covered. To learn, see Flutter basicsFlutter App Development, and Flutter navigation

Refer to our Guided Paths on Coding Ninjas Studio to upskill yourself in DSACompetitive ProgrammingJavaScriptSystem Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio! But suppose you have just started your learning process and are looking for questions asked by tech giants like Amazon, Microsoft, Uber, etc. In that case, you must look at the problems, interview experiences, and interview bundle for placement preparations.

Nevertheless, you may consider our paid courses to give your career an edge over others!

Do upvote our blogs if you find them helpful and engaging!

Happy Learning!

Previous article
Difference between Flutter and React Native
Next article
Flutter layouts
Live masterclass