如何在颤动中更改抽屉图标？

Question

抽屉有这个默认的三个水平条作为默认图标，但我想把它改成别的东西。
我已经检查了Drawer()下的可能选项，但似乎没有附加任何属性。

Answer 1

这应该有效。

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text('hi'),
        leading: IconButton(
          icon: Icon(Icons.accessible),
          onPressed: () => Scaffold.of(context).openDrawer(),
        ),
      ),
);

从文档->

{Widget 领先} 类型：Widget
在 [title] 之前显示的小部件。 如果这是 null 并且 [automaticallyImplyLeading] 设置为 true，则 [AppBar] 将暗示适当的小部件。 例如，如果 [AppBar] 位于也有 [Drawer] 的 [Scaffold] 中，则 [Scaffold] 将使用打开抽屉的 [IconButton] 填充此小部件（使用 [Icons.menu]）。 如果没有 [Drawer] 并且父级 [Navigator] 可以返回，则 [AppBar] 将使用调用 [Navigator.maybePop] 的 [BackButton]。 以下代码显示了如何手动指定抽屉按钮而不是依赖 [automaticallyImplyLeading]：

import 'package:flutter/material.dart';
Widget build(context) {
  return AppBar(
    leading: Builder(
      builder: (BuildContext context) {
        return IconButton(
          icon: const Icon(Icons.menu),
          onPressed: () {
            Scaffold.of(context).openDrawer();
          },
          tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
        );
      },
    ),
  );
}

本示例中使用 [Builder] 来确保上下文引用子树的那部分。 这样，即使在创建 [Scaffold] 的代码中也可以使用此代码片段（在这种情况下，如果没有 [Builder]，上下文将无法看到 [Scaffold]，因为它会引用该小部件的祖先）。

Answer 2

appBar: AppBar(
        leading: Builder(
          builder: (context) => IconButton(
            icon: Icon(Icons.menu_rounded),
            onPressed: () => Scaffold.of(context).openDrawer(),
          ),
        ),
        title: Text(
          "Track your Shipment",
        ),
      ),

Answer 3

您也可以使用这样的自定义按钮打开抽屉。 创建此脚手架键。

var scaffoldKey = GlobalKey<ScaffoldState>();

现在在你的状态类中添加了一个像这样的脚手架

      @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      drawer: Drawer(
        child: Text('create drawer widget tree here'),
      ),
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(
          'appName',
          style: Theme.of(context).textTheme.headline2,
        ),
        leading: IconButton(
          onPressed: () {
            scaffoldKey.currentState?.openDrawer();
          },
          icon: Image.asset(
            'assets/images/menu.png',
            fit: BoxFit.cover,
          ),
        ),
      ),
      body: Container(),
    );
  }

快乐编码伙计们:)

Answer 4

 appBar: AppBar(

    leading: Icon(Icons.favorite),

    title: Text("Drawer"),),

Answer 5

假设您有：index.dart（您要使用应用栏的位置）、drawer.dart（您的抽屉或导航菜单）和 appbar.dart（您的应用栏）

你可以在抽屉里做这个：

Widget drawer(BuildContext context) {
    return Drawer(
child: ListView(
  padding: EdgeInsets.zero,
  children: <Widget>[
    Container(
        ...
    )
);

然后你的 appbar.dart：

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return AppBar(
      backgroundColor: Colors.white,
      leading: InkWell(
        onTap: () => Scaffold.of(context).openDrawer(),
        child: Image.asset("assets/images/imgAppBar.png"),
      ),
     title: Container(...

那么你的 index.dart：

@override
Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      drawer: drawer(context),
      appBar: CustomAppBar(),
    ...

这只是一个简单的。 如果您想使用图标等，您可以使用 IconButton。

Answer 6

实际上，我尝试了 cmd_prompter 的答案，但它对我不起作用。

这里描述了更好的方法

我的工作代码在这里：

return DefaultTabController(
      key: Key("homePage"),
      length: 2,
      child: Scaffold(
          endDrawer: Drawer(

        ),
          appBar: AppBar(
            leading: BackButton(
                onPressed: () {
                  },
              ),
            title: Text(profile.selectedCity!),
            actions: [
              Padding(
                padding: EdgeInsets.symmetric(horizontal: baseUnit(3)),
                child: Builder(
                  builder: (context) => IconButton(
                      icon: Icon(Icons.account_circle),
                      onPressed: () => Scaffold.of(context).openEndDrawer(),
                    )
                )
              )

它对我来说很好 - 尤其是关于使用 Builder 的这部分。 这很重要 - 否则它对我不起作用。

Answer 7

如果有人只需要更改图标颜色：

通过向 AppBar 添加 iconTheme更容易做到

Answer 8

您需要创建 ScaffoldKey 类型的全局键，用于打开抽屉并更改图标

    Widget build(BuildContext context) {
    var scafoldKey = GlobalKey<ScaffoldState>();
    return Scaffold(
      appBar: AppBar(
        title:Text('hi'),
        leading: IconButton(
          icon: Icon(Icons.accessible),
          onPressed: () => scafoldKey.currentState.openDrawer(),
        ),
      ),
    );

Answer 9

class HomeOne extends StatefulWidget { const HomeOne({Key? key}) : super(key: key);

@override State createState() =>HomeOneState(); }

var scaffoldKey = GlobalKey();

class HomeOneState extends State { @override Widget build(BuildContext context) { var theme = Theme.of(context); return Directionality( textDirection: TextDirection.rtl, child: Scaffold( key: scaffoldKey, drawerEnableOpenDragGesture: true, // drawerScrimColor: Colors.red, appBar: AppBar( leading: IconButton( onPressed: () => scaffoldKey.currentState?.openDrawer(), icon: const Icon( Icons.add, color: Colors.red, )), ),