Как изменить цвет кнопки возврата appBar

102

Я не могу понять, как изменить цвет кнопки автоматического возврата appBar на другой цвет. он находится под эшафотом, и я пытался исследовать его, но не могу осмыслить его.

return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Image.asset(
          'images/.jpg',
          fit: BoxFit.fill,
        ),
        centerTitle: true,
      ),
Mfreeman
источник

Ответы:

280

Вы должны использовать iconThemeсвойство из AppBar, например:

appBar: AppBar(
  iconTheme: IconThemeData(
    color: Colors.black, //change your color here
  ),
  title: Text("Sample"),
  centerTitle: true,
),

Или если вы хотите использовать кнопку возврата самостоятельно.

appBar: AppBar(
  leading: IconButton(
    icon: Icon(Icons.arrow_back, color: Colors.black),
    onPressed: () => Navigator.of(context).pop(),
  ), 
  title: Text("Sample"),
  centerTitle: true,
),

Даже лучше, только если вы хотите изменить цвет кнопки возврата.

appBar: AppBar(
  leading: BackButton(
     color: Colors.black
   ), 
  title: Text("Sample"),
  centerTitle: true,
),
Diegoveloper
источник
3
Есть ли шанс, что мы можем сразу заменить значок в AppBar приложения, вместо этого вставляя все экраны с помощью AppBar?
djalmafreestyler
1
@djalmafreestyler Создайте собственный виджет, например, ParentPageи там вы можете добавить appBar один раз и везде, где вы можете использовать это вместоScaffold
Сисир
35

вы также можете переопределить стрелку назад по умолчанию с помощью виджета по вашему выбору с помощью "перехода":

leading: new IconButton(
  icon: new Icon(Icons.arrow_back, color: Colors.orange),
  onPressed: () => Navigator.of(context).pop(),
), 

все, что делает виджет AppBar, - это «ведущий» виджет по умолчанию, если он не установлен.

Blaneyneil
источник
1
Не совсем так, потому что AppBarпри нажатии также будет отображаться кнопка «Назад» ModalRoute.
creativecreatorormaybenot
2
И установить automaticallyImplyLeading: falseв AppBar.
Loolooii
1
Проголосовали за Navigator.of(context).pop();благодарность, чувак
Fadhly Permata
1
а что если я уже удалил всю историю навигатора! этот код выйдет из строя!
Шади Мохамед Шериф,
затем проверьте, можете ли вы щелкнуть, например: if (Navigator.canPop (context)) {Navigator.pop (context); } else {// сделать что-нибудь}}
blaneyneil
13

Казалось, было проще просто создать новую кнопку и добавить к ней цвет, вот как я это сделал для всех, кому интересно

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: BackButton(
            color: Colors.black
        ),
Mfreeman
источник
1
Работал красиво. Самое лаконичное решение из всех.
Hashir Baig
3
AppBar(        
    automaticallyImplyLeading: false,
    leading: Navigator.canPop(context)
        ? IconButton(
            icon: Icon(
              Icons.arrow_back,
              color: Colors.black,
              size: 47,
            ),
            onPressed: () => Navigator.of(context).pop(),
          )
        : null,
);
Джордж Пападакис
источник
2

Вы также можете установить глобальный цвет значка для приложения.

MaterialApp(
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      iconTheme: IconThemeData(
        color: Colors.green
      )
    )
  )
)
кашло
источник
1

Вы можете настроить AppBarWidget , ключевое слово с очень важно, или вы можете назначить пользовательские AppBarWidget для AppBar собственности строительных лесов :

import 'package:flutter/material.dart';

double _getAppBarTitleWidth(
    double screenWidth, double leadingWidth, double tailWidth) {
  return (screenWidth - leadingWidth - tailWidth);
}

class AppBarWidget extends StatelessWidget with PreferredSizeWidget {
  AppBarWidget(
      {Key key,
      @required this.leadingChildren,
      @required this.tailChildren,
      @required this.title,
      this.leadingWidth: 110,
      this.tailWidth: 30})
      : super(key: key);

  final List<Widget> leadingChildren;
  final List<Widget> tailChildren;
  final String title;
  final double leadingWidth;
  final double tailWidth;

  @override
  Widget build(BuildContext context) {
    // Get screen size
    double _screenWidth = MediaQuery.of(context).size.width;

    // Get title size
    double _titleWidth =
        _getAppBarTitleWidth(_screenWidth, leadingWidth, tailWidth);

    double _offsetToRight = leadingWidth - tailWidth;

    return AppBar(
      title: Row(
        children: [
          Container(
            width: leadingWidth,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: leadingChildren,
            ),
          ),
          Container(
            color: Colors.green,
            width: _titleWidth,
            padding: const EdgeInsets.only(left: 5.0, right: 5),
            child: Container(
              padding: EdgeInsets.only(right: _offsetToRight),
              color: Colors.deepPurpleAccent,
              child: Center(
                child: Text('$title'),
              ),
            ),
          ),
          Container(
            color: Colors.amber,
            width: tailWidth,
            child: Row(
              children: tailChildren,
            ),
          )
        ],
      ),
      titleSpacing: 0.0,
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

Ниже приводится пример того, как его использовать:

import 'package:flutter/material.dart';
import 'package:seal_note/ui/Detail/DetailWidget.dart';
import 'package:seal_note/ui/ItemListWidget.dart';

import 'Common/AppBarWidget.dart';
import 'Detail/DetailPage.dart';

class MasterDetailPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MasterDetailPageState();
}

class _MasterDetailPageState extends State<MasterDetailPage> {
  @override
  Widget build(BuildContext context) { 
    return Scaffold(
      appBar: AppBarWidget(leadingChildren: [
        IconButton(
          icon: Icon(
            Icons.arrow_back_ios,
            color: Colors.white,
          ),
        ),
        Text(
          '文件夹',
          style: TextStyle(fontSize: 14.0),
        ),
      ], tailChildren: [
        Icon(Icons.book),
        Icon(Icons.hd),
      ], title: '英语知识',leadingWidth: 140,tailWidth: 50,),
      body: Text('I am body'),
    );
  }
}
Джим Ган
источник
0
  appBar: AppBar(
          iconTheme: IconThemeData(
            color: Colors.white, //modify arrow color from here..
          ),
      );
Зишан Ансари
источник
1
Добавьте контекст к ответу, ответ только с кодом не рекомендуется.
Арун Винот
0

Чтобы изменить ведущий цвет для CupertinoPageScaffold

Theme(
  data: Theme.of(context).copyWith(
    cupertinoOverrideTheme: CupertinoThemeData(
      scaffoldBackgroundColor: Colors.white70,
      primaryColor: Styles.green21D877, // HERE COLOR OF LEADING
    ),
  ),
  child: CupertinoPageScaffold(
    navigationBar: CupertinoNavigationBar(
      brightness: Brightness.light,
      backgroundColor: Colors.white,
      middle: Text('Cupertino App Bar'),
    ),
    child: Container(
      child: Center(
        child: CupertinoActivityIndicator(),
      ),
    ),
  ),
)
Ya Si
источник