Building UI with Scaffold and AppBar in Flutter

In Flutter, you can build a simple yet powerful user interface using Scaffold and AppBar widgets. Scaffold provides a basic structure for an app with common elements like the app bar, the app body, and navigation buttons. AppBar is a part of Scaffold and contains the app title and navigation options.

Below is a guide on how to build a simple user interface using Scaffold and AppBar:

Create a New Flutter App

First, create a new Flutter app by running the following command in the terminal:

flutter create app_name

(Replace app_name with the desired name of your app).

Edit the main.dart File

In the main.dart file (inside the lib folder), replace the content with the following:

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 StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter App with Scaffold and AppBar'),
      ),
      body: Center(
        child: Text('Hello, world!'),
      ),
    );
  }
}

In the example above, we create an app with Scaffold and AppBar. The Scaffold contains the AppBar and the user interface body passed to the body property.

Run the App

Finally, to run the app, run the following command in the terminal:

flutter run

Your app will display a screen with the title "Flutter App with Scaffold and AppBar" on the app bar and the text Hello, world! in the center of the screen.

Conclusion: Scaffold and AppBar are two essential widgets in Flutter that help you build a simple and functional user interface. By using them, you can create attractive apps with basic UI components like the app bar and the app body.