Flutter Basics – Understanding Widgets, State, and Navigation

Part 3: Flutter Basics – Understanding Widgets, State, and Navigation

Introduction

Now that you’ve set up Flutter and created your first app, it’s time to dive deeper into the core concepts that make Flutter powerful. In this blog, we’ll cover widgets, state management, and navigation.

1. Understanding Widgets

Everything in Flutter is a widget. Flutter has two main types of widgets:

• StatelessWidget – Doesn’t change over time (e.g., Text, Image).
• StatefulWidget – Changes dynamically (e.g., buttons, animations).

Example of a simple StatelessWidget:

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("Hello Flutter")),
        body: Center(child: Text("Welcome to Flutter!")),
      ),
    );
  }
}

2. Managing State in Flutter

State management is crucial for dynamic apps. The most common way to manage state is using StatefulWidget.

Example of a simple StatefulWidget:

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("State Management")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("Counter: $counter", style: TextStyle(fontSize: 24)),
              ElevatedButton(
                onPressed: incrementCounter,
                child: Text("Increase Counter"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. Navigation Between Screens

In Flutter, you use the Navigator to switch between screens.

Example:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);

Final Thoughts

Understanding widgets, state, and navigation is fundamental in Flutter. These concepts will help you build more interactive and feature-rich applications. In the next post, we’ll explore advanced Flutter topics like animations, API calls, and database integration.

Let's Connect on:

• LinkedIn
• GitHub
• Substack
• Twitter
• Linktree