Flutter Widgets - CodeMub

Introduction

Flutter is Google’s UI toolkit for crafting beautiful, natively compiled iOS and Android apps from a single code base. To build any damn application, we start with widgets - the amazing building blocks of flutter applications. These widgets, oh boy, they describe what their view should look like given their current configuration and state. So many widgets to choose from - text widget, row widget, column widget, container widget, and many more cool ones!

Widgets

Widgets, oh widgets! Each element on a screen of the godly Flutter app is nothing but a freaking widget. The view of the screen totally depends upon the choice and sequence of the widgets used to build the apps. Picture this - the structure of the code of an app is a tree, yes, you heard me right, a TREE, of widgets.

Categories of Widgets

OMG, there are mainly 14 freaking categories in which the awesome Flutter widgets are divided. They are mainly segregated on the basis of the functionality they provide in a flutter application. Oh, the drama!

• Accessibility: Man, these fine widgets make a flutter app more easily accessible. They're like the superheroes of accessibility.
• Animation and Motion: These widgets add some serious bling-bling to other widgets. Gotta love that animation!
• Assets, Images, and Icons: These super-cool widgets take charge of freaking assets such as display images and show off some extraordinary icons.
• Async: These bad boys provide async functionality in the wicked flutter application. Async all the way!
• Basics: These are the bundle of widgets that are absolutely necessary for the damn development of any flutter application. Basic but definitely not boring!
• Cupertino: These are the iOS designed widgets. Who doesn't want to give their app that sexy Apple look, am I right?
• Input: This set of widgets provides delightful input functionality in a freakin' flutter application. Gotta get that user interaction going!
• Interaction Models: These widgets are here to manage touch events, swipe here, swipe there, and route users to different views in the crazy application. Go, interact away!
• Layout: This wicked bundle of widgets helps in placing the other widgets on the screen as needed. Aligning things like a pro!
• Material Components: This is a set of widgets that mainly follow the cool material design by Google. Material, baby!
• Painting and effects: Oh, these fine wizards apply some mind-blowing visual changes to their child widgets without changing their layout or shape. Pure magic!
• Scrolling: This bad boy provides scrollability to a set of other widgets that are not scrollable by default. So, scroll along, my friend!
• Styling: This fancy stuff deals with the theme, responsiveness, and sizing of the app. Let's make it look stylish!
• Text: This beauty displays, you guessed it right, the stunning text. Words speak louder than actions!

Types of Widgets

Listen up, folks, there are broadly TWO types of widgets in the roaring flutter:

1. Stateless Widget

2. Stateful Widget

Stateless Widget

import 'package:flutter/material.dart';
void main() {
  runApp(MyStatelessApp());
}
class MyStatelessApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stateless Widget CodeMub'),
        ),
        body: MyStatelessWidget('Hello, I am a Stateless Widget!'),
      ),
    );
  }
}
class MyStatelessWidget extends StatelessWidget {
  final String message;
  MyStatelessWidget(this.message);
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        padding: EdgeInsets.all(16),
        color: Colors.blue,
        child: Text(
          message,
          style: TextStyle(
            color: Colors.white,
            fontSize: 20,
          ),
        ),
      ),
    );
  }
}

Stateful Widget

import 'package:flutter/material.dart';

void main() {
  runApp(MyStatefulApp());
}

class MyStatefulApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stateful Widget CodeMub'),
        ),
        body: MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State {
  int counter = 0;

  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            Text(
              'I am a Stateful Widget',
              style: TextStyle(
                color: Colors.black,
                fontSize: 20,
              ),
            ),
            SizedBox(height: 10),
            Text(
              'Counter: $counter',
              style: TextStyle(
                color: Colors.black,
                fontSize: 18,
              ),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: incrementCounter,
              child: Text('Increment Counter'),
            ),
          ],
        ),
      ),
    );
  }
}

Description of the Widgets

Let get down to business and describe the widgets used, shall we?

• Scaffold – boy, this one implements the basic material design visual layout structure. So fancy!
• App-Bar – You want a bar at the top of the screen? You got it! This baby creates that top-notch bar for you.
• Text – I mean, what can I say? It's here to write anything your heart desires on the screen. Words, words, words!
• Container – It's like a box that can contain any widget. Talk about flexibility!
• Center – This widget is all about providing center alignment to other widgets. Keep things right in the middle!

Conclusion

In conclusion, Flutter is Google's versatile UI toolkit for creating cross-platform apps. Widgets, the fundamental building blocks, categorize into 14 types, each serving a unique purpose. The Stateless and Stateful widgets offer simplicity and dynamism in app development. Key widgets like Scaffold, App-Bar, Text, Container, and Center are crucial for crafting visually appealing layouts. Embracing these widgets is essential for both seasoned and new Flutter developers, unlocking the toolkit's full potential for creating delightful mobile experiences. Happy Fluttering!