Боковая панель

Часть раздела Списки и экраны путешествия по Flutter на Coddy. Урок 25 из 33.

Drawer — это панель, которая выдвигается сбоку и предназначена для разделов приложения, которые не помещаются во вкладки. Передайте её в Scaffold:

Scaffold(
  appBar: AppBar(title: Text(folder)),
  drawer: Drawer(
    child: ListView(
      children: [
        const DrawerHeader(child: Text('Mail')),
        ListTile(
          title: const Text('Sent'),
          onTap: () {
            setState(() {
              folder = 'Sent';
            });
            Navigator.pop(context);
          },
        ),
      ],
    ),
  ),
)

Если в приложении есть боковая панель, в начале панели приложения отображается кнопка меню с тремя линиями. Нажмите её или проведите пальцем от края экрана, чтобы открыть боковую панель.

Боковая панель остаётся открытой, пока что-нибудь её не закроет. Открытая боковая панель похожа на экран поверх страницы, поэтому Navigator.pop(context) закрывает её. Вызовите этот метод после нажатия на строку, иначе боковая панель закроет выбранную вами страницу.

DrawerHeader — это большая область вверху, предназначенная для названия приложения или имени вошедшей в аккаунт учётной записи.

Задание

Легко

Откройте выдвижную панель кнопкой меню: в ней есть только Inbox. Добавьте ещё две строки по образцу строки Inbox, каждая из которых устанавливает значение folder и закрывает выдвижную панель:

Sent, с помощью Icons.send
Trash, с помощью Icons.delete

Попробуйте сами

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String folder = 'Inbox';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(folder)),
      body: Center(
        child: Text('No messages in $folder'),
      ),
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(
              child: Text('Mail', style: TextStyle(fontSize: 24)),
            ),
            ListTile(
              leading: const Icon(Icons.inbox),
              title: const Text('Inbox'),
              onTap: () {
                setState(() {
                  folder = 'Inbox';
                });
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}