Рецепт кода Flutter для виджета AppBar

Виджет AppBar — это основной виджет любого приложения для Android. Он находится в верхней части приложения и в основном управляет основными элементами действий. В сегодняшнем рецепте я покажу вам, как создать AppBar для приложения в стиле телефонной книги. AppBar будет иметь значок телефонной книги, заголовок с надписью «Контакты» и элементы действий в AppBar всегда в области, а также в области переполнения.

Целевая аудитория: Новичок

Рецепт: Реализуйте базовую панель приложений с заголовком, действиями и раскрывающимся меню.

Виджет фокуса: AppBar

Цель: AppBar отображает значок, заголовок, действие и элементы меню переполнения. Щелчок по элементам меню действий/переполнения отображает сообщение о состоянии.

Значок элемента списка

Поехали!

Шаг 1. Создайте AppBar внутри Scaffold. backgroundColor используется для установки цвета фона AppBar

return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        ...
      ),
    );

Шаг 2. Добавить значок изображения, используя leading атрибут

return Scaffold(
      appBar: AppBar(
        ...
        leading: Icon(Icons.import_contacts),
        ...
      ),
    );

Шаг 3. Добавить заголовок AppBar

return Scaffold(
      appBar: AppBar(
        ...
        title: Text("Contacts"),
        ...
      ),
    );

Шаг №4. Добавлять IconButton элемент действия для отправки сообщения.

return Scaffold(
      appBar: AppBar(
        ...
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.message),
            onPressed: () {
              clicked(context, "Message sent");
            },
          ),
        ],
      ),
    );

Шаг № 5. Добавьте элемент действия переполнения, используя PopupMenuButton

return Scaffold(
      appBar: AppBar(
        ...
        actions: <Widget>[
          ...
          PopupMenuButton(
            itemBuilder: (BuildContext context) {
              return [
                PopupMenuItem(child: IconButton(
                  icon: Icon(Icons.email),
                  onPressed: () {
                   clicked(context, "Email sent");
                  },
                ),),
              ];
            },
          )
        ],
      ),
    );

Шаг №6. Обработка кликов элемента действия

void clicked(BuildContext context, menu) {
    final scaffold = Scaffold.of(context);
    scaffold.showSnackBar(
      SnackBar(
        content: Text(menu),
        action: SnackBarAction(
            label: 'UNDO',
            onPressed: scaffold.hideCurrentSnackBar),
      ),
    );
}

Полный пример кода

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Basic Appbar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BasicAppbarRecipe(title: 'Basic Appbar'),
    );
  }
}

class BasicAppbarRecipe extends StatefulWidget {
  BasicAppbarRecipe({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _BasicAppbarRecipeState createState() => _BasicAppbarRecipeState();
}

class _BasicAppbarRecipeState extends State<BasicAppbarRecipe> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        //setting the icon for the AppBar
        leading: Icon(Icons.import_contacts),
        //setting title for the AppBar
        title: Text("Contacts"),
        actions: <Widget>[
          //Setting IconButton action item to send message
          IconButton(
            icon: Icon(Icons.message),
            onPressed: () {
              //Handling click on the action items
              clicked(context, "Message sent");
            },
          ),
          //Setting Overflow action items using PopupMenuButton
          PopupMenuButton(
            itemBuilder: (BuildContext context) {
              return [
                PopupMenuItem(child: IconButton(
                  icon: Icon(Icons.email),
                  onPressed: () {
                    clicked(context, "Email sent");
                  },
                ),),
              ];
            },
          )
        ],
      ),
    );
  }

  void clicked(BuildContext context, menu) {
    final scaffold = Scaffold.of(context);
    scaffold.showSnackBar(
      SnackBar(
        content: Text(menu),
        action: SnackBarAction(
            label: 'UNDO',
            onPressed: scaffold.hideCurrentSnackBar),
      ),
    );
  }
}

Репозиторий исходного кода: Исходный код рецепта доступен здесь