AppBar back बटन का रंग कैसे बदलें

Question

मैं यह पता नहीं लगा सकता कि ऐपबार के स्वचालित बैक बटन को अलग रंग में कैसे बदलूं। यह एक पाड़ के नीचे है और मैंने इस पर शोध करने की कोशिश की है, लेकिन मैं इसके चारों ओर अपना सिर नहीं लपेट सकता।

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

Answer 1

आपको 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,
),

Comments

क्या कोई मौका है कि हम AppBar का उपयोग करके सभी स्क्रीन में डालने के बजाय एक बार में App Appar में Icon को बदल सकें?

— djalmafreestyler

@djalmafreestyler एक कस्टम विजेट बनाएं जैसे कि ParentPageऔर आप एक बार appBar को जोड़ सकते हैं और सभी जगहों पर आप इसके बजाय इसका उपयोग कर सकते हैंScaffold

— सिसिर

Answer 2

आप अपनी पसंद के विजेट के साथ 'प्रमुख' के माध्यम से डिफ़ॉल्ट बैक एरो को भी ओवरराइड कर सकते हैं:

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

यदि यह सेट नहीं है तो सभी AppBar विजेट एक डिफ़ॉल्ट 'अग्रणी' विजेट प्रदान करता है।

Comments

पूरी तरह से सच नहीं है क्योंकि धक्का AppBarदिए जाने पर बैक बटन भी प्रदर्शित करेगा ModalRoute।

— रचनात्मक

और automaticallyImplyLeading: falseAppBar में सेट करें ।

— लूलूई

उपकार के लिए Navigator.of(context).pop();धन्यवाद दोस्त

— Fadly Permata

क्या होगा अगर मैंने पहले से ही सभी नाविक इतिहास को हटा दिया है! यह कोड क्रैश हो जाएगा!

— शेडी मोहम्मद शेरिफ

फिर जांचें कि क्या आप पॉप कर सकते हैं, जैसे कि: यदि (नेविगेटर.canPop (संदर्भ)) {Navigator.pop (संदर्भ); } और {// कुछ करो}}

— blaneyneil

Answer 3

यह सिर्फ एक नया बटन बनाने और उसमें रंग जोड़ने के लिए आसान लग रहा था, मैं इसे किसी को भी आश्चर्यचकित करने के लिए कैसे करता था

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: BackButton(
            color: Colors.black
        ),

Comments

खूबसूरती से काम किया। सभी का सबसे संक्षिप्त समाधान।

— हाशिर बेग

Answer 4

आप ऐप के लिए विश्व स्तर पर अग्रणी आइकन रंग भी सेट कर सकते हैं

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

Comments

यह ध्यान रखना महत्वपूर्ण है कि यह AppBarTheme का iconTheme है, क्योंकि ThemeData में एक iconTheme भी है।

— स्कॉट

Answer 5

AppBar(        
    automaticallyImplyLeading: false,
    leading: Navigator.canPop(context)
        ? IconButton(
            icon: Icon(
              Icons.arrow_back,
              color: Colors.black,
              size: 47,
            ),
            onPressed: () => Navigator.of(context).pop(),
          )
        : null,
);

Answer 6

आप अनुकूलित कर सकते हैं 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'),
    );
  }
}

Answer 7

  appBar: AppBar(
          iconTheme: IconThemeData(
            color: Colors.white, //modify arrow color from here..
          ),
      );

Comments

उत्तर के लिए कुछ संदर्भ जोड़ें, कोड-केवल उत्तर अनुशंसित नहीं है।

— अरुण विनोथ

Answer 8

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

Answer 9

अग्रणी आइकन को अनुकूलित करने के लिए, आप AppBarविजेट की कार्यक्षमता की नकल करना चाहते हैं , जो वर्तमान संदर्भ के आधार पर एक बैक बटन, दराज आइकन, या करीबी आइकन दिखाते हुए ठीक से संभालता है। यहां एक उदाहरण है जो डिफ़ॉल्ट आइकन को प्रतिस्थापित करता है।

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

यह वर्ग PreferredSizeWidgetएक मिक्सिन के रूप में उपयोग करता है , इसलिए आप इसे मौजूदा AppBarविजेट के लिए प्रतिस्थापन के रूप में उपयोग कर सकते हैं Scaffold। _buildLeadingWidgetविधि पर ध्यान दें , जो केवल आवश्यक होने पर एक बैक बटन दिखाता है, और एक मेनू बटन दिखाता है यदि एक दराज मौजूद है, या एक पूर्ण बटन यदि एक पूर्ण-स्क्रीन संवाद प्रदर्शित होता है।