Created
May 13, 2020 11:21
-
-
Save yacineblr/cd1c4d8f1067db0cc65ea2f62c2cbaad to your computer and use it in GitHub Desktop.
The navigator takes all the available space and therefore blocks it by tapping on the red block. Is it possible to make the navigator adapt to the size of the child?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
void main() => runApp(MyApp()); | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
title: 'Flutter Demo', | |
debugShowCheckedModeBanner: false, | |
theme: ThemeData( | |
primarySwatch: Colors.blue, | |
), | |
home: Home(), | |
); | |
} | |
} | |
class Home extends StatefulWidget { | |
Home({Key key}) : super(key: key); | |
@override | |
_HomeState createState() => _HomeState(); | |
} | |
class _HomeState extends State<Home> { | |
final GlobalKey<NavigatorState> _navigatorKey = new GlobalKey<NavigatorState>(); | |
int _count = 0; | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
backgroundColor: Colors.white, | |
body: Stack( | |
children: [ | |
Positioned.fill( | |
child: GestureDetector( | |
onTap: () { | |
setState(() => _count++); | |
}, | |
child: Container( | |
decoration: BoxDecoration(color: Colors.red), | |
child: Center( | |
child: Text('Tap anywhere to increment $_count') | |
) | |
) | |
) | |
), | |
Positioned( | |
width: MediaQuery.of(context).size.width * 1, | |
bottom: 0, | |
child: ConstrainedBox( | |
constraints: BoxConstraints( | |
maxHeight: MediaQuery.of(context).size.height, | |
maxWidth: MediaQuery.of(context).size.width | |
), | |
child: navigator(), | |
) | |
) | |
], | |
) | |
); | |
} | |
navigator() { | |
return Navigator( | |
key: _navigatorKey, | |
initialRoute: 'home/one', | |
onGenerateRoute: (settings) { | |
Widget view; | |
switch (settings.name) { | |
case 'home/one': | |
view = ViewOne(); | |
break; | |
case 'home/two': | |
view = ViewTwo(); | |
break; | |
case 'home/three': | |
view = ViewThree(); | |
break; | |
default: | |
} | |
var builder = (BuildContext _) { | |
return view; | |
}; | |
return MaterialPageRoute(builder: builder, settings: settings); | |
}, | |
); | |
} | |
} | |
class ViewOne extends StatelessWidget { | |
const ViewOne({Key key}) : super(key: key); | |
@override | |
Widget build(BuildContext context) { | |
return DraggableScrollableSheet( | |
initialChildSize: 0.2, | |
maxChildSize: 0.6, | |
minChildSize: 0.2, | |
builder: (context, scrollController) { | |
return SingleChildScrollView( | |
controller: scrollController, | |
child: Container( | |
decoration: BoxDecoration(color: Colors.cyan), | |
height: MediaQuery.of(context).size.height * 0.6, | |
width: MediaQuery.of(context).size.width, | |
child: Column( | |
mainAxisSize: MainAxisSize.min, | |
children: [ | |
Text('ViewOne', style: TextStyle(color: Colors.black, fontSize: 17)), | |
RaisedButton( | |
onPressed: () => Navigator.of(context).pushNamed('home/two'), | |
child: Text('Push view two'), | |
) | |
], | |
), | |
) | |
); | |
}, | |
); | |
} | |
} | |
class ViewTwo extends StatelessWidget { | |
const ViewTwo({Key key}) : super(key: key); | |
@override | |
Widget build(BuildContext context) { | |
return ConstrainedBox( | |
constraints: BoxConstraints(maxHeight: 300), | |
child: SafeArea( | |
child: Container( | |
padding: EdgeInsets.all(20), | |
height: 300, | |
decoration: BoxDecoration(color: Colors.green), | |
width: MediaQuery.of(context).size.width, | |
child: Column( | |
children: [ | |
Text('ViewTwo', style: TextStyle(color: Colors.black, fontSize: 17)), | |
RaisedButton( | |
onPressed: () => Navigator.of(context).pushNamed('home/three'), | |
child: Text('Push view three'), | |
), | |
RaisedButton( | |
onPressed: () => Navigator.of(context).pop(), | |
child: Text('Pop this view'), | |
), | |
SizedBox(height: 50), | |
Text('Here, ConstrainedBox and container height does not work') | |
], | |
), | |
), | |
), | |
); | |
} | |
} | |
class ViewThree extends StatelessWidget { | |
const ViewThree({Key key}) : super(key: key); | |
@override | |
Widget build(BuildContext context) { | |
return SizedBox( | |
height: 300, | |
width: MediaQuery.of(context).size.width, | |
child: Column( | |
children: [ | |
Text('ViewThree', style: TextStyle(color: Colors.black, fontSize: 17)), | |
RaisedButton( | |
onPressed: () => Navigator.of(context).pop(), | |
child: Text('Pop this view'), | |
) | |
] | |
) | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment