Blog Details

img
Development

What is widgets in Flutter?

Spoke Right / 6 Nov, 2023

Flutter 

is Google’s UI toolkit for crafting beautiful, natively compiled iOS and Android apps from a single code base. To build any application we start with widgets – The building block of flutter applications. Widgets describe what their view should look like given their current configuration and state. It includes a text widget, row widget, column widget, container widget, and many more. 

Widgets: Each element on a screen of the Flutter app is a widget. The view of the screen completely depends upon the choice and sequence of the widgets used to build the apps. And the structure of the code of an apps is a tree of widgets. 

Category of Widgets:

There are mainly 14 categories in which the flutter widgets are divided. They are mainly segregated on the basis of the functionality they provide in a flutter application.

  1. Accessibility: These are the set of widgets that make a flutter app more easily accessible.
  2. Animation and Motion: These widgets add animation to other widgets.
  3. Assets, Images, and Icons: These widgets take charge of assets such as display images and show icons.
  4. Async: These provide async functionality in the flutter application.
  5. Basics: These are the bundle of widgets that are absolutely necessary for the development of any flutter application.
  6. Cupertino: These are the iOS designed widgets.
  7. Input: This set of widgets provides input functionality in a flutter application.
  8. Interaction Models: These widgets are here to manage touch events and route users to different views in the application.
  9. Layout: This bundle of widgets helps in placing the other widgets on the screen as needed.
  10. Material Components: This is a set of widgets that mainly follow material design by Google.
  11. Painting and effects: This is the set of widgets that apply visual changes to their child widgets without changing their layout or shape.
  12. Scrolling: This provides scrollability of to a set of other widgets that are not scrollable by default.
  13. Styling: This deals with the theme, responsiveness, and sizing of the app.
  14. Text: This displays text.

Types of Widgets:

There are broadly two types of widgets in the flutter: 

  1. Stateless Widget
  2. Stateful Widget


WIDGET

Fig – Widget

Example: The Layout Tree of basic app screen using Stateless Widgets: 

  • Dart




import 'package:flutter/material.dart';


// function to trigger build process

void main() => runApp(const GeeksforGeeks());


class GeeksforGeeks extends StatelessWidget {

  const GeeksforGeeks({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("GeeksforGeeks"),

        ), // AppBar

        body: Container(

          child: const Center(

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

          ), // Center

        ), // Container

      ), // Scaffold

    ); // MaterialApp

  }

}

 
Example:  The Layout Tree of basic app screen using Stateful Widgets. This also produces the same results as the above code.

  • Dart




import 'package:flutter/material.dart';


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


class MyApp extends StatefulWidget {

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


  @override

  // ignore: library_private_types_in_public_api

  _MyAppState createState() => _MyAppState();

}


class _MyAppState extends State {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        backgroundColor: Colors.lightGreen,

        appBar: AppBar(

          backgroundColor: Colors.green,

          title: const Text("GeeksforGeeks"),

        ), // AppBar

        body: const Center(

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

        ), // Container

      ), // Scaffold

    );// MaterialApp

  }

}

Description of the widgets used are as follows: 

  • Scaffold – Implements the basic material design visual layout structure.
  • App-Bar – To create a bar at the top of the screen.
  • Text  To write anything on the screen.
  • Container – To contain any widget.
  • Center – To provide center alignment to other widgets.

Output: 

0 comments
Recent Blogs
Categories
Tags

Warning: PHP Startup: Unable to load dynamic library 'imagick.so' (tried: /usr/local/lib/php/extensions/no-debug-non-zts-20210902/imagick.so (/usr/local/lib/php/extensions/no-debug-non-zts-20210902/imagick.so: cannot open shared object file: No such file or directory), /usr/local/lib/php/extensions/no-debug-non-zts-20210902/imagick.so.so (/usr/local/lib/php/extensions/no-debug-non-zts-20210902/imagick.so.so: cannot open shared object file: No such file or directory)) in Unknown on line 0