Есть ли способ добавить два разных цвета Iphone х SafeArea на флаттер - PullRequest
Новая
       36

Есть ли способ добавить два разных цвета Iphone х SafeArea на флаттер

3 голосов
/ 07 января 2020

Я хотел бы знать, есть ли способ добавить два разных цвета в iPhone X SafeArea?

На React Native это можно исправить, добавив два SafeAreaView. Кто-нибудь знает, как исправить это на флаттер?

Спасибо 

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: SafeArea(
        left: true,
        top: true,
        right: true,
        bottom: true,
        child: Scaffold(
          resizeToAvoidBottomInset: false,
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.display1,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ), 
        ),
      ),
    );
  }

1 Ответ

2 голосов
/ 08 января 2020

Вы можете сделать одну простую вещь => Отметить свойство top от SafeArea до false , чтобы верхняя область телефона приняла цвет фона AppBar, а нижняя SafeArea - цвет родителя container. В идеале, я хотел бы предложить, если вы ограничиваете свой scaffold внутри SafeArea, тогда его верхний SafeArea цвет должен совпадать с AppBar фоновым цветом, а нижний цвет SafeArea соответствует вашему требованию (цвет родительского контейнера).

Я изменил ваш код двумя разными цветами: 

Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: SafeArea(
        left: true,
        top: false,
        right: true,
        bottom: true,
        child: Scaffold(
          resizeToAvoidBottomInset: false,
          appBar: AppBar(
            backgroundColor: Colors.orange,
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.display1,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ), 
        ),
      ),
    );
  }
...