La hoja inferior es un widget de material debajo de material.dartbiblioteca. Es como un diálogo interactivo que se abre desde la parte inferior de la interfaz de usuario hacia la parte superior. La hoja inferior es una buena opción a considerar si desea mostrar información en la pantalla desviando la atención del usuario. Bloquea/desbloquea la interacción del usuario con otros contenidos de la pantalla mientras se muestra dependiendo del tipo de hoja que esté utilizando. Para implementar una hoja inferior, debe importar el paquete de componentes de material que es «paquete: aleteo/material.dart». La hoja inferior es un widget incorporado que generalmente se proporciona para mostrar información como mostrar un menú, ingresar detalles de la tarjeta, crear un formulario con campos de texto, etc. Una hoja aparece solo cuando el usuario activa los widgets de la hoja inferior y puede cerrar la hoja por las acciones dadas:
- Deslizar la pantalla hacia abajo/presionar hacia atrás
- Tocando la interfaz de usuario principal de la aplicación
- Presionando cualquier elemento dentro de la hoja
Una hoja inferior se divide en dos categorías:
- Hoja inferior modal
- Hoja inferior persistente
Hoja inferior persistente
La segunda categoría de hoja inferior es diferente de la hoja inferior modal solo en su comportamiento. Una hoja inferior persistente no bloquea la interacción del usuario con el resto de contenidos de la aplicación. Permite la interacción incluso cuando permanece en la pantalla. Las únicas dos formas de descartar una hoja inferior persistente son deslizar la hoja hacia abajo o presionar hacia atrás. Este widget solo se puede crear activando la función displayPersistentBottomSheet() . Se pasa al argumento onPressed del widget de botón.
Constructor
PersistentBottomSheetController<T> showBottomSheet<T>(
WidgetBuilder builder,
{Color? backgroundColor,
double? elevation,
ShapeBorder? shape,
Clip? clipBehavior,
BoxConstraints? constraints,
bool? enableDrag,
AnimationController? transitionAnimationController}
)
Implementación
Dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GeeksforGeeks',
home: Scaffold(
appBar: AppBar(
title: const Text('GeeksforGeeks'),
backgroundColor: Colors.green,
),
body: const showSheet(),
),
);
}
}
class showSheet extends StatefulWidget {
const showSheet({Key? key}) : super(key: key);
@override
State<showSheet> createState() => _showSheetState();
}
class _showSheetState extends State<showSheet> {
void displayPersistentBottomSheet() {
Scaffold.of(context).showBottomSheet<void>((BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.person),
title: const Text(' My Profile '),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: Icon(Icons.book),
title: const Text(' My Course '),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: Icon(Icons.workspace_premium),
title: const Text(' Go Premium '),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: Icon(Icons.video_label),
title: const Text(' Saved Videos '),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: Icon(Icons.edit),
title: const Text(' Edit Profile '),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: Icon(Icons.logout),
title: const Text('LogOut'),
onTap: () {
Navigator.pop(context);
},
),
],
);
});
}
Widget build(BuildContext context) {
return Center(
child: FlatButton(
color: Colors.green,
child: const Text(
'Display Sheet',
style: TextStyle(color: Colors.white),
),
onPressed: displayPersistentBottomSheet,
),
);
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por rharshitaaa21 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA