অ্যাপবারের ব্যাক বোতামের রঙ কীভাবে পরিবর্তন করবেন

Question

অ্যাপবারের স্বয়ংক্রিয় ব্যাক বোতামটি কীভাবে অন্য রঙে পরিবর্তন করা যায় তা আমি বুঝতে পারি না। এটি একটি ভাস্কর্যের নীচে এবং আমি এটি নিয়ে গবেষণা করার চেষ্টা করেছি তবে আমি তার চারপাশে আমার মাথা গুটিয়ে রাখতে পারি না।

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

Answer 1

আপনাকে iconThemeঅ্যাপবার থেকে এই সম্পত্তিটি ব্যবহার করতে হবে :

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

অ্যাপবারটি ব্যবহার করে সমস্ত স্ক্রিন রেখে, আমরা একবারে অ্যাপ অ্যাপবারে আইকনটি প্রতিস্থাপন করতে পারার কি কোনও সুযোগ আছে?

— djalmafreestyler

@ জাজালমাফ্রেস্টিলার একটি পছন্দসই উইজেট তৈরি করুন ParentPageএবং সেখানে আপনি অ্যাপবার একবারে যুক্ত করতে পারেন এবং সমস্ত জায়গায় আপনি এটি ব্যবহার করতে পারেনScaffold

— সিসির

Answer 2

আপনি 'শীর্ষস্থানীয়' এর মাধ্যমে আপনার পছন্দসই উইজেটের সাহায্যে ডিফল্ট পিছনের তীরটিও ওভাররাইড করতে পারেন:

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

সমস্ত অ্যাপবার উইজেট সেট না করে যদি একটি ডিফল্ট 'শীর্ষস্থানীয়' উইজেট সরবরাহ করে।

Comments

পুরোপুরি সত্য নয় কারণ ধাক্কা দেওয়ার AppBarসময় ModalRouteউইলটি পিছনের বোতামটিও প্রদর্শন করে ।

— ক্রিয়েটিভ ক্রিয়েটোরমায়াবেনোট

এবং automaticallyImplyLeading: falseঅ্যাপবারে সেট করুন ।

— Looooii

Navigator.of(context).pop();ধন্যবাদ বউয়ের জন্য উত্সাহিত

— Fadly Permata

যদি আমি ইতিমধ্যে সমস্ত নেভিগেটর ইতিহাস মুছতে পারি! এই কোডটি ক্রাশ হবে!

— ছায়া মোহাম্মদ শেরিফ

তারপরে আপনি পপ করতে পারেন কিনা তা পরীক্ষা করুন: যদি (নাভিগেটর.ক্যানপপ (প্রসঙ্গ)) {নেভিগেটর.পপ (প্রসঙ্গ); } অন্য {// কিছু করুন}}

— ব্লেইনিলেলে

Answer 3

এটি কেবল নতুন একটি বোতাম তৈরি করা এবং এতে রঙ যুক্ত করা সহজ বলে মনে হয়েছিল, কারও অবাক হওয়ার জন্য আমি কীভাবে করেছি

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

Comments

সুন্দর কাজ করেছেন। সবার সবচেয়ে সংক্ষিপ্ত সমাধান।

— হাশির বেগ 21

Answer 4

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 5

আপনি অ্যাপ্লিকেশনটির জন্য বিশ্বব্যাপী শীর্ষস্থানীয় আইকন রঙ সেট করতে পারেন

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

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