Understanding single-page flutter app with state

// Imports Flutter's Material Design widgets such as

// Scaffold, Text, Button, AppBar, etc.
import 'package:flutter/material.dart';
// Every Dart application starts from main()
void main() {
  // Starts the Flutter application.
  // MyApp becomes the root widget.
  runApp(const MyApp());
}
// Root widget of our application.
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    // MaterialApp provides the basic app configuration.
    return MaterialApp(
      // Removes the DEBUG banner.
      debugShowCheckedModeBanner: false,
      // HomePage is the first screen.
      home: const HomePage(),
    );
  }
}
// StatefulWidget is used because the counter will change.
class HomePage extends StatefulWidget {
  const HomePage({super.key});
  @override
  State<HomePage> createState() => _HomePageState();
}
// This class stores the changing state of HomePage.
class _HomePageState extends State<HomePage> {
  // Variable holding our current counter value.
  int counter = 0;
  // Function called when the button is pressed.
  void incrementCounter() {
    // setState tells Flutter:
    // "My data changed. Rebuild the UI."
    setState(() {
      counter++; // Same as: counter = counter + 1;
    });
  }
  @override
  Widget build(BuildContext context) {
    // Scaffold creates a basic page structure.
    return Scaffold(
      // Top bar of the page.
      appBar: AppBar(
        title: const Text('My First Flutter App'),
      ),
      // Main content of the page.
      body: Center(
        // Column places widgets vertically.
        child: Column(
          // Makes the Column only as tall as necessary.
          mainAxisSize: MainAxisSize.min,
          // Column can contain multiple widgets using children.
          children: [
            // Displays a Flutter icon.
            const Icon(
              Icons.favorite,
              color: Colors.red,
              size: 60,
            ),
            // Adds vertical space.
            const SizedBox(height: 20),
            // Displays normal text.
            const Text(
              'Welcome to Flutter!',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 20),
            // $counter inserts the value of counter into the String.
            Text(
              'Button clicked $counter times',
            ),
            const SizedBox(height: 20),
            // Creates a button.
            ElevatedButton(
              // When clicked, call incrementCounter().
              onPressed: incrementCounter,
              // Text displayed inside the button.
              child: const Text('Click Me'),
            ),
          ],
        ),
      ),
    );
  }
}

Remember only this flow

Button click → incrementCounter() → setState() → counter++ → UI rebuilds


Comments

Post a Comment

Popular posts from this blog

Files in your Flutter Project

  In a Flutter project , the files are organized so that your Dart application code , UI resources , platform-specific Android/iOS code , dependencies , and build configuration remain separated. A typical project looks like this: my_flutter_app/ ├── lib/ │   └── main.dart ├── test/ ├── android/ ├── ios/ ├── web/ ├── windows/ ├── macos/ ├── linux/ ├── pubspec.yaml ├── pubspec.lock ├── analysis_options.yaml ├── .gitignore └── README.md 1. lib/ ⭐ Most important This is where almost all of your Flutter application code lives . lib/ ├── main.dart ├── screens/ ├── widgets/ ├── models/ ├── services/ └── utils/ For most day-to-day Flutter development, you spend the majority of your time here. main.dart The entry point of the Flutter application. A minimal example: import 'package:flutter/material.dart'; void main() {   runApp(const MyApp()); } class MyApp extends StatelessWidget {   const MyApp({super.key});   @override   Widget build(BuildContext context) ...
Read more

Flutter setup on Windows 11 using VS Code + Android Emulator

For Windows 11 + VS Code + Android Emulator , I recommend using VS Code as your coding/debugging IDE and installing Android Studio primarily for the Android SDK, SDK tools, and emulator . Flutter's current documentation recommends VS Code as a supported installation path, while Android Studio provides the Android tooling required for an emulator. 1. What you need Install these components: Git for Windows Visual Studio Code Flutter SDK VS Code Flutter extension Android Studio Android SDK Android Emulator / virtual device You do not have to write your application in Android Studio. 2. Install Git Flutter's Windows setup lists Git for Windows as a prerequisite. Install Git, then open PowerShell and verify: git --version You should see something similar to: git version 2.x.x.windows.x Reference: https://docs.flutter.dev/install/quick 3. Install VS Code Install Visual Studio Code , which will be your main development environment. Then open: VS Code → Extensions Search for: Flutter...
Read more