web-dev-qa-db-fra.com

Comment ajustez-vous la hauteur et le borderRadius d'une feuille inférieure dans Flutter?

Il manque probablement quelque chose d’évident ici, mais ma BottomSheet ne occupe que la moitié inférieure de l’écran, même si les widgets qu’elle contient prennent plus de place. Alors maintenant, il y a un comportement de défilement à l'intérieur de la feuille inférieure. J'aimerais pouvoir augmenter la BottomSheet afin que l'utilisateur n'ait pas à faire autant défiler.

Je souhaite également ajouter un borderRadius en haut de ma feuille de fond afin qu'il ressemble davantage à "modal" -y ou à "tab".

Code:

void _showBottomSheet(BuildContext context) {
    showModalBottomSheet<Null>(
      context: context,
      builder: (BuildContext context) {
        return _bottomSheetScreen; // defined earlier on
      },
    );
}

J'ai essayé:

showModalBottomSheet<Null>(
  context: context,
  builder: (BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: _borderRadius,
      ),
      height: 1000.0,
      child: _bottomSheetScreen,
    );
  },
);

mais il semble que cela n'affecte que le contenu de la BottomSheet et ne personnalise pas la BottomSheet elle-même.

material-designflutterbottom-sheet
5
Mary

Dernièrement, j'ai trouvé une solution de contournement pour cela. En définissant la propriété canvasColor sur Colors.transparent dans le thème de votre application, nous pouvons faire disparaître la superposition de BottomSheet.

return new MaterialApp(
  title: 'MyApp',
  theme: new ThemeData(
    primarySwatch: Colors.blue,
    canvasColor: Colors.transparent,
  ),
  //...
);

Une fois que vous avez configuré cela, vous pouvez utiliser ClipRRect ou Decoration avec des coins arrondis. 

 Bottomsheet with rounded corners

2
ryanafrish7

Utilisez showBottomSheet au lieu de showModalBottomSheet

Créer une clé globale et un auditeur

final _scaffoldKey = new GlobalKey<ScaffoldState>();
VoidCallback _showPersBottomSheetCallBack;

Ecrivez votre méthode pour montrer la feuille

  void _showBottomSheet() {
    setState(() {
      _showPersBottomSheetCallBack = null;
    });

    _scaffoldKey.currentState
        .showBottomSheet((context) {
      return new Container(
        height: MediaQuery.of(context).size.height-100.0,
        color: Colors.greenAccent,
        child: new Center(
          child: new Text("Hi BottomSheet"),
        ),
      );
    })
        .closed
        .whenComplete(() {
      if (mounted) {
        setState(() {
          _showPersBottomSheetCallBack = _showBottomSheet;
        });
      }
    });
  }

initialiser l'auditeur

void initState() {
    super.initState();
    _showPersBottomSheetCallBack = _showBottomSheet;
  }

Appelez la méthode où vous le souhaitez

new RaisedButton(
                  onPressed: _showPersBottomSheetCallBack,
                  child: new Text("Persistent"),
                ),

J'espère que ça aide !

1
Shyju M

Dans le code ci-dessus de @Shyju Madathil, vous devez ajouter une clé dans un échafaud pour que cela fonctionne. 

return new Scaffold(
  key: _scaffoldKey,
  ....
0
crimson suv