webentwicklung-frage-antwort-db.com.de

flattern Sie Eckenradius mit transparentem Hintergrund

Unten ist mein Code, von dem ich erwarte, dass er einen runden Container mit transparentem Hintergrund rendert. 

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"),
                  )

              ),

Es wird jedoch so gerendert, dass ein weißer Container (erwartungsgemäß transparent) mit einem runden Eckenradius dargestellt wird. Irgendeine Hilfe? 

screenshot

9
Kemzie

Wenn Sie Ihre Container mit abgerundeten Ecken innerhalb eines übergeordneten Elements einwickeln, wobei die Hintergrundfarbe auf Colors.transparent eingestellt ist, denke ich, dass das macht, was Sie suchen. Wenn Sie eine Scaffold verwenden, ist die Standardhintergrundfarbe weiß. Ändern Sie das in Colors.transparent, wenn Sie das erreichen, was Sie möchten.

        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"),
              )),
        ),
14

Verwenden Sie ab dem 1. Mai 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))
        )
      )
    ),

Introduced In letzter Zeit sollte die Verwendung eines Themas zur Steuerung des Blattstils die beste Lösung für dieses Problem sein.

Wenn Sie verschiedene Unterblätter unterschiedlich gestalten möchten, fügen Sie ein neues Design-Objekt in den entsprechenden Teilbaum ein, um das Unterblatt-Design nur für diesen Bereich zu überschreiben.

Wenn Sie das Thema aus irgendeinem Grund dennoch manuell überschreiben möchten, wenn Sie ein unteres Blatt starten, geben Sie showBottomSheet und showModalBottomSheet an haben jetzt einen backgroundColor Parameter. Benutze es so:

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

Durch die Verwendung des Themas können die unteren Blätter unabhängig vom aktuellen Thema der App/App wiederverwendet werden, und es treten keine negativen Nebenwirkungen auf, wenn die Leinwandfarbe wie erwähnt eingestellt wird.

4
jayjw

Es ist eine alte Frage. Aber für diejenigen, die auf diese Frage stoßen ...

Der weiße Hintergrund hinter den abgerundeten Ecken ist eigentlich nicht der Container. Das ist die Leinwandfarbe der App.

TO FIX: Ändern Sie die Leinwandfarbe Ihrer App in Colors.transparent

Beispiel:

return new MaterialApp(
  title: 'My App',
  theme: new ThemeData(
    primarySwatch: Colors.green,
    canvasColor: Colors.transparent, //----Change to this------------
    accentColor: Colors.blue,
  ),
  home: new HomeScreen(),
);
2
Jorge Menjívar
/// 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!"),)
      ),
    );
  }

Rufen Sie dies auf, um das BotoomSheet mit Ecken anzuzeigen:

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

Wenn Sie Ecken mit transparentem Hintergrund abrunden möchten, verwenden Sie ClipRRect am besten.

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"),
    ),
  ),
);
1
Dat Nguyen