web-dev-qa-db-fra.com

rayon de coin flottant avec fond transparent

Vous trouverez ci-dessous le code dans lequel je compte rendre un conteneur à coins arrondis avec un arrière-plan transparent. 

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

              ),

Quoi qu’il en soit, un conteneur blanc (transparent attendu) de rayon arrondi est rendu. De l'aide? 

screenshot

dartflutter
9
Kemzie

Si vous enveloppez votre Container avec des coins arrondis à l'intérieur d'un parent avec la couleur d'arrière-plan définie sur Colors.transparent, je pense que cela fait ce que vous recherchez. Si vous utilisez un Scaffold, la couleur d'arrière-plan par défaut est le blanc. Changez cela en Colors.transparent si cela donne ce que vous voulez.

        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
Albert Lardizabal

C'est une vieille question. Mais pour ceux qui rencontrent cette question ...

Le fond blanc derrière les coins arrondis n'est pas réellement le conteneur. C'est la couleur de la toile de l'application.

TO FIX: modifiez la couleur de la toile de votre application en Colors.transparent

Exemple:

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!"),)
      ),
    );
  }

Appelez cette option pour afficher la feuille BotoomSheet avec des angles:

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

Si vous souhaitez arrondir les angles avec un arrière-plan transparent, la meilleure approche consiste à utiliser 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"),
    ),
  ),
);
1
Dat Nguyen