Flutter StateFul example (for beginners)

This is an easy-to-understand step-by-step guide on how to use stateful widgets in Flutter (beginner level).

Prerequisites

• Basic Flutter knowledge
• Flutter SDK, Visual Studio Code
• Android Studio or Xcode

Here’s our tiny project at the end:Advertisements

As you can see, everything typed by the user will be displayed on the screen immediately.

Getting Started

1. Create a new Flutter project:

flutter create my_project

2. Delete everything in lib/main.dart except the following:

import 'package:flutter/material.dart';

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

Advertisements3. Type “st” and select “Flutter stateful widg…” from the suggestions.

4. Type “MyApp” to name all the classes like so:

5. Edit the _MyAppState class like this:

class _MyAppState extends State<MyApp> {
  // the text entered by the user
  String enteredText = '';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: Column(children: [
            // The TextField that lets the user type something in
            TextField(
              onChanged: (value) {
                setState(() {
                  enteredText = value;
                });
              },
            ),

            // Adding some vertical space
            SizedBox(height: 30),
            // Display the text entered by the user
            Text(enteredText, style: TextStyle(fontSize: 30),),
          ]),
        ),
      ),
    );
  }
}

The complete code:

// main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // the text entered by the user
  String enteredText = '';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: Column(children: [
            // The TextField that lets the user type something in
            TextField(
              onChanged: (value) {
                setState(() {
                  enteredText = value;
                });
              },
            ),

            // Adding some vertical space
            SizedBox(height: 30),
            // Display the text entered by the user
            Text(
              enteredText,
              style: TextStyle(fontSize: 30),
            ),
          ]),
        ),
      ),
    );
  }
}

Conclusion

Using stateful widgets is the easiest way to manage state in a single-screen or non-complex Flutter app. Once you feel comfortable with it, you can explore more advanced state management approaches by taking a look at the following articles:

• Using GetX (Get) for Navigation and Routing in Flutter
• Most Popular Packages for State Management in Flutter
• Flutter and Firestore Database: CRUD example (null safety)

You can also check out our Flutter category page, or Dart category page for the latest tutorials and examples.