web-dev-qa-db-ja.com

Flutterでステータスとナビゲーションバーの色を変更する方法

システムステータスバーの色を黒に変更しようとしています。構成はAppBarクラスによってオーバーライドされるようです。マテリアルアプリを作成するときにThemeData.dark()にテーマを割り当ててから、appBar attribute。ただし、AppBarは必要ありません。また、この方法ですべてのフォントの色を変更できます。

可能な解決策は、ThemeData.bright（）を新しいクラスに継承し、システムステータスバーのみを変更するものを追加することです。

setSystemUIOverlayStyle

そして、AppBarを指定して、どういうわけか非表示にする必要がありますか？

https://docs.flutter.io/flutter/services/SystemChrome/setSystemUIOverlayStyle.html

main.Dart

import 'package:flutter/material.Dart';
import 'package:flutter/services.Dart';
import 'package:english_words/english_words.Dart';
import 'layout_widgets.Dart' as layout_widgets;

class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}
class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _saved = new Set<WordPair>();
  final _biggerFont = const TextStyle(fontSize: 18.0);

  void _pushSaved() {
     Navigator.of(context).Push(
       new MaterialPageRoute(
           builder: (context) {
             final tiles = _saved.map((pair) {
               return new ListTile(
                 title: new Text(pair.asPascalCase,style:_biggerFont)
               );
              }
             );
             final divided = ListTile.divideTiles(
               context:context,
                 tiles: tiles,).toList();
             return new Scaffold(
               appBar: new AppBar(
                 title: new Text('Saved Suggestions'),
               ),
               body: new ListView(children:divided),
             );
           }
       )
     );
  }

  Widget _buildSuggestions() {
    return new ListView.builder(
      padding: const EdgeInsets.all(16.0),
      // The itemBuilder callback is called once per suggested Word pairing,
      // and places each suggestion into a ListTile row.
      // For even rows, the function adds a ListTile row for the Word pairing.
      // For odd rows, the function adds a Divider widget to visually
      // separate the entries. Note that the divider may be difficult
      // to see on smaller devices.
      itemBuilder: (context, i) {
        // Add a one-pixel-high divider widget before each row in theListView.
        if (i.isOdd) return new Divider();
        // The syntax "i ~/ 2" divides i by 2 and returns an integer result.
        // For example: 1, 2, 3, 4, 5 becomes 0, 1, 1, 2, 2.
        // This calculates the actual number of Word pairings in the ListView,
        // minus the divider widgets.
        final index = i ~/ 2;
        // If you've reached the end of the available Word pairings...
        if (index >= _suggestions.length) {
          // ...then generate 10 more and add them to the suggestions list.
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);
      }
    );
  }

  Widget _buildRow(WordPair pair) {
    final alreadySaved = _saved.contains(pair);
    return new ListTile(
      title: new Text(
          pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: new Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
      ),
      onTap: () {
        setState(() {
          if (alreadySaved) {
            _saved.remove(pair);
          } else {
            _saved.add(pair);
          }
        });
      },
    );
  }


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
        actions: <Widget>[
          new IconButton(icon:new Icon(Icons.list), onPressed: _pushSaved),
        ],
      ),
      body: _buildSuggestions(),
    );
  }

}


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Column buildButtonColumn(IconData icon, String label) {
      Color color = Theme.of(context).primaryColor;
      return new Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Icon(icon, color: color),
          new Container(
            margin: const EdgeInsets.only(top:8.0),
            child: new Text(
              label,
              style: new TextStyle(
                fontSize: 12.0,
                fontWeight: FontWeight.w400,
                color: color,
              )
            ),
          )
        ],

      );
    }
    Widget titleSection = layout_widgets.titleSection;
    Widget buttonSection = new Container(
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          buildButtonColumn(Icons.contact_mail, "CONTACT"),
          buildButtonColumn(Icons.folder_special, "PORTFOLIO"),
          buildButtonColumn(Icons.picture_as_pdf, "BROCHURE"),
          buildButtonColumn(Icons.share, "SHARE"),
        ],
      )
    );
    Widget textSection = new Container(
      padding: const EdgeInsets.all(32.0),
      child: new Text(
        '''
The most awesome apps done here.
        ''',
        softWrap: true,
      ),
    );
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    return new MaterialApp(
      title: 'Startup Name Generator',
//      theme: new ThemeData(
//          brightness: Brightness.dark,
//          primarySwatch: Colors.blue,
//      ),
//      theme: new ThemeData(),
      debugShowCheckedModeBanner: false,

      home: new Scaffold(
//        appBar: new AppBar(
////          title: new Text('Top Lakes'),
////          brightness: Brightness.light,
//        ),
//        backgroundColor: Colors.white,
        body: new ListView(
          children: [
            new Padding(
              padding: new EdgeInsets.fromLTRB(0.0, 40.0, 0.0, 0.0),
              child: new Image.asset(
                  'images/lacoder-logo.png',
                  width: 600.0,
                  height: 240.0,
                  fit: BoxFit.fitHeight,

              ),
            ),

            titleSection,
            buttonSection,
            textSection,
          ],
        ),
      ),
    );
  }
}

