Flattereckenradius mit transparentem Hintergrund

87

Unten ist mein Code, mit dem ich einen Container mit runden Ecken und transparentem Hintergrund rendern möchte. 

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

              ),

Dies ist jedoch das, was es rendert, es macht einen weißen Behälter (erwartet transparent) mit einem runden Eckenradius. Irgendeine Hilfe?

Bildschirmfoto

dart  flutter 
— Kemzie
quelle

Antworten:

112

Wenn Sie Ihre Containermit abgerundeten Ecken in ein Elternteil mit der Hintergrundfarbe einwickeln Colors.transparent, macht das meiner Meinung nach genau das, wonach Sie suchen. Wenn Sie eine verwenden, ist Scaffolddie Standardhintergrundfarbe Weiß. Ändern Sie das in, Colors.transparentwenn das erreicht, was Sie wollen.

        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"),
           )
         ),
        ),
— Albert Lardizabal
quelle
1
Wenn ich ein Bild in SliverAppBar verwende , wie geht das?
— Md.Abdul Halim Rafi
1
Sie können SliverFillRemaining (Kind: über Code) verwenden
— JenonD
42

Wenn Sie Ecken mit transparentem Hintergrund abrunden möchten, verwenden Sie am besten 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"),
    ),
  ),
);
— Dat Nguyen
quelle
Das funktioniert .. aber am Ende meines Containers ist der Radius os im Quadrat: imgur.com/a/Qb5kaVW . ihr könnt mir helfen?
— Augusto
Funktioniert auch mit ColorFiltered. Die BoxDecorationnicht Ecken schneiden , wenn Sie ColorFiltermit BlendMode.color.
— Milan Jaros
Bei Verwendung mit showModalBottomSheet müssen Sie das bottomSheetTheme wie von @jayjw vorgeschlagen angeben
— Jørgen Andersen
27

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

Die kürzlich eingeführte Verwendung eines Themas zur Steuerung des Blattstils sollte für dieses Problem am besten geeignet sein.

Wenn Sie verschiedene untere Blätter unterschiedlich gestalten möchten, fügen Sie ein neues Themenobjekt in den entsprechenden Teilbaum ein, um das untere Blatt-Thema nur für diesen Bereich zu überschreiben.

Wenn Sie das Thema beim Starten eines unteren Blattes aus irgendeinem Grund immer noch manuell überschreiben möchten, haben showBottomSheet und showModalBottomSheet jetzt einen backgroundColor- Parameter. Verwenden Sie es so:

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

Die Verwendung des Themas ermöglicht die Wiederverwendung von unteren Blättern unabhängig vom aktuellen Thema der App / App und hat keine der negativen Nebenwirkungen beim Festlegen der Leinwandfarbe, wie erwähnt.

— jayjw
quelle
Dies sollte die akzeptierte Antwort sein ... funktioniert perfekt!
— John Detlefs
backgroundColor: Colors.transparent,arbeitete für mich
— Tudorprodan
15 
/// 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 den Ecken anzuzeigen:

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

Das 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 Behälter. Das ist die Leinwandfarbe der App.

ZU BEHEBEN: Ä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(),
);
— Jorge Menjivar
quelle
Es hat einige Nachteile. Andere Objekte, die von der Leinwandfarbe abhängen, wie das Aktualisierungssymbol, haben anstelle von Weiß ebenfalls einen transparenten Hintergrund.
— Jorge Menjivar
3
Ich würde dies nicht empfehlen. Viele Widgets hängen von der Leinwandfarbe ab, und diese müssen dann alle einzeln festgelegt werden.
— Mauriii
beste Antwort, dies sollte die beste Antwort sein.
— Alvin Quezon
wenn diese, alle canvasColorvon flattern widgets wird sich ändern zu color.transparent, versuchen Sie es zu offenen Schublade, was u sehen!
— Nourein
Schließlich! Mein Problem wurde gelöst.
— Mbartn
8 
Scaffold(
  appBar: AppBar(
    title: Text('BMI CALCULATOR'),
  ),
  body: Container(
    height: 200,
    width: 170,
    margin: EdgeInsets.all(15),
    decoration: BoxDecoration(
      color: Color(
        0xFF1D1E33,
      ),
      borderRadius: BorderRadius.circular(5),
    ),
  ),
);
— Rhys Coombes
quelle
3

Verwenden Sie eine transparente Hintergrundfarbe für das Modalbottomsheet und geben Sie eine separate Farbe für die Boxdekoration an 

   showModalBottomSheet(
      backgroundColor: Colors.transparent,
      context: context, builder: (context) {
    return Container(

      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft:Radius.circular(40) ,
            topRight: Radius.circular(40)
        ),
      ),
      padding: EdgeInsets.symmetric(vertical: 20,horizontal: 60),
      child: Settings_Form(),
    );
  });
— Aditya A. Rajan
quelle
0 
class MyApp2 extends StatelessWidget {

  @override
  Widget build(BuildContext context) { 
    return MaterialApp( 
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          elevation: 0,
          color: Colors.blueAccent,
        )
      ),
      title: 'Welcome to flutter ',
      home: HomePage()
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  int number = 0;
  void _increment(){
   setState(() {
      number ++;
   });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.blueAccent,
        appBar: AppBar(
          title: Text('MyApp2'), 
          leading: Icon(Icons.menu),
          // backgroundColor: Colors.blueAccent,

          ),
        body: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(200.0),
              topRight: Radius.circular(200)
            ), 
            color: Colors.white,
          ),
        )
      );
  }
}
— Igbani Izuchukwu
quelle
0 
showModalBottomSheet(
   context: context,
   builder: (context) => Container(
            color: Color(0xff757575), //background color 
            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"),
              )

     

 ),

)

Dadurch wird die Farbe Ihres Behälters mit der Hintergrundfarbe identisch. Und es wird einen Kindercontainer mit der gleichen Höhe und Breite und blauer Farbe geben. Dadurch hat die Ecke die gleiche Farbe wie die Hintergrundfarbe.

— Mohit Chachra
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.