Rayon d'angle flottant avec fond transparent

Question

Voici mon code qui devrait rendre un conteneur à coins ronds avec un fond 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"),
                  )

              ),

Cependant, le rendu est le suivant : il s'agit d'un conteneur blanc (normalement transparent) avec un rayon de coin rond. Avez-vous de l'aide ?

Answer 1

Si vous enveloppez votre Container avec des coins arrondis à l'intérieur d'un parent dont la couleur d'arrière-plan est fixée à Colors.transparent Je pense que ça fait ce que vous cherchez. Si vous utilisez un Scaffold la couleur de fond par défaut est le blanc. Changez-la en Colors.transparent si cela permet d'obtenir 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"),
           )
         ),
        ),

Answer 2

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

Answer 3

À partir du 1er mai 2019, utilisez Thème de la feuille de fond .

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

Introduit récemment, l'utilisation d'un thème pour contrôler le style des feuilles devrait être la meilleure solution à ce problème.

Si vous souhaitez donner un thème différent à différentes feuilles de fond, incluez un nouvel objet Theme dans le sous-arbre approprié pour remplacer le thème de la feuille de fond pour cette zone.

Si, pour une raison quelconque, vous souhaitez toujours remplacer le thème manuellement lors du lancement d'une feuille de fond, showBottomSheet y showModalBottomSheet ont maintenant un Couleur de fond paramètre. Utilisez-le comme ceci :

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

L'utilisation du thème permet de réutiliser les feuilles de fond quel que soit le thème actuel de l'application ou de l'application, et n'a aucun des effets secondaires négatifs de la définition de la couleur du canevas, comme indiqué.

Answer 4

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.

POUR CORRIGER : Changez 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(),
);

Answer 5

/// 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 fonction pour afficher le BotoomSheet avec les coins :

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