Cara mengubah warna tombol kembali appBar

116

Saya tidak tahu cara mengubah tombol kembali otomatis appBar ke warna yang berbeda. itu di bawah perancah dan saya telah mencoba untuk menelitinya tetapi saya tidak bisa membungkus kepala saya di sekitarnya.

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

Jawaban:

312

Anda harus menggunakan iconThemeproperti dari AppBar, seperti ini:

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

Atau jika Anda ingin menangani tombol kembali sendiri.

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

Lebih baik lagi, hanya jika Anda ingin mengubah warna tombol kembali. 

appBar: AppBar(
  leading: BackButton(
     color: Colors.black
   ), 
  title: Text("Sample"),
  centerTitle: true,
),
diegoveloper
sumber
4
Apakah ada kemungkinan kami dapat mengganti Ikon di AppBar sekaligus, alih-alih meletakkan di semua layar menggunakan AppBar?
djalmafreestyler
1
@djalmafreestyler Buat widget khusus seperti ParentPagedan di sana Anda dapat menambahkan appBar sekali dan di semua tempat Anda dapat menggunakan ini sebagai penggantiScaffold
Sisir
37

Anda juga dapat mengganti panah kembali default dengan widget pilihan Anda, melalui 'leading':

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

semua widget AppBar menyediakan widget 'terkemuka' default jika tidak disetel.

blaneyneil
sumber
1
Tidak sepenuhnya benar karena AppBarakan juga menampilkan tombol kembali saat a ModalRouteditekan.
creativecreatorormaybenot
3
Dan atur automaticallyImplyLeading: falsedi AppBar.
Loolooii
1
Suara positif untuk Navigator.of(context).pop();terima kasih
bung
1
bagaimana jika saya sudah menghapus semua riwayat navigator! kode ini akan macet!
Shady Mohamed Sherif
kemudian periksa apakah Anda dapat memunculkan, seperti: if (Navigator.canPop (konteks)) {Navigator.pop (konteks); } lain {// lakukan sesuatu}}
blaneyneil
13

Tampaknya lebih mudah untuk hanya membuat tombol baru dan menambahkan warna padanya, inilah cara saya melakukannya untuk siapa pun yang bertanya-tanya

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: BackButton(
            color: Colors.black
        ),
Mfreeman
sumber
1
Bekerja dengan baik. Solusi paling ringkas dari semuanya.
Hashir Baig
5

Anda juga dapat mengatur warna ikon terdepan secara global untuk aplikasi

MaterialApp(
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      iconTheme: IconThemeData(
        color: Colors.green
      )
    )
  )
)
kashlo
sumber
Penting untuk dicatat bahwa ini adalah iconTheme dari AppBarTheme, karena ThemeData sendiri memiliki iconTheme juga.
Scott
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
sumber
1

Anda dapat menyesuaikan AppBarWidget , kata kunci dengan is important, atau Anda dapat menetapkan AppBarWidget kustom Anda ke properti appBar dari Scaffold :

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

Berikut adalah contoh cara menggunakannya:

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
sumber
0 
  appBar: AppBar(
          iconTheme: IconThemeData(
            color: Colors.white, //modify arrow color from here..
          ),
      );
Zeeshan Ansari
sumber
1
Tambahkan beberapa konteks pada jawaban, jawaban hanya kode tidak disarankan.
Arun Vinoth
0

Untuk mengubah warna terdepan untuk 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
sumber
0

Untuk menyesuaikan ikon utama, Anda mungkin ingin meniru fungsionalitas AppBarwidget, yang dengan benar menangani tampilan tombol kembali, ikon laci, atau ikon tutup, tergantung pada konteks saat ini. Berikut adalah contoh yang menggantikan ikon default.

import 'package:flutter/material.dart';

class TopBar extends StatelessWidget with PreferredSizeWidget {
  static const double _topBarHeight = 60;

  @override
  Widget build(BuildContext context) {
    return AppBar(
      toolbarHeight: _topBarHeight,
      title: Text('Title'),
      automaticallyImplyLeading: false,
      leading: _buildLeadingWidget(context),
    );
  }

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

  Widget _buildLeadingWidget(BuildContext context) {
    final ScaffoldState scaffold = Scaffold.of(context);
    final ModalRoute<dynamic> parentRoute = ModalRoute.of(context);

    final bool canPop = ModalRoute.of(context)?.canPop ?? false;
    final bool hasDrawer = scaffold?.hasDrawer ?? false;
    final bool useCloseButton = parentRoute is PageRoute<dynamic> && parentRoute.fullscreenDialog;

    Widget leading;
    if (hasDrawer) {
      leading = IconButton(
        icon: const Icon(Icons.menu_rounded),
        onPressed: Scaffold.of(context).openDrawer,
        tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
      );
    } else {
      if (canPop) {
        if (useCloseButton) {
          leading = IconButton(
              color: Theme.of(context).colorScheme.onBackground,
              icon: Icon(Icons.close_rounded),
              onPressed: () => Navigator.of(context).maybePop());
        } else {
          leading = IconButton(
              padding: EdgeInsets.all(0),
              iconSize: 38,
              icon: Icon(Icons.chevron_left_rounded),
              onPressed: Navigator.of(context).pop);
        }
      }
    }

    return leading;
  }
}

Kelas ini menggunakan PreferredSizeWidgetsebagai mixin, sehingga Anda dapat menggunakannya sebagai pengganti AppBarwidget yang ada di file Scaffold. Perhatikan _buildLeadingWidgetmetodenya, yang hanya menampilkan tombol kembali jika perlu, dan menunjukkan tombol menu jika ada laci, atau tombol tutup jika dialog layar penuh ditampilkan.

Tom Bowers
sumber