如何在 flutter 中更改抽屉图标？

Question

抽屉有这个默认的三个水平条作为默认图标，但我想将其更改为其他图标。
我检查了 Drawer() 下的可能选项，但似乎没有属性附加到那个。

Answer 1

AppBar(
        leading: IconButton(
          onPressed: () {
            // Code
          },
          icon: Icon(Icons.arrow_back),
        ),
      ),

Answer 2

这应该有效。

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

来自文档 ->

{Widget leading} Type: Widget
A widget to display before the [title]. If this is null and [automaticallyImplyLeading] is set to true, the [AppBar] will imply an appropriate widget. For example, if the [AppBar] is in a [Scaffold] that also has a [Drawer], the [Scaffold] will fill this widget with an [IconButton] that opens the drawer (using [Icons.menu]). If there's no [Drawer] and the parent [Navigator] can go back, the [AppBar] will use a [BackButton] that calls [Navigator.maybePop]. The following code shows how the drawer button could be manually specified instead of relying on [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,
        );
      },
    ),
  );
}

The [Builder] is used in this example to ensure that the context refers to that part of the subtree. That way this code snippet can be used even inside the very code that is creating the [Scaffold] (in which case, without the [Builder], the context wouldn't be able to see the [Scaffold], since it would refer to an ancestor of that widget).

Answer 3

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

Answer 4

假设您有：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 5

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

描述了更好的方法here

我的工作代码在这里：

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 6

只改变图标颜色，:

更简单

@override
Widget build(BuildContext context) {
  return Scaffold(
    drawer: Drawer(),
    appBar: AppBar(
      title: Text("Navigation Drawer"),
      iconTheme: IconThemeData(color: Colors.green),
    ),
  );
}

Answer 7

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

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

Answer 8

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

var scaffoldKey = GlobalKey<ScaffoldState>();

现在在您所在的州添加了脚手架class，就像这样

      @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 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, )), ),

如何在 flutter 中更改抽屉图标？

How can I change Drawer icon in flutter?

flutter

dart

navigation

uinavigationbar

drawer