Thiết kế Navigation Drawer trong Flutter

Trong các ứng dụng sử dụng thường có hai tùy chọn để điều hướng là Tabs và Drawers. Sau đây là phần hướng dẫn thiết kế Navigation Drawer trong Flutter.

Trong các ứng dụng sử dụng thường có hai tùy chọn để điều hướng là Tabs và Drawers. Sau đây là phần hướng dẫn thiết kế Navigation Drawer trong Flutter. Khi không có đủ không gian để hỗ trợ các Tabs thì Drawers là một trong những giải pháp thay thế tiện dụng nhất.

Trong Flutter chúng ta có thể sử dụng Drawer Widget kết hợp với Scaffold để tạo bố cục Material Design Drawer.

Bước 1: Khởi tạo Scaffold và Drawer

Để thiết kế Navigation Drawer trong Flutter bạn sẽ cần phải bọc nó trong Widget Scaffold. Để khởi tạo Scaffold với Drawer thực hiện như sau: 

Scaffold(
  drawer: Drawer(
    child:
  )
);

Bước 2: Thêm các mục vào Drawer, chúng ta sẽ thêm ListView với DrawerHeader và ListTile Widgets vào Drawers

Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: <Widget>[
      DrawerHeader(
        child: Text('Drawer Header'),
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
      ),
      ListTile(
        title: Text('Item 1'),
        onTap: () {
          // Update the state of the app
        },
      ),
      ListTile(
        title: Text('Item 2'),
        onTap: () {
          // Update the state of the app
        },
      ),
    ],
  ),
);

Bước 3: Sau đây là ví dụ hoàn chỉnh bạn có thể tham khảo.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Drawer Flutter',
      home: MyHomePage(title: 'Navigation Drawer Flutter'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(child: Text('Navigation Drawer Flutter!')),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Team Viet Dev'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

Giao diện mẫu khi chạy đoạn mã chương trình ví dụ Navigation Drawer trong Flutter:

Tải mã nguồn tại đây:

Lời kết: Trong thời gian tới Team Việt Dev sẽ tiếp tục chia sẻ thêm nhiều bài viết về xây dựng ứng dụng di động trên Android và iOS bằng Flutter miễn phí đến bạn đọc, các bạn nhớ theo dõi kênh để có được những chia sẻ mới nhất.

(Tác giả: Team Việt Dev)