SlidingUpPanel es el panel deslizante hacia arriba desde el widget inferior en el aleteo. En muchas aplicaciones, necesitamos mostrar datos adicionales usando el panel inferior. Es por eso que en muchas aplicaciones se utiliza el panel deslizante hacia arriba. ¡Un widget de Flutter arrastrable que hace que la implementación de un SlidingUpPanel sea mucho más fácil! Basado en el componente de hoja inferior de Material Design, este widget funciona tanto en Android como en iOS. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo.
Instalando
Agregar dependencia en el archivo pubspec.yaml .
Nota : No olvides obtener los paquetes.
Código o Sintaxis
Dart
SlidingUpPanel( body : // Widget(Column,Row,Center..) collapsed : // Widget(Column,Row,Center..) panel : // Widget(Column,Row,Center..) )
Algunas propiedades de SlidingUpPanel
|
Propiedades |
Descripción |
|---|---|
| panel | El widget que se desliza a la vista. |
| colapsado | El widget se muestra sobre el panel cuando está contraído. |
| cuerpo | El widget que se encuentra debajo del panel deslizante. El widget se dimensiona automáticamente para llenar la pantalla. |
| color | El color para rellenar el fondo de la hoja del panel deslizante. |
| telón de fondo Habilitado | Si no es nulo, muestra una sombra que se oscurece sobre el cuerpo a medida que se abre el panel. |
| Altura máxima | La altura del panel deslizante cuando está completamente colapsado. |
| Altura máxima | La altura del panel deslizante cuando está completamente abierto. |
| telón de fondoColor | Muestra una sombra oscurecida de este Color sobre el cuerpo a medida que el panel se abre. |
| controlador | Si no es nulo, se puede usar para controlar el estado del panel. |
| borde | Un borde para dibujar alrededor de la hoja del panel deslizante. |
Un SlidingUpPanel sin colapsar
Agregue la propiedad del panel con un widget de texto centrado.
Dart
@override
Widget build(BuildContext context) {
return Scaffold( // returning Scaffold
appBar: AppBar( // appbar with title
title: Text("SlidingUpPanelExample"),
),
// in body we have SlidingUpPanel,
// panel has center text
body: SlidingUpPanel(
panel: Center(
child: Text("This is the sliding Widget"),
),
// this is main body now,
// replace by the scaffold body.
body: Center(
child: Text("This is the Widget behind the sliding panel"),
),
),
);
}
Producción
panel sin colapsar
Un SlidingUpPanel con panel y colapsado
Agregue la propiedad contraída como contenedor y agregue un widget de texto.
Dart
@override
Widget build(BuildContext context) {
return Scaffold( // returning scaffold
appBar: AppBar( // appbar with title text.
title: Text("SlidingUpPanelExample"),
),
// In body we have a SlidingUpPanel,
body: SlidingUpPanel(
// panel with centered text
panel: Center(
child: Text("This is the sliding Widget"),
),
// collapsed with container
collapsed: Container(
color: Colors.blueGrey,
child: Center(
child: Text(
"This is the collapsed Widget",
style: TextStyle(color: Colors.white),
),
),
),
// main body
body: Center(
child: Text("This is the Widget behind the sliding panel"),
),
),
);
}
Producción
Panel con colapsado
Oscurecer el cuerpo a medida que se abre el panel
Al hacer que backgroundEnabled sea verdadero, podemos oscurecer el cuerpo cuando se abre el panel.
Dart
@override
Widget build(BuildContext context){
return Scaffold ( // returning Scaffold.
appBar: AppBar( // appbar with title
title: Text("SlidingUpPanelExample"),
body: SlidingUpPanel(
// this is true so that background
// will be dark when panel open
backdropEnabled: true,
// panel with centered text
panel: Center(
child: Text("This is the sliding Widget"),
),
// this is the body
body: Center(
child: Text("This is the Widget behind the sliding panel"),
),
),
),
);
}
Producción
Oscurecer el fondo al deslizar el panel hacia arriba
redondeando las fronteras
Esto se puede lograr proporcionando la propiedad del radio como circular.
Dart
@override
Widget build(BuildContext context) {
// making radius circular so that panel
// and collapsed should be circular in border.
BorderRadiusGeometry radius = BorderRadius.only(
topLeft: Radius.circular(24.0),
topRight: Radius.circular(24.0),
);
// scaffold with appbar
return Scaffold(
appBar: AppBar(
title: Text("SlidingUpPanelExample"),
),
// SlidingUpPanel with panel and collapsed
body: SlidingUpPanel(
panel: Center(
child: Text("This is the sliding Widget"),
),
collapsed: Container(
decoration: BoxDecoration(
color: Colors.blueGrey,
// changing radius that we define above
borderRadius: radius
),
// collapsed text
child: Center(
child: Text(
"This is the collapsed Widget",
style: TextStyle(color: Colors.white),
),
),
),
// main body or content behind the panel
body: Center(
child: Text("This is the Widget behind the sliding panel"),
),
borderRadius: radius,
),
);
}
Producción
Un ejemplo de muestra para hacer flotar el panel
Dart
import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';
// main app
void main() {
runApp(SlideUp());
}
class SlideUp extends StatelessWidget {
SlideUp({Key? key}) : super(key: key);
// defining border radius
BorderRadius radius = const BorderRadius.only(
topLeft: Radius.circular(24),
topRight: Radius.circular(24),
);
@override
Widget build(BuildContext context) {
return MaterialApp( // MaterialApp
theme: ThemeData(
primarySwatch: Colors.teal,
),
debugShowCheckedModeBanner: false,
home: Scaffold( // scaffold
appBar: AppBar( // appbar with title text
title: const Text("Sliding Up Panel"),
),
body: SlidingUpPanel(
// making false it does
// not render outside
renderPanelSheet: false,
// panel
panel: Container(
decoration: const BoxDecoration(
color: Color.fromARGB(255, 253, 253, 253),
borderRadius: BorderRadius.all(Radius.circular(24.0)),
boxShadow: [
BoxShadow(
blurRadius: 20.0,
color: Colors.grey,
),
]),
margin: const EdgeInsets.all(24.0),
child: const Center(
child: Text("This is the SlidingUpPanel when open"),
),
),
// collapsed
collapsed:Container(
decoration: const BoxDecoration(
color: Colors.blueGrey,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(24.0), topRight: Radius.circular(24.0)),
),
margin: const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),
child: const Center(
child: Text(
"This is the collapsed Widget",
style: TextStyle(color: Colors.white),
),
),
) ,
body: const Center(
child: Text(
"This the widget behind the Sliding panel"),
),
),
),
);
}
}