layout_widgets.Dart

import 'package:flutter/material.Dart';

Widget titleSection = new Container(
    padding: const EdgeInsets.all(32.0),
    child: new Row(children: [
      new Expanded(
          child: new Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          new Container(
              padding: const EdgeInsets.only(bottom: 8.0),
              child: new Text(
                "Some-Website.com",
                style: new TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              )
          ),
          new Text(
            'Small details',
            style: new TextStyle(
              color: Colors.grey[500],
            )
          )
        ],
      )),
      new Icon(Icons.star,color: Colors.orange[700]),
      new Text('100'),
    ]));
flutterflutter-layout
14
8oh8

SystemChromeクラスを使用して、ステータスバーとナビゲーションバーの色を変更できます。最初のインポート

_import 'package:flutter/services.Dart';
_

この後、次の行を追加する必要があります（これらの行を置くより良い場所はmain()メソッドにあります）

_void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.blue,
    statusBarColor: Colors.pink,
  ));
}
_
6
CopsOnRoad

AppBarがまったく必要ない場合は、main関数でsetSystemUIOverlayStyleを呼び出すだけです。

void main() async {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

  runApp(new MaterialApp(
    home: new Scaffold(),
  ));
}

あるスキャフォールドにアプリバーがあり、別のスキャフォールドにアプリバーがない場合は、さらに注意が必要です。その場合、appbarを持たないscaffoldで新しいルートをプッシュした後、setSystemUIOverlayStyleを呼び出す必要がありました。

@override
Widget build(BuildContext context) {
  final page = ModalRoute.of(context);
  page.didPush().then((x) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
  });

  return new Scaffold();
}
3
szotp

私はStackOverflowを初めて使用しますが、Flutterを使用したことはありませんが、 this パッケージを使用すると比較的簡単になります。

方法1：パッケージを使用する

これをインポートしたら、次のコードフラグメントを追加するだけです。

_try {
await FlutterStatusbarcolor.setStatusBarColor(Colors.black);
} on PlatformException catch (e) {
print(e);
}
_

setStatusBarColor()のパラメーターを置き換えると、目的の結果が得られるはずです。色の完全なリストは here にあります。

方法2：デフォルト関数を使用する

これがうまくいかない場合/余分なパッケージやライブラリを追加したくない場合は、おそらく this StackOverflowの回答が役立つかもしれません。

上記のメソッドと同様の関数を使用する必要があります：getWindow().setStatusBarColor()またはgetActivity().getWindow().setStatusBarColor()

パラメータを目的の16進コードに置き換える 以前と同じリストから を指定しても解決する場合があります。

それがうまくいく/助けてくれることを願っています！

1
Loz