Hướng dẫn và ví dụ Flutter Drawer

Drawer Constructor
Ví dụ Drawer
Ví dụ Drawer với UserAccountsDrawerHeader
Thiết kế ứng dụng responsive với Drawer tuỳ biến

Drawer (ngăn kéo) là một widget ẩn bên trái của màn hình ứng dụng, nó sẽ xuất hiện khi người dùng sử dụng ngón tay để vuốt từ trái sang phải. Drawer rất hữu ích trong các ứng dụng di động bởi nó tiết kiệm không gian và là nơi để người dùng điều hướng tới các chức năng khác của ứng dụng.

Cách thiết lập một Drawer ẩn bên trái màn hình:

@override
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(),
      onDrawerChanged: (bool isOpened) {
          // Do something
      },
    );
}

Bạn cũng có thể thiết lập một Drawer ẩn bên phải của màn hình, nó sẽ xuất hiện khi người dùng sử dụng ngón tay để vuốt từ phải sang trái.

@override
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      endDrawer: Drawer(),
      onEndDrawerChanged: (bool isOpened) {
          // Do something
      },
    );
}

1. Drawer Constructor

Drawer({
  Key? key,
  Color? backgroundColor,
  double? elevation,
  Color? shadowColor,
  Color? surfaceTintColor,
  ShapeBorder? shape,
  double? width,
  Widget? child,
  String? semanticLabel,
  Clip? clipBehavior,
});

2. Ví dụ Drawer

Ví dụ Drawer đơn giản:

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Drawer Demo'),
        backgroundColor: Colors.blue,
      ),
      body: const Center(
        child: Text('A drawer is an invisible side screen.'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: const EdgeInsets.all(0),
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text("Hello!"),
            ),
            ListTile(
              leading: const Icon(Icons.person),
              title: const Text('My Profile '),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: const Icon(Icons.logout),
              title: const Text('LogOut'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

3. Ví dụ Drawer với UserAccountsDrawerHeader

Trong nhiều tình huống vùng DrawerHeader được sử dụng để hiển thị tài khoản người dùng. Flutter có sẵn một widget hữu ích cho việc này, đó là UserAccountsDrawerHeader.

UserAccountsDrawerHeader({
  Key? key,
  Decoration? decoration,
  EdgeInsetsGeometry? margin = const EdgeInsets.only(bottom: 8.0),
  Widget? currentAccountPicture,
  List<Widget>? otherAccountsPictures,
  Size currentAccountPictureSize = const Size.square(72.0),
  Size otherAccountsPicturesSize = const Size.square(40.0),
  required Widget? accountName,
  required Widget? accountEmail,
  void Function()? onDetailsPressed,
  Color arrowColor = Colors.white,
});

main_ex2.dart (*)

class MyHomePage extends StatelessWidget {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: const Text('Flutter Drawer Demo'),
        backgroundColor: Colors.blue,
      ),
      body: const Center(child: Text('A drawer is an invisible side screen.')),
      drawer: Drawer(
        child: ListView(
          padding: const EdgeInsets.all(0),
          children: [
            UserAccountsDrawerHeader(
              accountName: Text("Tom Cat"),
              accountEmail: Text("tom@example.com"),
              onDetailsPressed: () {
                _showUserDetails(context);
              },
              currentAccountPicture: CircleAvatar(
                backgroundImage: NetworkImage(
                  "https://raw.githubusercontent.com/o7planning/rs/master/flutter/users/tom.webp",
                ),
              ),
              decoration: BoxDecoration(
                color: Colors.blue,
                image: DecorationImage(
                  image: NetworkImage(
                    "https://raw.githubusercontent.com/o7planning/rs/master/flutter/tom-and-jerry.webp",
                  ),
                  fit: BoxFit.fill,
                ),
              ),
              otherAccountsPictures: [
                CircleAvatar(
                  backgroundColor: Colors.white,
                  backgroundImage: NetworkImage(
                    "https://raw.githubusercontent.com/o7planning/rs/master/flutter/users/tom2.webp",
                  ),
                ),
                CircleAvatar(
                  backgroundColor: Colors.white,
                  backgroundImage: NetworkImage(
                    "https://raw.githubusercontent.com/o7planning/rs/master/flutter/users/tom3.webp",
                  ),
                ),
              ],
            ),
            ListTile(
              leading: const Icon(Icons.person),
              title: const Text('My Profile '),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: const Icon(Icons.workspace_premium),
              title: const Text('Go Premium '),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: const Icon(Icons.video_label),
              title: const Text(' Saved Videos '),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: const Icon(Icons.logout),
              title: const Text('LogOut'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }

  void _showUserDetails(BuildContext context) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Show User Details')),
    );
    _scaffoldKey.currentState?.closeDrawer();
  }
}

4. Thiết kế ứng dụng responsive với Drawer tuỳ biến

Với các thiết bị có chiều rộng màn hình nhỏ, CustomDrawer hoạt động giống như một Drawer thông thường. Nó có hai trạng thái là mở rộng hoặc ẩn hoàn toàn.

Với các thiết bị có chiều rộng màn hình lớn, CustomDrawer sẽ không biến mất trong mọi tình huống. Nó có hai trạng thái là mở rộng hoặc thu nhỏ giống như hình minh hoạ dưới đây:

Ứng dụng Flutter Responsive với Menu Drawer
Ứng dụng Flutter Getx Responsive với Menu Drawer