Swipe up to expand Stack/Expanded

Hello
I make an app like this screenshot with Flutter

now I would like to do this : when we swipe up from the white screen to image, the white part take all screen height and when we swipe down the white part is like the screenshot

My code is like this :

class MyApp extends StatelessWidget {
var flexImage = 1;
var flexContent = 3;
@override
Widget build(BuildContext context) {
 return MaterialApp(
   debugShowCheckedModeBanner: false,
   title: 'TODO List',
   theme: ThemeData(
     primarySwatch: Colors.blue,
   ),
   home: Scaffold(
     body: Container(
       child: Column(
         children: [
           Expanded(
             child: Container(),
             flex: flexImage
           ),
           Expanded(
               child: Stack(
                 children: [
                   Container(
                     decoration: BoxDecoration(
                         color: Colors.white.withOpacity(0.5),
                         borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0), topRight: Radius.circular(30.0))
                     ),
                   ),
                   Container(
                     height: 610,
                     decoration: BoxDecoration(
                         color: Colors.white.withOpacity(0.3),
                         borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0), topRight: Radius.circular(30.0))
                     ),
                   ),

                   HomeView(),
                 ],
                 alignment: AlignmentDirectional.bottomCenter
               ),
               flex: flexContent
           ),
         ],
       ),
     decoration: BoxDecoration(
       image: DecorationImage(
         image: AssetImage('assets/myBackground.jpg'),
         fit: BoxFit.cover
       )
     ),
     ),
     floatingActionButton: FloatingActionButton(
       onPressed: () {
         print('here');
       },
       child: Icon(Icons.add),
     ),
   ),
 );
}
}

class HomeView extends StatelessWidget {
@override
Widget build(BuildContext context) {
 return Container(
   height: 600,
   child: Column(
     children: <Widget>[
       WelcomeBar(
           name: 'John Smith'
       ),
     ],
   ),
   decoration: BoxDecoration(
       color: Colors.white,
       borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0), topRight: Radius.circular(30.0))
   ),
 );
}
}
class WelcomeBar extends StatelessWidget {
WelcomeBar({this.name});
final String name;

@override
Widget build(BuildContext context) {
 return
   Expanded(
       child: Container(
         constraints: BoxConstraints.expand(),
         padding: EdgeInsets.all(20.0),
         child: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: <Widget>[
             Row(
               children: <Widget>[
                 Text(
                   'Hi, $name!',
                   textAlign: TextAlign.left,
                   style: TextStyle(
                       color: Colors.black,
                       fontWeight: FontWeight.w900,
                       fontSize: 30.0
                   ),
                   overflow: TextOverflow.ellipsis,
                 ),
                 Padding(
                   padding: EdgeInsets.only(left: 10.0),
                   child: Image(
                     image: AssetImage('assets/emoji.jpg'),
                   ),
                 )
               ],
             )
           ],
         ),
       ),
       flex: 1
   );
}
}

I’m new on Flutter and I don’t know how to do this clear

could you help me please ?

1 Like