🌉Widgets

In Flutter, everything is a widget! Widgets are the building blocks of your app's user interface. They control how your app looks and how it interacts with the user. Let’s take a closer look at widgets and how you can use them to build your app.

1. Understanding Widgets 🤔

Widgets are essentially elements on the screen, like buttons, text, sliders, and more. They can also control layout aspects, like padding, alignment, and positioning. Widgets are organized in a hierarchical tree, where each widget may have a parent and children.

2. Types of Widgets 🧩

There are primarily two types of widgets in Flutter:

1. Stateless Widgets: These widgets are immutable, meaning their properties can’t change after they’re created.

2. Stateful Widgets: These widgets maintain state that might change during the lifecycle of the widget.

3. Creating a Stateless Widget 🛠️

Let's create a simple stateless widget that displays some text.

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('Stateless Widget Example'),
        ),
        body: Center(
          child: Text('Hello, Flutter University!'),
        ),
      ),
    );
  }
}

4. Creating a Stateful Widget 🔄

Now, let’s create a stateful widget that includes a button to change the text on the screen.

Code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String text = 'Hello, Flutter University!';

  void changeText() {
    setState(() {
      text = 'You pressed the button!';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stateful Widget Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              text,
            ),
            ElevatedButton(
              onPressed: changeText,
              child: Text('Press me'),
            )
          ],
        ),
      ),
    );
  }
}

Result

5. Common Widgets 🌐

Flutter provides a plethora of widgets. Some common ones include:

• Container: A box model widget that can contain other widgets and allows for customization of dimensions, padding, margin, decoration, etc.

• Row and Column: These widgets allow for horizontal and vertical arrangements of other widgets, respectively.

• Stack: Allows for the overlay of widgets on top of each other.

Assignments 📝

Time to get your hands dirty with some practice:

• Create a stateless widget that displays an image from the internet.

• Create a stateful widget with a button that, when pressed, toggles between two images.

• Arrange a list of text widgets vertically and horizontally using Column and Row widgets.

• Create a Container widget with custom dimensions, padding, and a border.

With the completion of these assignments, you'll have a better understanding of how widgets work in Flutter.

The next topic, State Management, will further build upon these concepts and show you how to manage the state of your widgets efficiently.

Keep experimenting and happy coding!