फ्लटर में स्टेटस बार का रंग कैसे बदलें?

Question 1

मैं स्टेटस बार के रंग को सफेद में बदलने की कोशिश कर रहा हूं। मैंने इस पब को फड़फड़ाते हुए पाया । मैंने अपने डार्ट फ़ाइलों पर उदाहरण कोड का उपयोग करने की कोशिश की।

Question 2

मेरे ऐप में पूरी तरह से ठीक काम करता है

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return MaterialApp(
      title: app_title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(title: home_title),
    );
  }
}

( यह पैकेज )

UPD: एक और उपाय

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));

Question 3

अद्यतन करने की अनुशंषा की जाती है):

नवीनतम स्पंदन संस्करण पर, आपको उपयोग करना चाहिए:

AppBar(
  backwardsCompatibility: false,
  systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.orange),
)

केवल Android (अधिक लचीलापन):

import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.blue, // navigation bar color
    statusBarColor: Colors.pink, // status bar color
  ));
}

IOS और Android दोनों:

appBar: AppBar(
  backgroundColor: Colors.red, // status bar color
  brightness: Brightness.light, // status bar brightness
)

Question 4

इसके बजाय अक्सर सुझाए गए SystemChrome.setSystemUIOverlayStyle()जो एक सिस्टम वाइड सेवा है और एक अलग मार्ग पर रीसेट नहीं होता है, आप AnnotatedRegion<SystemUiOverlayStyle>एक विजेट का उपयोग कर सकते हैं और केवल उस विजेट के लिए प्रभाव डाल सकते हैं जिसे आप लपेटते हैं।

AnnotatedRegion<SystemUiOverlayStyle>(
   value: SystemUiOverlayStyle(
      statusBarColor: Colors.white,
  ),
  child: Scaffold(
      ...
  ),
)

Question 5

उपयोग करने वालों के लिए `AppBar`

यदि आप उपयोग करते हैं AppBarतो स्टेटस बार का कलर अपडेट करना उतना ही सरल है:

Scaffold(
  appBar: AppBar(
    // Use [Brightness.light] for black status bar 
    // or [Brightness.dark] for white status bar
    brightness: Brightness.light 
  ),
  body: ...
)

सभी ऐप बार के लिए आवेदन करने के लिए:

return MaterialApp(
  theme: Theme.of(context).copyWith(
    appBarTheme: Theme.of(context)
        .appBarTheme
        .copyWith(brightness: Brightness.light),
  ...
  ),

उन लोगों के लिए जो उपयोग नहीं करते हैं `AppBar`

के साथ अपनी सामग्री लपेटें AnnotatedRegionऔर सेट valueकरने के लिए SystemUiOverlayStyle.lightया SystemUiOverlayStyle.dark:

return AnnotatedRegion<SystemUiOverlayStyle>(
  // Use [SystemUiOverlayStyle.light] for white status bar 
  // or [SystemUiOverlayStyle.dark] for black status bar
  value: SystemUiOverlayStyle.light,
  child: Scaffold(...),
);

Question 6

जब आप उपयोग नहीं कर रहे हैं तो स्थिति बार रंग बदलें AppBar

पहले इसे आयात करें

import 'package:flutter/services.dart';

जब आप उपयोग नहीं कर रहे हैं तो अपने आवेदन में स्टेटस बार का रंग बदलने के लिए अब नीचे दिए गए कोड का उपयोग करें AppBar

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(

    statusBarColor: AppColors.statusBarColor,/* set Status bar color in Android devices. */
    
    statusBarIconBrightness: Brightness.dark,/* set Status bar icons color in Android devices.*/
    
    statusBarBrightness: Brightness.dark)/* set Status bar icon color in iOS. */
);

iOSजब आप उपयोग कर रहे हों तो स्थिति पट्टी का रंग बदलने के लिएSafeArea

Scaffold(
  body: Container(
    color: Colors.red, /* Set your status bar color here */
    child: SafeArea(child: Container(
      /* Add your Widget here */
    )),
  ),
);

Question 7

मैं सीधे थ्रेड में टिप्पणी नहीं कर सकता क्योंकि मेरे पास अभी तक अपेक्षित प्रतिष्ठा नहीं है, लेकिन लेखक ने निम्नलिखित पूछा:

एकमात्र मुद्दा यह है कि पृष्ठभूमि सफेद है, लेकिन घड़ी, वायरलेस और अन्य पाठ और आइकन भी सफेद रंग में हैं .. मुझे यकीन नहीं है कि क्यों !!

किसी और के लिए जो इस धागे के लिए आता है, यहाँ मेरे लिए क्या काम किया है। स्टेटस बार का टेक्स्ट रंग ब्राइटनेस कंटीन्यू इन कॉन्स्टेंस द्वारा तय किया जाता है flutter/material.dart। इसे बदलने के SystemChromeलिए, टेक्स्ट को कॉन्फ़िगर करने के लिए समाधान को इस तरह समायोजित करें:

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.red,
      statusBarBrightness: Brightness.dark,
    ));

के लिए आपका संभावित मान Brightnessहैं Brightness.darkऔर Brightness.light।

प्रलेखन: https://api.flutter.dev/flutter/dart-ui/Brightness-class.html https://api.flutter.dev/flutter/services/SystemUiOverlayStyle-class.html

Question 8

यह मेरे लिए काम किया:

आयात सेवा

import 'package:flutter/services.dart';

फिर जोड़िए:

@override
  Widget build(BuildContext context) {

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.white,
      statusBarBrightness: Brightness.dark,
    ));
    return MaterialApp(home: Scaffold(

Question 9

मुझे लगता है कि यह आपकी मदद करेगा:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.white, // navigation bar color
        statusBarColor: Colors.white, // status bar color
        statusBarIconBrightness: Brightness.dark, // status bar icons' color
        systemNavigationBarIconBrightness: Brightness.dark, //navigation bar icons' color
    ));

Question 10

यह वह सब कुछ है जो आपको जानना चाहिए:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.amber, // navigation bar color
    statusBarColor: Colors.white, // status bar color
    statusBarIconBrightness: Brightness.dark, // status bar icon color
    systemNavigationBarIconBrightness: Brightness.dark, // color of navigation controls
  ));
  runApp(MyApp());
}

Question 11

इसे 2 चरणों में प्राप्त किया जा सकता है:

FlutterStatusbarcolor पैकेज का उपयोग करके अपने पृष्ठ पृष्ठभूमि से मिलान करने के लिए स्थिति बार रंग सेट करें
AppBar.brightnessप्रॉपर्टी का उपयोग करके स्टेटस बार बटन '(बैटरी, वाईफाई आदि) रंगों को सेट करें

यदि आपके पास AppBar:

  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        // Other AppBar properties
      ),
      body: Container()
    );
  }

यदि आप पृष्ठ में ऐप बार नहीं दिखाना चाहते हैं:

  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        elevation: 0.0,
        toolbarHeight: 0.0, // Hide the AppBar
      ),
      body: Container()
  }

Question 12

पालन की तरह main.dart फ़ाइल आयात सेवा पर

  import 'package:flutter/services.dart';

और अंदर की निर्माण विधि वापसी से पहले बस इस लाइन को जोड़ें

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.orange
));

ऐशे ही:

@override
 Widget build(BuildContext context) {
   SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
       statusBarColor: CustomColors.appbarcolor
    ));
    return MaterialApp(
    home: MySplash(),
    theme: ThemeData(
      brightness: Brightness.light,
      primaryColor: CustomColors.appbarcolor,
    ),
  );
 }

Question 13

यह भी काम करेगा

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

Question 14

 return Scaffold(
      backgroundColor: STATUS_BAR_COLOR_HERE,
      body: SafeArea(
        child: scaffoldBody(),
      ),
);

Question 15

यह अब तक का सबसे अच्छा तरीका है, इसके लिए किसी अतिरिक्त प्लगइन्स की आवश्यकता नहीं है।

Widget emptyAppBar(){
  return PreferredSize(
      preferredSize: Size.fromHeight(0.0), 
      child: AppBar(
        backgroundColor: Color(0xFFf7f7f7),
        brightness: Brightness.light,
      )
  );
}

और इसे इस तरह अपने पाड़ में बुलाओ

return Scaffold(
      appBar: emptyAppBar(),
     .
     .
     .

Question 16

इसे अपने ऐप बार रंग की तरह बनाने के लिए

import 'package:flutter/material.dart';

 Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent,
  ));
 }

Question 17

IOS और Android दोनों के लिए काम करता है

import 'package:flutter/services.dart';

@override
Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

  return Scaffold();
}

Question 18

@override
Widget build(BuildContext context) {
  return Theme(
    data: ThemeData(brightness: Brightness.dark),
    child: Scaffold()
    ....
  )
}

Question 19

मेरे पास सभी उल्लिखित उत्तरों के साथ समस्याएं थीं, समाधान के साथ मैंने खुद किया था: Container(width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).padding.top, color: Colors.green) विचारों के लिए, जहां कोई ऐप नहीं है जोड़ा गया है मैं सिर्फ पृष्ठभूमि के साथ कंटेनर का उपयोग करता हूं जो सटीक ऊंचाई स्थिति बार की ऊंचाई से मेल खाती है। इस परिदृश्य में प्रत्येक दृश्य में अलग-अलग स्थिति रंग हो सकते हैं और मुझे कुछ तर्क के बारे में चिंता करने और सोचने की आवश्यकता नहीं है, कि किसी भी तरह से गलत विचारों में किसी तरह के गलत रंग हैं।

Question 20

मौजूदा समाधानों में से किसी ने भी मेरी मदद नहीं की, क्योंकि मैं उपयोग AppBarनहीं करता हूं और जब भी उपयोगकर्ता एप्लिकेशन थीम को स्विच करता है मैं बयान नहीं करना चाहता हूं। मुझे प्रकाश और अंधेरे मोड के बीच स्विच करने के लिए एक प्रतिक्रियाशील तरीके की आवश्यकता थी और पाया कि स्थिति बार के रंग को स्थापित करने के लिए AppBarबुलाया विजेट का उपयोग करता है Semantics।

मूलतः, यह है कि मैं यह कैसे करते हैं:

return Semantics(
  container: false,  // don't make it a new node in the hierarchy
  child: AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.light,  // or .dark
    child: MyApp(),  // your widget goes here
  ),
);

Semanticsसे आयात किया जाता है package:flutter/material.dart।
SystemUiOverlayStyleसे आयात किया जाता है package:flutter/services.dart।

Question 21

मैंने इसे निम्न की तरह पूरे पृष्ठभूमि का रंग बदलकर हल किया:

मुख्य स्क्रीन में:

वापसी पाड़ (

  backgroundColor: Colors.black,

  body: SafeArea(
  
 ),

);

Question 22

अधिकांश उत्तर उपयोग कर रहे हैं SystemChromeजो केवल एंड्रॉइड के लिए काम करता है। मेरा समाधान दोनों को AnnotatedRegionऔर SafeAreaनए विजेट में संयोजित करना है, इसलिए यह iOS में भी काम करता है। और मैं इसके साथ या बिना उपयोग कर सकता हूं AppBar।

class ColoredStatusBar extends StatelessWidget {
  const ColoredStatusBar({Key key, this.color, this.child}) : super(key: key);

  final Color color;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: color ?? Colors.blue,
      ),
      child: Container(
        color: color ?? Colors.blue,
        child: SafeArea(
          bottom: false,
          child: Container(
            child: child,
          ),
        ),
      ),
    );
  }
}

उपयोग: इसे पृष्ठ के विजेट के ऊपर रखें।

@override
Widget build(BuildContext context) {
  return ColoredStatusBar(
    child: /* your child here */,
  );
}

Question 23

आप क्या चाहते हैं थीम्स। वे AppBar रंग की तुलना में बहुत अधिक के लिए महत्वपूर्ण हैं।

https://flutter.io/cookbook/design/themes/

फ्लटर में स्टेटस बार का रंग कैसे बदलें?

अद्यतन करने की अनुशंषा की जाती है):

उपयोग करने वालों के लिए AppBar

उन लोगों के लिए जो उपयोग नहीं करते हैं AppBar

उपयोग करने वालों के लिए `AppBar`

उन लोगों के लिए जो उपयोग नहीं करते हैं `AppBar`