Understanding Flutter Widgets

Understanding Flutter Widgets

by

Flutter, Google’s UI toolkit for constructing natively compiled packages for mobile, web, and computer from a single codebase, has received large recognition amongst developers. One of the core standards in Flutter is the widget. In this blog, we’ll dive deep into understanding what widgets are, the distinct sorts of widgets, and how to efficaciously use them for your Flutter packages.

What is a Widget?

In Flutter, everything is a widget. Widgets are the building blocks of a Flutter app’s user interface. Each widget is an immutable description of part of the person interface. Unlike conventional UI frameworks, Flutter’s widget system permits for a surprisingly customizable and bendy UI. Widgets may be used for each structural elements (like buttons or textual content) and stylistic elements (like fonts and colours).

Types of Widgets

Flutter widgets are broadly classified into two categories: Stateless and Stateful.

Stateless Widgets

A StatelessWidget is a widget that doesn’t require mutable state. This way that once the widget is built, it cannot change. Stateless widgets are perfect for static content material or UI factors that don’t alternate over time or in response to user interactions.

Example:

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Hello, Flutter!'),
    );
  }
}

void main() => runApp(MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text('Stateless Widget Example')),
    body: MyStatelessWidget(),
  ),
));

Stateful Widgets

A StatefulWidget is a widget that can alternate over time. Stateful widgets are dynamic and can react to user inputs, animations, or other events. They keep a mutable state, which may be updated using the setState() technique, triggering a rebuild of the widget.

Example:

import 'package:flutter/material.dart';

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('You have pushed the button this many times:'),
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.headline4,
          ),
          ElevatedButton(
            onPressed: _incrementCounter,
            child: Text('Increment Counter'),
          ),
        ],
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text('Stateful Widget Example')),
    body: MyStatefulWidget(),
  ),
));

Composing Widgets

One of the key strengths of Flutter is its composition version. You can construct complicated UIs by composing smaller widgets. For example, a Scaffold widget can comprise an AppBar, a Body, and a FloatingActionButton, every of which is likewise a widget.

Example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Widget Composition'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Hello, Flutter!'),
              Icon(Icons.thumb_up, size: 50, color: Colors.blue),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Custom Widgets

In Flutter, you could also create custom widgets with the aid of combining current widgets or by extending StatelessWidget or StatefulWidget. This permits for excessive reusability and modularization of your code.

Example:

import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {
  final String label;
  final VoidCallback onPressed;

  CustomButton({required this.label, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(label),
    );
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Widget Example'),
        ),
        body: Center(
          child: CustomButton(
            label: 'Click Me',
            onPressed: () {
              print('Button Pressed!');
            },
          ),
        ),
      ),
    );
  }
}

Conclusion

Understanding Flutter widgets is crucial for constructing powerful and green applications. By studying both stateless and stateful widgets, and mastering to compose and create custom widgets, you can harness the overall power of Flutter to create lovely user interfaces. 

Contact Us:

Stay connected and follow us for more insights on mobile development and the latest in Flutter technology.

Post Views: 94