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.
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.
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 !
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,
....