Flutter’da Status Bar Rengini Değiştirme: Durum Çubuğu

Bu kısa içerikte flutter’da durum çubuğunun rengini nasıl değiştirebileceğinizi göstereceğim.

status bar color

Android 

import 'package:flutter/services.dart'; – main.dart dosyasına ekleyin.

Android’de, durum çubuğunun rengini AppBar’dan ayrı bir renk olarak da ayarlayabilirsiniz.

void main() {
  SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(statusBarColor: Colors.indigo));

  runApp(MyApp());
}

Metin ve Simgelerin Parlaklığı

brightness parametresini kullanarak durum çubuğundaki metinlerin ve simgelerin (saat, wifi, pil vb.) parlaklığını ayaralayabilirsiniz.

brightness: Brightness.dark, // metin ve simgeler açık renk olacak
brightness: Brightness.light, // metin ve simgeler koyu renk olacak

flutter status bar color

Kod

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

void main() {
  SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(statusBarColor: Colors.indigo));

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // Remove the debug banner
        debugShowCheckedModeBanner: false,
        title: 'onursahin.net',
        home: HomePage());
  }
}

class HomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.indigo,
        // ignore: deprecated_member_use
        brightness: Brightness.dark,
        title: Text('onursahin.net'),
      ),
      body: Center(),
    );
  }
}

iOS

iOS’ta durum çubuğunun arka plan rengi, AppBarın arka plan rengiyle aynıdır.

Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.indigo,
        title: Text('onursahin.net'),
      ),
;

Scaffold widgetını SafeArea widgetının içine alırsanız, AppBar ne renk olursa olsun durum çubuğunun rengi siyah olur.

SafeAra( 
Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.indigo,
          title: Text('onursahin.net'),
        ),
      ),
    );
),

Yorum Yap