радиус угла флаттера с прозрачным фоном

Question

Ниже приведен мой код, который я ожидаю визуализировать контейнером с круглым углом с прозрачным фоном.

return new Container(
                //padding: const EdgeInsets.all(32.0),
                height: 800.0,
                //color: const Color(0xffDC1C17),
                //color: const Color(0xffFFAB91),
                decoration: new BoxDecoration(
                  color: Colors.green, //new Color.fromRGBO(255, 0, 0, 0.0),
                  borderRadius: new BorderRadius.only(
                    topLeft:  const  Radius.circular(40.0),
                    topRight: const  Radius.circular(40.0))
                ),
                child:  new Container(
                    decoration: new BoxDecoration(
                        color: Colors.blue,
                        borderRadius: new BorderRadius.only(
                            topLeft:  const  Radius.circular(40.0),
                            topRight: const  Radius.circular(40.0))
                    ),
                  child: new Center(
                    child: new Text("Hi modal sheet"),
                  )

              ),

Однако это то, что он отображает, он отображает белый контейнер (ожидаемый прозрачный) с радиусом круглого угла. Любая помощь?

Answer 1

По состоянию на 1 мая 2019 года используйте BottomSheetTheme .

MaterialApp(
    theme: ThemeData(
      // Draw all modals with a white background and top rounded corners
      bottomSheetTheme: BottomSheetThemeData(
        backgroundColor: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(10))
        )
      )
    ),

Представленный в последнее время, использование темы для управления стилем листов должно быть наилучшим решением этой проблемы.

Если вы хотите по-разному разделить тему на нижние листы, добавьте новый объект Theme в соответствующее поддерево, чтобы переопределить тему нижнего листа только для этой области.

Если по какой-то причине вы все равно хотите переопределить тему вручную при запуске нижнего листа, showBottomSheet и showModalBottomSheet теперь имеют параметр backgroundColor . Используйте это так:

 showModalBottomSheet(
    backgroundColor: Colors.transparent,
    context: context,
    builder: (c) {return NavSheet();},
  );

Использование темы позволяет повторно использовать нижние листы независимо от текущей темы приложения / приложения и не имеет никаких отрицательных побочных эффектов установки цвета холста, как упомянуто.

Answer 2

Если вы хотите скруглить углы с прозрачным фоном, лучше всего использовать ClipRRect.

return ClipRRect(
  borderRadius: BorderRadius.circular(40.0),
  child: Container(
    height: 800.0,
    width: double.infinity,
    color: Colors.blue,
    child: Center(
      child: new Text("Hi modal sheet"),
    ),
  ),
);

Answer 3

/// Create the bottom sheet UI
  Widget bottomSheetBuilder(){
    return Container(
      color: Color(0xFF737373), // This line set the transparent background
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(16.0),
                topRight: Radius.circular( 16.0)
            )
        ),
        child: Center( child: Text("Hi everyone!"),)
      ),
    );
  }

Позвоните, чтобы показать BotoomSheet с углами:

/// Show the bottomSheet when called
  Future _onMenuPressed() async {
    showModalBottomSheet(
        context: context,
        builder: (widgetBuilder) => bottomSheetBuilder()
    );
  }

Answer 4

Это старый вопрос. Но для тех, кто сталкивался с этим вопросом ...

Белый фон за закругленными углами на самом деле не контейнер. Это цвет холста приложения.

К ИСПРАВЛЕНИЮ: Измените цвет холста вашего приложения на Colors.transparent

Пример:

return new MaterialApp(
  title: 'My App',
  theme: new ThemeData(
    primarySwatch: Colors.green,
    canvasColor: Colors.transparent, //----Change to this------------
    accentColor: Colors.blue,
  ),
  home: new HomeScreen(),
);

Answer 5

Если вы оберните Container закругленными углами внутри родительского элемента с цветом фона, установленным на Colors.transparent, я думаю, что это то, что вы ищете.Если вы используете Scaffold, цвет фона по умолчанию - белый.Измените это на Colors.transparent, если это достигнет того, что вы хотите.

        new Container(
          height: 300.0,
          color: Colors.transparent,
          child: new Container(
              decoration: new BoxDecoration(
                  color: Colors.green,
                  borderRadius: new BorderRadius.only(
                      topLeft: const Radius.circular(40.0),
                      topRight: const Radius.circular(40.0))),
              child: new Center(
                child: new Text("Hi modal sheet"),
              )),
        ),