Xây dựng giao diện với Scaffold và AppBar trong Flutter

Trong Flutter, bạn có thể xây dựng giao diện người dùng đơn giản và mạnh mẽ bằng cách sử dụng Widgets Scaffold và AppBar. Scaffold cung cấp cơ sở cho một giao diện đơn giản với các thành phần chung như thanh ứng dụng, thân ứng dụng, và các nút điều hướng. AppBar là một phần của Scaffold và chứa tiêu đề ứng dụng và các tùy chọn điều hướng.

Dưới đây là hướng dẫn xây dựng giao diện người dùng đơn giản sử dụng Scaffold và AppBar:

Tạo ứng dụng Flutter mới

Đầu tiên, hãy tạo một ứng dụng Flutter mới bằng cách chạy lệnh sau trong terminal:

flutter create ten_ung_dung

(Thay ten_ung_dung bằng tên ứng dụng bạn muốn đặt).

Sửa nội dung file main.dart

Trong file main.dart (trong thư mục lib), thay nội dung sau vào:

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!'),
      ),
    );
  }
}

Trong ví dụ trên, chúng ta tạo một ứng dụng với Scaffold và AppBar. Scaffold chứa AppBar và một phần thân giao diện người dùng được truyền vào body.

Chạy ứng dụng

Cuối cùng, để chạy ứng dụng, hãy chạy lệnh sau trong terminal:

flutter run

Ứng dụng của bạn sẽ hiển thị màn hình với tiêu đề "Flutter App with Scaffold and AppBar" trên thanh ứng dụng và văn bản "Hello, world!" ở giữa màn hình.

Kết luận: Scaffold và AppBar là hai Widgets quan trọng trong Flutter giúp xây dựng giao diện người dùng đơn giản và tiện ích. Bằng cách sử dụng chúng, bạn có thể tạo các ứng dụng hấp dẫn với các thành phần giao diện cơ bản như thanh ứng dụng và thân ứng dụng.