Bottom Sheet es una de las formas populares de mostrar varias opciones en la pantalla. Esto ayuda al usuario a cambiar a una nueva pantalla. Verá esta hoja inferior en la mayor parte de la aplicación para agregar datos o agregar alguna información, como la dirección o el número de boleto. En este artículo, vamos a ver cómo implementar la Hoja inferior en nuestra aplicación Flutter.
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})
Propiedades de la clase BottomSheet:
- backgroundColor: Se utiliza para dar color de fondo a la hoja inferior.
- cota: Se utiliza para dar cota a nuestra hoja inferior.
- constructor: Proporciona un constructor para el contenido de la hoja.
- clipBehaviour: se utiliza para recortar el contenido de la hoja como se especifica.
- habilitar arrastrar:
- onDragStart:
Ahora echemos un vistazo a la implementación de la hoja inferior. Para Implementar la Hoja Inferior en Flutter tienes que seguir los siguientes pasos:
Paso 1: navegue hasta el archivo main.dart() y devuelva Material App()
Primero, hemos declarado MyApp() en runApp en la función principal. Luego creamos StatefullWidget para MyApp en el que hemos devuelto MaterialApp(). En este MaterialApp() le hemos dado el título a nuestra aplicación y luego declarado el tema de nuestra aplicación como tema oscuro. Luego le dimos nuestra primera aplicación de pantalla o control deslizante en casa: HomePage()
Dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green,
),
//First Screen of our App
home: HomePage(),
);
}
}
Crear un StatefulWidget():
Cree un StatefulWidget que proporcione una estructura base para la aplicación utilizando el código siguiente. En este código, en primer lugar, hemos creado StatefulWidget para HomePage(). Y en esta HomePage() hemos devuelto Scaffold() Widget.
Dart
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
// ignore: library_private_types_in_public_api
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return const Scaffold();
}
}
Paso 2: construye la hoja inferior
En este Scaffold Widget, hemos dado una barra de aplicaciones en la que hemos dado el título de una barra de aplicaciones . Después de eso en el cuerpo, hemos declarado un Contenedor() que se envuelve con Center Widget y se le da un texto de muestra como «Hola».
Dart
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
// ignore: library_private_types_in_public_api
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
//Appbar along with Title
appBar: AppBar(
title: const Text("Bottom Sheet"),
),
body:Center(
//Sample Text Written in Center of Screen
// ignore: avoid_unnecessary_containers
child: Container(
child: const Text("Hello"),
),
),
);
}
}
Paso 3: crea y agrega un botón FloatingAction
Ahora cree un botón de acción flotante, y luego le hemos asignado un botón de acción flotante y le hemos dado un ícono de adición en este botón. Y en el método on Pressed, hemos declarado showModalBottomSheet(). Entonces, le hemos dado el widget Container que está envuelto en el widget SingleChildScrollView() . Que se utiliza para desplazar el contenido en la hoja inferior. De nuevo, hemos declarado un Contenedor() para la hoja inferior en la que le hemos dado border-radius a la esquina superior derecha e izquierda para hacer que este Contenedor sea circular.
Dart
//Floating Action Button
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add, color: Colors.white),
onPressed: () {
showModalBottomSheet(
context: context,
builder: (context) {
//Scrolling given for content in Container()
return SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: Container(
padding: const EdgeInsets.all(20),
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
topLeft: Radius.circular(20),
),
),
)));
});
},
),
Paso 4: Crear columna para mostrar contenido
En este Contenedor() hemos declarado el widget Column() en el que le hemos dado a sus hijos. Primero agregamos un encabezado de texto en el Contenedor(). Y después de eso agregamos TextField(). En este TextField() le hemos dado InputDecoration() que se usa para declarar el texto de la pista. Luego, agregamos un borde como OutLineInputBorder(), que se usa para dar color al lado del borde. También podemos hacer que TextField sea circular agregando un radio de borde en OutlineInputBorder(). Después de haber dado un RaisedButton() en el que hemos dado texto escrito en el botón y el color del botón.
Dart
//Create a Column to display it's content
padding: const EdgeInsets.all(20),
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
topLeft: Radius.circular(20),
),
),
//Create a Column to display it's content
child: Column(
children: [
const Text(
"Add Data",
style: TextStyle(
fontWeight: FontWeight.w600,
color: Colors.green,
fontSize: 20),
),
const SizedBox(height: 10.0),
// TextField for giving some Input
const TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
),
hintText: "Add Item",
hintStyle: TextStyle(color: Colors.grey),
),
),
const SizedBox(height: 10),
//Button for adding items
ElevatedButton(
onPressed: null,
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.red),
textStyle: MaterialStateProperty.all(
const TextStyle(fontSize: 30))),
child: const Text("Add"),
)
// RaisedButton is deprecated
// Instead Use ElevatedButton
// RaisedButton(
// color: Colors.grey,
// onPressed: null,
// child: Text(
// "ADD",
// style: TextStyle(color: Colors.white),
// ),
// )
],
),
),
Código completo
Dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green,
),
//First Screen of our App
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
// ignore: library_private_types_in_public_api
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
//Appbar along with Title
appBar: AppBar(
title: const Text("Bottom Sheet"),
),
body: Center(
//Sample Text Written in Center of Screen
// ignore: avoid_unnecessary_containers
child: Container(
child: const Text("Hello"),
),
),
//Floating Action Button
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add, color: Colors.white),
onPressed: () {
showModalBottomSheet(
context: context,
builder: (context) {
//Scrolling given for content in Container()
return SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: Container(
//Create a Column to display it's content
padding: const EdgeInsets.all(20),
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
topLeft: Radius.circular(20),
),
),
//Create a Column to display it's content
child: Column(
children: [
const Text(
"Add Data",
style: TextStyle(
fontWeight: FontWeight.w600,
color: Colors.green,
fontSize: 20),
),
const SizedBox(height: 10.0),
// TextField for giving some Input
const TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
),
hintText: "Add Item",
hintStyle: TextStyle(color: Colors.grey),
),
),
const SizedBox(height: 10),
//Button for adding items
ElevatedButton(
onPressed: null,
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.red),
textStyle: MaterialStateProperty.all(
const TextStyle(fontSize: 30))),
child: const Text("Add"),
)
// RaisedButton is deprecated
// Instead Use ElevatedButton
// RaisedButton(
// color: Colors.grey,
// onPressed: null,
// child: Text(
// "ADD",
// style: TextStyle(color: Colors.white),
// ),
// )
],
),
),
),
);
});
},
),
);
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por chinmaymunje96 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA