Podemos crear bottomsheet en flutter. Básicamente, tenemos dos tipos de hojas inferiores en el diseño de materiales: Persistentes y Modales . Bottomsheets se utilizan cuando queremos realizar acciones. Básicamente, hay dos tipos de Bottomsheets : persistentes y modales. La hoja inferior persistente no oculta el contenido de la pantalla y se enfoca en ambos lados. Pero la hoja inferior Modal se enfoca más en la hoja inferior que en el contenido de la pantalla principal. Cuando se toca el botón persistente, se empujará la página y se mostrará la hoja inferior persistente. Mientras que en el caso de un bottomsheet Modal, en lugar de una inserción de página, la hoja inferior se mostrará en la misma página y es menos compleja que la hoja inferior persistente . Podemos usar cualquiera de las hojas inferiores según nuestros requisitos.
Persistente : es visible incluso cuando el usuario utiliza las otras partes de la aplicación.
Modal : evita que el usuario use otras partes de la aplicación.
Entendamos esto con la ayuda de ejemplos:
Constructor de la clase BottomSheet:
BottomSheet({Key key,
AnimationController animationController,
bool enableDrag: true,
BottomSheetDragStartHandler onDragStart,
BottomSheetDragEndHandler onDragEnd,
Color backgroundColor,
double elevation,
ShapeBorder shape,
Clip clipBehavior,
@required VoidCallback onClosing,
@required WidgetBuilder builder})
Implementación con ejemplo:
dardo principal
Dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'BottomSheet',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>{
final _scaffoldKey =new GlobalKey<ScaffoldState>();
VoidCallback _showPersBottomSheetCallBack;
@override
void initState(){
super.initState();
_showPersBottomSheetCallBack=_showPersistentBottomSheet;
}
void _showPersistentBottomSheet(){
setState(() {
_showPersBottomSheetCallBack=null;
});
_scaffoldKey.currentState.showBottomSheet((context){
return new Container(
height: 200.0,
color: Colors.green,
child: new Center(
child: new Text("Persistent BottomSheet",textScaleFactor: 2,
style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold)),
),
);
}).closed.whenComplete((){
if(mounted){
setState(() {
_showPersBottomSheetCallBack=_showPersistentBottomSheet;
});
}
});
}
void _showModalSheet(){
showModalBottomSheet(
context: context,
builder: (builder){
return new Container(
height: 200.0,
color: Colors.green,
child: new Center(
child: new Text(" Modal BottomSheet",textScaleFactor: 2,
style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold)),
),
);
}
);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
key:_scaffoldKey,
appBar: new AppBar(
title: new Text("Bottomsheet"),
backgroundColor: Colors.green,
actions: <Widget>[
Text("GFG",textScaleFactor: 2,)
],
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new RaisedButton(
color: Colors.red,
onPressed: _showPersBottomSheetCallBack,
child: new Text("Persistent",
style: TextStyle(color: Colors.white,
fontWeight: FontWeight.bold)),
),
new Padding(
padding: const EdgeInsets.only(top: 10.0),
),
new RaisedButton(
color: Colors.red,
onPressed: _showModalSheet,
child: new Text("Model",
style: TextStyle(color: Colors.white,
fontWeight: FontWeight.bold)),
)
],
),
),
backgroundColor: Colors.lightBlue[100],
);
}
}
Producción:
Cuando se ejecuta el código anterior, el resultado se muestra a continuación:
Cuando se toca el botón Persistente, se mostrará una hoja inferior persistente. En esta hoja inferior persistente , el contenido de la pantalla principal se enfoca igualmente como el contenido de la hoja inferior . Cuando se toca el botón persistente, se empujará la página y se mostrará la hoja inferior persistente. Cuando se toca el botón Modal, se mostrará la hoja inferior modal. En la hoja inferior modal , en lugar de una inserción de página, la hoja inferior se mostrará en la misma página y es menos compleja que la hoja inferior persistente .
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA