Como puedo hacer esta animación en flutter.?
mientras subo el DraggableScrollableSheet, baja el AppBar.
https://mega.nz/file/vsU0gTTb#lVmd56WIS3f9ufoGvWVSwzYpDACAxy70KPxH5LZE0I0
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadComo puedo hacer esta animación en flutter.?
mientras subo el DraggableScrollableSheet, baja el AppBar.
https://mega.nz/file/vsU0gTTb#lVmd56WIS3f9ufoGvWVSwzYpDACAxy70KPxH5LZE0I0
Una vez que tienes el DraggableScrollableSheet
lo que necesitas es escuchar el porcentaje de desplazamiento, eso lo puedes hacer con NotificationListener<DraggableScrollableNotification>
, luego de eso simplemente obtener el valor entre 0.0 y 1.0 para que puedas animar la vista superior.
Necesitas un Stack
y Positioned
.
Te dejo el ejemplo que hice:
const _googleMapsImage = 'https://miro.medium.com/max/4064/1*qYUvh-EtES8dtgKiBRiLsA.png';
class DraggableScrollableSheetAnimation extends StatefulWidget {
@override
_DraggableScrollableSheetAnimationState createState() => _DraggableScrollableSheetAnimationState();
}
class _DraggableScrollableSheetAnimationState extends State<DraggableScrollableSheetAnimation> {
double _percent = 0.0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Stack(
children: [
Positioned.fill(
bottom: MediaQuery.of(context).size.height * 0.3,
child: Image.network(
_googleMapsImage,
fit: BoxFit.cover,
),
),
Positioned(
left: 20,
top: 20,
child: FloatingActionButton(
child: Icon(
Icons.menu,
color: Colors.black,
),
backgroundColor: Colors.white,
onPressed: () => null,
),
),
Positioned.fill(
child: NotificationListener<DraggableScrollableNotification>(
onNotification: (notification) {
setState(() {
_percent = 2 * notification.extent - 0.8;
});
return true;
},
child: DraggableScrollableSheet(
maxChildSize: 0.9,
minChildSize: 0.4,
initialChildSize: 0.4,
builder: (_, controller) {
return Material(
elevation: 10,
borderRadius: BorderRadius.vertical(
top: Radius.circular(20),
),
color: Colors.white,
child: Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
width: 40,
color: Colors.grey[300],
height: 2,
),
),
),
const SizedBox(height: 5),
Text(
'It\'s good to see you',
style: TextStyle(color: Colors.grey, fontSize: 13),
),
const SizedBox(height: 5),
Text(
'Where are you going?',
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20),
),
const SizedBox(height: 25),
TextField(
decoration: InputDecoration(
prefixIcon: Icon(
Icons.search,
color: Colors.purple[300],
),
hintText: 'Search destination',
),
),
Expanded(
child: ListView.builder(
padding: EdgeInsets.only(bottom: 40),
controller: controller,
itemCount: 20,
itemBuilder: (context, index) {
return ListTile(
contentPadding: EdgeInsets.zero,
leading: Icon(Icons.location_on_outlined),
title: Text('Address :$index'),
subtitle: Text('City $index'),
);
},
),
),
],
),
),
);
},
),
),
),
Positioned(
left: 0,
right: 0,
top: -170 * (1 - _percent),
child: Opacity(
opacity: _percent,
child: _SearchDestination(),
),
),
Positioned(
left: 0,
right: 0,
bottom: -50 * (1 - _percent),
child: Opacity(
opacity: _percent,
child: _PickPlaceInMap(),
),
),
],
),
),
);
}
}
class _PickPlaceInMap extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Material(
elevation: 10,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.place_sharp, color: Colors.grey),
const SizedBox(width: 10),
Text('Pick in the map'),
],
),
),
);
}
}
class _SearchDestination extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Material(
elevation: 10,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
BackButton(),
Text(
'Choose destination',
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20),
),
],
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: Column(
children: [
TextField(
decoration: InputDecoration(
fillColor: Colors.grey[200],
filled: true,
hintText: 'Avenue 24 NO 219',
),
),
TextField(
decoration: InputDecoration(
fillColor: Colors.grey[200],
filled: true,
hintText: 'Where are we going?',
),
),
],
),
),
const SizedBox(height: 10),
],
),
);
}
}
Resultado:
También estaré publicando el video del proceso en mi canal de youtube: www.youtube.com/diegoveloper