Related
I'm adding routing into my Flutter app and I would like to re-use some common Widgets across all of my routes.
For instance, the AppBar and Drawer instances should be defined on the top level view and the routed view should be in a contained Widget (the yellow part in the image)
Is is supported? currently all "Flutter Routing" references I find demonstrate replacement of the entire view => different instances of the common Widgets for every route.
void redirect(BuildContext context, name) {
Navigator.of(context).pushNamed(name);
}
getCommonDrawer(context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('header'),
decoration: BoxDecoration(
color: Colors.greenAccent,
),
),
ListTile(
title: Text('foo'),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
title: Text('bar'),
onTap: () {
Navigator.pop(context);
},
),
],
),
);
}
class Screen1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Screen 1"),
),
drawer: getCommonDrawer(context),
body: new Center(
child: new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new RaisedButton(
onPressed: () {
redirect(context, "/screen2");
},
child: new Text("screen2"),
)
],
),
),
);
}
}
class Screen2 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Screen 2"),
),
drawer: getCommonDrawer(context),
body: new Center(
child: new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new RaisedButton(
onPressed: () {
redirect(context, "/screen1");
},
child: new Text("screen1"),
)
],
),
),
);
}
}
void main() { // 1
runApp( // 2
new MaterialApp( //3
home: new Screen1(), //4
routes: <String, WidgetBuilder> { //5
'/screen1': (BuildContext context) => new Screen1(), //6
'/screen2' : (BuildContext context) => new Screen2() //7
},
)
);
}
I'm a beginner trying to practice coding with Flutter so it would be helpful if the explanation or suggestion is easy to understand. :) Thanks in advance!
[Goal]
I've created a two folders and one of them is for parts that can be used in multiple places without having to create them every time. And the other one includes files with different pages (I like to keep them separate).
[Question]
I'm currently trying to navigate by using the side drawer and want to go to other pages, however it's not working and I'm getting blanks in black :( Please help...
In this case, should I use the "routes:" argument or should I use the MaterialPageRoute() or is there something else that can be suggested?
I apologize for posting the entire code, but I thought it would be best to understand the whole context. If there's anything that seems odd or have a better idea. Please do let me know!
[Code of Drawer]
class AppDrawer extends StatefulWidget {
#override
_AppDrawerState createState() => _AppDrawerState();
}
class _AppDrawerState extends State<AppDrawer> {
#override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text('John T.'),
accountEmail: Text('*********#gmail.com'),
currentAccountPicture: GestureDetector(
child: CircleAvatar(
backgroundColor: Colors.grey,
child: Icon(Icons.person, color: Colors.white))),
decoration: BoxDecoration(color: Colors.red)),
ListTile(
leading: Icon(Icons.home, color: Colors.redAccent),
title: Text('Home'),
trailing: null,
onTap: () {
Navigator.of(context).pop();
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) {
Home();
},
),
);
},
),
ListTile(
leading: Icon(Icons.person, color: Colors.redAccent),
title: Text('My Acount'),
trailing: null,
onTap: () {
Navigator.of(context).pop();
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) {
MyAccount();
},
),
);
},
),
ListTile(
leading: Icon(Icons.fitness_center, color: Colors.redAccent),
title: Text('My Workout'),
trailing: null,
onTap: () {},
),
ListTile(
leading: Icon(Icons.cancel, color: Colors.redAccent),
title: Text('My Nutrition'),
trailing: null,
onTap: () {},
),
Divider(color: Colors.red, indent: 20.0),
ListTile(
leading: Icon(Icons.settings, color: Colors.blue),
title: Text('Settings'),
trailing: null,
onTap: () {},
),
ListTile(
leading: Icon(Icons.help, color: Colors.green),
title: Text('About'),
trailing: null,
onTap: () {},
),
],
),
);
}
}
[Code of Home Page]
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 5.0,
title: Text('Home'),
backgroundColor: Colors.red,
centerTitle: true,
),
endDrawer: AppDrawer(),
body: Container(
color: Colors.white,
child: Center(
child: ListView(
children: <Widget>[],
),
),
),
);
}
}
[My Account Page]
class MyAccount extends StatefulWidget {
final String value;
MyAccount({Key key, this.value}) : super (key: key);
#override
_MyAccountState createState() => _MyAccountState();
}
class _MyAccountState extends State<MyAccount> {
final TextEditingController _ageFieldController = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My Account'),
centerTitle: true,
backgroundColor: Colors.blue,
),
endDrawer: AppDrawer(),
body: Container(
color: Colors.white,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Column(
children: <Widget>[
TextField(
controller: _ageFieldController,
decoration: InputDecoration(
hintText: 'Example: 27',
),
autocorrect: true,
keyboardType: TextInputType.number,
),
Text('${widget.value}')
],
),
),
],
),
),
),
);
}
}
[Code of Main.dart]
void main(List<String> args) {
runApp(Bmi());
}
class Bmi extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'BMI',
theme: ThemeData(
primarySwatch: Colors.deepPurple,
),
home: Home(),
);
}
}
The Material Design guidelines suggest a Drawer for navigation between sites of equal importance, so Navigator.push() should not be used, because the animation it does looks like it's a linear navigation(like going to the next page, not one of equal importance.)
Here's a link regarding this topic: material.io site for Navigation Drawer Component
I always update my body according to the currently selected item in the drawer, similar as you would do it with a BottomNavigationBar.
An implementation of that would look similar to this:
return Scaffold(
drawer: Drawer(),
body: Stack(
children: <Widget>[
Offstage(
offstage: index != 0,
child: _buildAccountPage(),
),
Offstage(
offstage: index != 0,
child: _buildHomePage(),
),
],
),
);
You need to return New Page to the Builder Function of Navigator.
Correct Code:
ListTile(
leading: Icon(Icons.person, color: Colors.redAccent),
title: Text('My Acount'),
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => MyAccount()));
},
),
I'm new to both Flutter and Dart, so bear with me.
I'm trying to use Flutter to display a camera preview using the Camera Plugin, and have two problems. 1) The preview is stretched so things look weird. 2) I want to have a BottomNavigationBar displayed below the preview, but the Camera Preview uses all screen space.
I initialize the camera and open the preview:
#override
Widget build(BuildContext context) {
if (!_isReady) return new Container();
if (!controller.value.initialized) return new Container();
return new CameraPreview(controller);
}
1) This is the build method for a class I've called _CameraWidgetState. How can I make this preview not look stretched?
2) To make the CameraWidget not use all space, I've tried putting it inside a Scaffold with no luck:
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new CameraWidget(),
),
bottomNavigationBar: new BottomNavigationBar(
items: [
new BottomNavigationBarItem(
icon: new Icon(Icons.camera), title: new Text("Left")),
new BottomNavigationBarItem(
icon: new Icon(Icons.favorite),
title: new Text("Right"))
],
),
);
}
Any ideas or help appreciated!
This solves the problem, but there could be better solutions as well. (Thanks to #user1462442 from the comments above.)
#override
Widget build(BuildContext context) {
if (!_isReady) return new Container();
if (!controller.value.initialized) return new Container();
return new Scaffold(
body: new Container(
child: new AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: new CameraPreview(controller),
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _isReady ? capture : null,
child: const Icon(
Icons.camera,
color: Colors.white,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}
I have used a DropDownButton in my build but i want the arrow to be displayed at the end and the dropdown items to be displayed from arrow, but in my app they are displaying from the top. i have attached the screenshots for your reference.
please can you tell me how to change this or is there any other way to simply create a drop down menu.
An example would be much appreciated.
Please excuse my code as I am new to programming and any comments or suggestions are most welcome.
Many Thanks,
Mahi.
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'dart:ui';
void main(){
runApp(new BranchSetup());
}
class BranchSetup extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return new _BranchSetupState();
}
}
class _BranchSetupState extends State<BranchSetup> with
WidgetsBindingObserver {
#override
Widget build(BuildContext context){
return new MaterialApp(
theme: new ThemeData(
primaryColor: const Color(0xFF229E9C),
),
title: 'Branch Setup',
home: new Scaffold(
body: new Container(
child: new ListView(
children: <Widget>[
new Container(
margin: const EdgeInsets.all(16.0),
child: new Row(
children: <Widget>[
new Expanded(
child: new TextFormField(
decoration: new InputDecoration(
labelText: 'Branch Name',
),
),
),
],
),
),
new Container(
margin: const EdgeInsets.all(16.0),
child:
new DropdownButton<String>(
items: <String>['Mens','Womans']
.map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}
).toList(),
onChanged: null,
),
),
],
),
),
),
);
}
}
This looks like a bug in Flutter. I filed an issue.
In the meantime, you can work around it by wrapping your DropdownButton in a Column.
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new DemoApp()));
}
class DemoApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text('DropdownButton Example')),
body: new ListView(
children: [
new Column(
children: <Widget>[
new DropdownButton<String>(
items: <String>['Foo', 'Bar'].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (_) {},
),
],
),
],
),
);
}
}
You can try out the plugin that I created : flutter_search_panel. Not a dropdown plugin, but you can display the items with the search functionality.
Use the following code for using the widget :
FlutterSearchPanel(
padding: EdgeInsets.all(10.0),
selected: 'a',
title: 'Demo Search Page',
data: ['This', 'is', 'a', 'test', 'array'],
icon: new Icon(Icons.label, color: Colors.black),
color: Colors.white,
textStyle: new TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0, decorationStyle: TextDecorationStyle.dotted),
onChanged: (value) {
print(value);
},
),
I have a Hero that can be scrolled so that part of it is offscreen. When I trigger a transition, it appears to abruptly jump on top of the AppBar and then jumps back under it when the transition is reversed. How do I force the AppBar to stay on top of the Hero?
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
home: new Example(),
theme: new ThemeData(primaryColor: Colors.orange),
debugShowCheckedModeBanner: false,
));
}
Widget positionHeroOverlay(BuildContext context, Widget overlay, Rect rect, Size size) {
final RelativeRect offsets = new RelativeRect.fromSize(rect, size);
return new Positioned(
top: offsets.top,
right: offsets.right,
bottom: offsets.bottom,
left: offsets.left,
child: overlay,
);
}
class LogoPageRoute extends MaterialPageRoute<Null> {
LogoPageRoute(this.colors) : super(
builder: (BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Flutter Logo'),
),
body: new ConstrainedBox(
constraints: new BoxConstraints.expand(),
child: new Hero(
tag: colors,
child: new FlutterLogo(colors: colors),
),
),
);
},
);
/// The color of logo to display
final MaterialColor colors;
#override
final Duration transitionDuration = const Duration(seconds: 1);
}
final List<MaterialColor> swatches = [
Colors.blue,
Colors.orange,
Colors.green,
];
class Example extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('All Logos'),
),
body: new ListView(
children: swatches.map((MaterialColor colors) {
return new InkWell(
onTap: () {
Navigator.push(context, new LogoPageRoute(colors));
},
child: new Hero(
tag: colors,
child: new FlutterLogo(size: 360.0, colors: colors),
),
);
}).toList(),
),
);
}
}
Wrap your AppBar in a Hero to force it to stay on top.
appBar: new PreferredSize(
child: new Hero(
tag: AppBar,
child: new AppBar(
title: new Text('All Logos'),
),
),
preferredSize: new AppBar().preferredSize,
),
For the AppBar of the detail page, I would recommend forcing the back button to be displayed so that it appears at the same time that the page title changes.
appBar: new PreferredSize(
child: new Hero(
tag: AppBar,
child: new AppBar(
leading: const BackButton(),
title: new Text('Flutter Logo'),
),
),
preferredSize: new AppBar().preferredSize,
),
Here's what it looks like:
i've fixed it here https://github.com/zombie6888/scrolled_hero by providing bottom and top offset to hero animation builder