web-dev-qa-db-fra.com

Comment créer une feuille de fond modale avec des coins circulaires dans Flutter?

showModalBottomSheet ne fournit aucun style ni aucune décoration. Je souhaite créer quelque chose comme la feuille de calcul Google Tasks.

google tasks bottomsheet

flutterflutter-layout
14
Herman

Il s'agit de la fonction modalBottomSheet nécessaire.

    void _modalBottomSheetMenu(){
        showModalBottomSheet(
            context: context,
            builder: (builder){
              return new Container(
                height: 350.0,
                color: Colors.transparent, //could change this to Color(0xFF737373), 
                           //so you don't have to change MaterialApp canvasColor
                child: new Container(
                    decoration: new BoxDecoration(
                        color: Colors.white,
                        borderRadius: new BorderRadius.only(
                            topLeft: const Radius.circular(10.0),
                            topRight: const Radius.circular(10.0))),
                    child: new Center(
                      child: new Text("This is a modal sheet"),
                    )),
              );
            }
        );
      }

La partie la plus importante de ce fonctionnement est également, dans MaterialApp, définissez canvasColor sur transparent comme celui illustré ci-dessous.

return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Tasks',
      theme: new ThemeData(
        primarySwatch: Colors.teal,
        canvasColor: Colors.transparent,
      ),
      home: new TasksHomePage(),
    );
  }

J'ai testé le code et cela fonctionne très bien car je faisais également un clone de l'application Google Tasks qui sera ouverte dans mon github .

24
Satyabrat Sahoo

MIS À JOUR LE 2019-08-05

Vous pouvez maintenant le faire en utilisant la méthode par défaut showModalBottomSheet qui prend désormais en charge l'ajout d'un ShapeBorder et également backgroundColor!

showModalBottomSheet(
  shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.circular(10.0),
  ),
  backgroundColor: Colors.white,
  ...
);

-

Au lieu de remplacer le thème entier de l'application (ce qui a causé des problèmes dans diverses parties de mon application) comme suggéré par d'autres réponses, j'ai décidé de jeter un œil à l'implémentation de showModalBottomSheet et de trouver le problème moi-même. Il s'avère que tout ce qui était nécessaire était d'encapsuler le code principal du modal dans un widget Theme qui contient le canvasColor: Colors.transparent tour. J'ai également facilité la personnalisation du rayon et de la couleur du modal lui-même.

Vous pouvez utiliser soit le package sur pub ou un Gist contenant le même code. N'oubliez pas d'importer le package/fichier approprié.

showRoundedModalBottomSheet(
    context: context,
    radius: 20.0,  // This is the default
    color: Colors.white,  // Also default
    builder: (context) => ???,
);
23
Gildásio Filho

Vous pouvez maintenant simplement définir l'argument shape. Exemple:

showModalBottomSheet(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(10.0)),
  ),
  context: context,
  builder: (context) => MyBottomSheet(),
);
8
Sven

En rassemblant toutes les réponses avant, j'ai pu obtenir le meilleur résultat possible (à mon avis) pour cela.

showModalBottomSheet(
        context: context,
        backgroundColor: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0)),
        ),
        builder: (context) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[     
              ListTile(
                leading: Icon(Icons.email),
                title: Text('Send email'),
                onTap: () {
                  print('Send email');
                },
              ),
              ListTile(
                leading: Icon(Icons.phone),
                title: Text('Call phone'),
                 onTap: () {
                    print('Call phone');
                  },
               ),                  
            ],
          );
        });
0
Carlos Eugênio Torres