Created
March 30, 2020 20:01
-
-
Save carzacc/7b3e9dfaeb216a7caed74fe62fa6f1a4 to your computer and use it in GitHub Desktop.
Example Flutter Web App showing a drawer on smaller screens and showing a menu on the left on bigger screens
This file contains hidden or 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(context) => MaterialApp( | |
home: HomePage() | |
); | |
} | |
class HomePage extends StatelessWidget { | |
@override | |
Widget build(context) => Scaffold( | |
appBar: AppBar(title: Text("test")), | |
drawer: MediaQuery.of(context).size.width < 500 ? Drawer( | |
child: Menu(), | |
) : null, | |
body: SafeArea( | |
child:Center( | |
child: MediaQuery.of(context).size.width < 500 ? Content() : | |
Row( | |
children: [ | |
Container( | |
width: 200.0, | |
child: Menu() | |
), | |
Container( | |
width: MediaQuery.of(context).size.width-200.0, | |
child: Content() | |
) | |
] | |
) | |
) | |
) | |
); | |
} | |
class Menu extends StatelessWidget { | |
@override | |
Widget build(context) => ListView( | |
children: [ | |
FlatButton( | |
onPressed: () {}, | |
child: ListTile( | |
leading: Icon(Icons.looks_one), | |
title: Text("First Link"), | |
) | |
), | |
FlatButton( | |
onPressed: () {}, | |
child: ListTile( | |
leading: Icon(Icons.looks_two), | |
title: Text("Second Link"), | |
) | |
) | |
] | |
); | |
} | |
class Content extends StatelessWidget { | |
final List<String> elements = ["Zero", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "A Million Billion Trillion", "A much, much longer text that will still fit"]; | |
@override | |
Widget build(context) => GridView.builder( | |
itemCount: elements.length, | |
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( | |
maxCrossAxisExtent: 130.0, | |
crossAxisSpacing: 20.0, | |
mainAxisSpacing: 20.0, | |
), | |
itemBuilder: (context, i) => Card( | |
child: Center( | |
child: Padding( | |
padding: EdgeInsets.all(8.0), child: Text(elements[i]) | |
) | |
) | |
) | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment