Skip to content

Instantly share code, notes, and snippets.

@dhruvilp
Last active March 25, 2020 22:25
Show Gist options
  • Save dhruvilp/b2ed19e51134d90f7b8efa2c9eb9d205 to your computer and use it in GitHub Desktop.
Save dhruvilp/b2ed19e51134d90f7b8efa2c9eb9d205 to your computer and use it in GitHub Desktop.
Flutter Responsive Layout
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Responsive Layout',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor: Colors.blue,
),
home: MyHomePage(title: 'Flutter Responsive Layout'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
static bool isMobile(BuildContext context) {
return MediaQuery.of(context).size.width <= 768;
}
static bool isWeb(BuildContext context) {
return MediaQuery.of(context).size.width > 768;
}
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _onHoverAbout = false;
bool _onHoverPortfolio = false;
bool _onHoverContact = false;
@override
Widget build(BuildContext context) {
final drawerHeader = UserAccountsDrawerHeader(
accountName: Text('User Name'),
accountEmail: Text('user.name@email.com'),
currentAccountPicture: CircleAvatar(
child: FlutterLogo(size: 42.0),
backgroundColor: Colors.white,
),
otherAccountsPictures: <Widget>[
CircleAvatar(
child: Text('A', style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500,),),
backgroundColor: Colors.amber[900],
),
CircleAvatar(
child: Text('B', style: TextStyle(color: Colors.black, fontWeight: FontWeight.w500,),),
backgroundColor: Colors.yellowAccent[700],
)
],
);
final drawerItems = ListView(
children: <Widget>[
drawerHeader,
ListTile(
title: Text(
'About',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w400,
),
),
onTap: (){
Navigator.pop(context);
Navigator.of(context).push(_NewPage(1, 'About'));
},
),
ListTile(
title: Text(
'Portfolio',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w400,
),
),
onTap: (){
Navigator.pop(context);
Navigator.of(context).push(_NewPage(2, 'Portfolio'));
},
),
ListTile(
title: Text(
'Contact',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w400,
),
),
onTap: (){
Navigator.pop(context);
Navigator.of(context).push(_NewPage(2, 'Contact'));
},
),
],
);
return Scaffold(
backgroundColor: Colors.white,
appBar: PreferredSize(
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey[200],
offset: Offset(0, 2.0),
blurRadius: 10.0,
spreadRadius: 4.0),
],
),
child: AppBar(
backgroundColor: Colors.white,
iconTheme: IconThemeData(color: Colors.grey[850]),
title: Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 10.0),
child: FlutterLogo(size: 20.0),
),
Text(
widget.title,
style: TextStyle(color: Colors.grey[800]),
),
],
),
elevation: 0.0,
actions: <Widget>[
MyHomePage.isWeb(context)
? ButtonBar(
alignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
InkWell(
onTap: (){
Navigator.of(context).push(_NewPage(1, 'About'));
},
onHover:(bool val){
setState((){
_onHoverAbout = val;
});
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: _onHoverAbout ? Colors.blueAccent[700] : Colors.transparent,
),
child: Text(
'About',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w500,
color: _onHoverAbout ? Colors.white : Colors.blueAccent[700],
),
),
),
),
InkWell(
onTap: (){
Navigator.of(context).push(_NewPage(2, 'Portfolio'));
},
onHover:(bool val){
setState((){
_onHoverPortfolio = val;
});
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: _onHoverPortfolio ? Colors.blueAccent[700] : Colors.transparent,
),
child: Text(
'Portfolio',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w500,
color: _onHoverPortfolio ? Colors.white : Colors.blueAccent[700],
),
),
),
),
InkWell(
onTap: (){
Navigator.of(context).push(_NewPage(2, 'Contacts'));
},
onHover:(bool val){
setState((){
_onHoverContact = val;
});
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: _onHoverContact ? Colors.blueAccent[700] : Colors.transparent,
),
child: Text(
'Contacts',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w500,
color: _onHoverContact ? Colors.white : Colors.blueAccent[700],
),
),
),
),
],
)
: SizedBox(
height: 0.0,
),
],
),
),
preferredSize: Size.fromHeight(kToolbarHeight),
),
body: Center(
child: Text(
"Hello World!",
style: Theme.of(context).textTheme.headline4,
),
),
drawer: MyHomePage.isMobile(context)
? Drawer(
elevation: 1.0,
child: drawerItems,
) : null,
);
}
}
class _NewPage extends MaterialPageRoute<Null> {
final int id;
final String pageName;
_NewPage(this.id, this.pageName)
: super(builder: (BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text('$pageName'),
elevation: 0.0,
),
body: Center(
child: Text('$id: $pageName Page'),
),
);
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment