この記事は、Gajeroll Advent Calendar 2022 の8日目の記事です。
今回は、Flutterで開発する際に、ステータスバーに色を指定する方法を紹介します。
はじめに
スマホやタブレット画面上部で、時刻や電池残量などの情報が表示されている部分のことを、ステータスバー(Status Bar)といいます。
モバイルアプリ開発の際に、アプリ内で表示するステータスバーの背景色を指定することができます。
結論
SystemChrome.setSystemUIOverlayStyle()
を使いましょう。
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
statusBarColor: Colors.blue,
),
);
例
上のコードをコピーして、return Scaffold(...);
などの直前に貼り付ければOKです。
@override
よりも下に貼り付けることに注意しましょう。
// class hoge extends hoge {
// @override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
statusBarColor: Colors.blue, // 色を指定
),
);
// return Scaffold(
// ...
// );
// ...
もっと詳しく
より詳しく知りたい方はこちらをご覧ください。
SystemChrome class - services library - Dart API
API docs for the SystemChrome class from the services library, for the Dart programming language.
setSystemUIOverlayStyle method - SystemChrome class - services library - Dart API
API docs for the setSystemUIOverlayStyle method from the SystemChrome class, for the Dart programming language.
最後までご覧いただきありがとうございます。
PCロールでは、テクノロジーに関する情報をまとめて発信しています。
また、おすすめのガジェットについて幅広く紹介していく、ガジェロールもあります。
ガジェットやソフトを使うエンジニア・クリエイターはぜひご覧ください。

PCロール | PCの巻物
パソコンの知恵について幅広く紹介しています。

ガジェロール
ガジェットの巻物
コメント