Радиус угла нижнего листа флаттера - PullRequest
Новая
       52

Радиус угла нижнего листа флаттера

0 голосов
/ 15 сентября 2018

Я пишу приложение, которое должно иметь нижнюю таблицу с радиусом угла.Нечто подобное вы можете увидеть в приложении Google Task.

Вот код, который у меня есть 

showModalBottomSheet(
        context: context,
        builder: (builder) {
          return new Container(
            height: 350.0,
            color: Colors.transparent,
            child: new Container(
                decoration: new BoxDecoration(
                    color: Colors.white,
                    borderRadius: new BorderRadius.only(
                        topLeft: const Radius.circular(10.0), topRight: const Radius.circular(10.0))),
                child: new Center(
                  child: new Text("This is a modal sheet"),
                )),
          );
        });

По-прежнему показывает лист без радиуса границы.enter image description here

Хорошо, я нашел причину.Это действительно показывает закругленный угол, но фон Контейнера остается белым из-за цвета фона Эшафот.Теперь вопрос в том, как мне переопределить цвет фона Scaffold.

Ответы [ 3 ]

0 голосов
/ 07 марта 2019 
  _settingModalBottomSheet(context) {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext bc){
        return Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(ScreenUtil().setWidth(16)),
              topRight: Radius.circular(ScreenUtil().setWidth(16))
            ),
          ),
        );
      }
    );
  }

Это выглядит так: result_1

После добавления ниже код в main.dart: 

return MaterialApp(
  theme: ThemeData(
    canvasColor: Colors.transparent
  ),
);

Это выглядит так: result_2

0 голосов
/ 12 мая 2019

Для тех, кто все еще пытается решить эту проблему:

по некоторым причинам Colors.transparent не работает, поэтому все, что вам нужно сделать, это изменить цвет на: Color(0xFF737373)

showModalBottomSheet( context: context, builder: (builder) { return new Container( height: 350.0, color: Color(0xFF737373), child: new Container( decoration: new BoxDecoration( color: Colors.white, borderRadius: new BorderRadius.only( topLeft: const Radius.circular(10.0), topRight: const Radius.circular(10.0))), child: new Center( child: new Text("This is a modal sheet"), )), ); });

0 голосов
/ 16 сентября 2018

Хорошо, поэтому изменение canvasColor в основной теме моего приложения на Colors.transparent сработало.

...