So ändern Sie die Farbe der AppBar-Zurück-Schaltfläche

104

Ich kann nicht herausfinden, wie ich die automatische Zurück-Schaltfläche der AppBar in eine andere Farbe ändern kann. Es ist unter einem Gerüst und ich habe versucht, es zu erforschen, aber ich kann meinen Kopf nicht darum wickeln.

return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Image.asset(
          'images/.jpg',
          fit: BoxFit.fill,
        ),
        centerTitle: true,
      ),
Mfreeman
quelle

Antworten:

288

Sie müssen die iconThemeEigenschaft aus der AppBar wie folgt verwenden:

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

Oder wenn Sie den Zurück-Button selbst bedienen möchten.

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

Noch besser, nur wenn Sie die Farbe der Zurück-Taste ändern möchten.

appBar: AppBar(
  leading: BackButton(
     color: Colors.black
   ), 
  title: Text("Sample"),
  centerTitle: true,
),
Diegoveloper
quelle
3
Gibt es eine Chance, dass wir das Symbol in der App AppBar sofort ersetzen können, anstatt alle Bildschirme mit AppBar einzufügen?
Djalmafreestyler
1
@djalmafreestyler Erstellen Sie ein benutzerdefiniertes Widget wie ParentPageund dort können Sie die AppBar einmal hinzufügen und an allen Stellen können Sie diese anstelle derScaffold
Sisir
36

Sie können den Standard-Zurückpfeil auch mit einem Widget Ihrer Wahl über "führend" überschreiben:

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

Das AppBar-Widget bietet lediglich ein standardmäßiges "führendes" Widget, wenn es nicht festgelegt ist.

blaneyneil
quelle
1
Nicht ganz richtig, da das AppBarauch die Zurück-Taste anzeigt, wenn a ModalRoutegedrückt wird.
CreativeCreatorormaybenot
2
Und automaticallyImplyLeading: falsein AppBar einstellen.
Loolooii
1
Upvoted für Navigator.of(context).pop();Dankeschön Alter
Fadhly Permata
1
Was ist, wenn ich bereits den gesamten Navigatorverlauf gelöscht habe? Dieser Code wird abstürzen!
Shady Mohamed Sherif
Überprüfen Sie dann, ob Sie wie folgt popen können: if (Navigator.canPop (Kontext)) {Navigator.pop (Kontext); } else {// mach etwas}}
blaneyneil
13

Es schien einfacher zu sein, einfach eine neue Schaltfläche zu erstellen und Farbe hinzuzufügen. Hier ist, wie ich es für alle gemacht habe, die sich fragen

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: BackButton(
            color: Colors.black
        ),
Mfreeman
quelle
1
Hat wunderbar funktioniert. Die prägnanteste Lösung von allen.
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,
);
George Papadakis
quelle
2

Sie können die führende Symbolfarbe auch global für die App festlegen

MaterialApp(
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      iconTheme: IconThemeData(
        color: Colors.green
      )
    )
  )
)
Kashlo
quelle
1

Sie können das AppBarWidget anpassen , Schlüsselwort mit ist wichtig, oder Sie können Ihr benutzerdefiniertes AppBarWidget der appBar- Eigenschaft von Scaffold zuweisen :

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);
}

Das folgende Beispiel zeigt, wie es verwendet wird:

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'),
    );
  }
}
Jim Gan
quelle
0
  appBar: AppBar(
          iconTheme: IconThemeData(
            color: Colors.white, //modify arrow color from here..
          ),
      );
Zeeshan Ansari
quelle
1
Fügen Sie der Antwort einen Kontext hinzu. Eine Nur-Code-Antwort wird nicht empfohlen.
Arun Vinoth
0

So ändern Sie die Hauptfarbe für 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
quelle