Develop Reference

type 'Future<dynamic>' is not a subtype of type 'Route<Object>'

I got the the following error for below code. I was attempting to navigate to the next page. I was able to navigate just once and then I got the error mentioned above. Please do help me on this. I tried even using await but await is not supported for builder: (BuildContext context) => SubmitArticles()).
class UserSubmitOption extends StatefulWidget {
#override
_UserSubmitOptionState createState() => _UserSubmitOptionState();
}
class _UserSubmitOptionState extends State<UserSubmitOption> {
#override
Widget build(BuildContext dynamic) => MaterialApp(
debugShowCheckedModeBanner: false,
home:SafeArea (
child: Scaffold(
backgroundColor: Colors.indigo[800],
resizeToAvoidBottomInset: false,
appBar: AppBar(
toolbarHeight: 60,
backgroundColor: Colors.indigo[900],
automaticallyImplyLeading: false,
title: Text("What do you want to submit?",style:TextStyle(color:Colors.white,fontWeight:FontWeight.bold)),
centerTitle: true,
leading: IconButton(
icon: Icon(Icons.arrow_back,color:Colors.black,size:25,),
onPressed: () => Navigator.push(context,
MaterialPageRoute(builder: (context) => UserMenu())))),
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(60.0),
child: Center(
child: Wrap(spacing: 50, runSpacing: 50.0, children: <Widget>[
GestureDetector(
onTap: () {
SubmitQuiz();
setState(() {
});
},
child: SizedBox(
width: 200.0,
height: 200.0,
child: Card(
color: Colors.indigo,
borderOnForeground:true,
shadowColor: Colors.white,
elevation: 20.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0)),
child: Center(
child: Padding(
padding: const EdgeInsets.all(50.0),
child: Column(
children: <Widget>[
Icon(
Icons.vpn_key_outlined,size:60,color:Colors.black,
), // Image.asset("assets/todo.png",width: 64.0,),
SizedBox(
height: 7.0,
),
Text(
"Quiz",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 17.0,
),
),
SizedBox(
height: 5.0,
),
],
),
)),
),
)),
GestureDetector(
onTap: () async {Navigator.push(context,
MaterialPageRoute (
builder: (BuildContext context) => SubmitArticles())
);},
child: SizedBox(
width: 200.0,
height: 200.0,
child: Card(
color: Colors.indigo,
elevation: 20.0,
shadowColor:Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0)),
child: Center(
child: Padding(
padding: const EdgeInsets.all(45.0),
child: Column(
children: <Widget>[
Icon (
Icons.article_outlined,size:60,
),
// Image.asset("assets/note.png",width: 64.0,),
SizedBox(
height: 7.0,
),
Text(
"Articles",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 17.0),
),
SizedBox(
height: 5.0,
),
],
),
)),
),
)),
]),
),
),
],
),
),
)));
}

You are trying to access route in the wrong way
use instead:
Navigator.push(context,MaterialPageRoute(
builder : (context) => SubmitArticles())
);
i hope it work with you.
happy coding!

How can I achieve this appbar design in flutter in which I insert Navigation inside appbar rather than bottomNavigationBar

I want to design appbar of my app like this
Can someone help me out to achieve this task
Thanks!

//customise this with your requirements
home: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.white,
leading: Icon(Icons.account_circle, color: Colors.grey),
title: DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Colors.grey, width: 0.7),
),
child: IntrinsicHeight(
child: Row(mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
bottomLeft: Radius.circular(20),
),
color: Colors.grey,
),
child: IconButton(
padding: EdgeInsets.zero,
icon: Icon(Icons.blur_circular, color: Colors.white,),
onPressed: () {
//todo
}),
),
),
VerticalDivider(
color: Colors.grey,
width: 0.5,
),
Expanded(
child: DecoratedBox(
decoration: BoxDecoration(
//todo
),
child: IconButton(
icon: Icon(Icons.people, color: Colors.grey),
onPressed: () {
//todo
}),
),
),
VerticalDivider(
color: Colors.grey,
width: 0.5,
),
Expanded(
child: DecoratedBox(
decoration: BoxDecoration(
//todo
),
child: IconButton(
icon: Icon(Icons.menu, color: Colors.grey),
onPressed: () {
//todo
}),
),
),
]),
),
),
centerTitle: true,
actions: [
IconButton(
icon: Icon(Icons.menu, color: Colors.grey),
onPressed: () {
//todo
}),
]),
body: MyWidget(),
),

Dialog with top gravity and overlay line in flutter

Trying to make this UI, unable to set gravity or position on dialog. I don't have any idea to make overlay doted line.
class DashboardScreen extends StatefulWidget {
#override
_DashboardScreenState createState() => _DashboardScreenState();
}
class _DashboardScreenState extends State<DashboardScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
body:Container(),
appBar: AppBar(centerTitle: false,
automaticallyImplyLeading: false,
backgroundColor: Colors.white,
elevation: 0,
title: Text(
"Inventory",
textScaleFactor: 1.3,
style: TextStyle(color: Colors.black87, fontFamily: "light"),
),
actions: [
IconButton(
onPressed: (){},
color: Colors.black,
icon: ImageIcon(
AssetImage('assets/images/camera_outline.png'),
size:50,
),
),
IconButton(
onPressed: (){},
color: Colors.black,
icon: ImageIcon(
AssetImage('assets/images/camera_outline.png'),
size:50,
),
),
IconButton(
onPressed: (){
// openAlertBox();
showDialog(context: context,
builder: (_) =>Dialog(
backgroundColor: Colors.transparent,
insetPadding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
Container(
width: double.infinity,
height: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white
),
padding: EdgeInsets.fromLTRB(20, 50, 20, 20),
child: Text("You can make cool stuff!",
style: TextStyle(fontSize: 24),
textAlign: TextAlign.center
),
),
],
)
));
},
color: Colors.black,
icon: ImageIcon(
AssetImage('assets/images/camera_outline.png'),
size:50,
),
)
],
),
);
}
}
How it is looking.

How to align text left inside a button, which is inside a centre widget | Flutter?

my buttons are must be on center but must aligned in same line ,
the text in side button also should aligned left.
for that i use textalign left but not works in my code , I dont know why.This is my layout screenshot.
So Can anyone modify my code so that the text inside button aligned left ,without affecting my buttons position .
Thank you
class Something extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Solve Before Downvote !'),
),
body: Container(
color: Color(0xff263238),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SingleChildScrollView(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MaterialButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
padding: EdgeInsets.only(left: 5),
color: Colors.green,
onPressed: () {},
child: Text('SomeThing', textAlign: TextAlign.left),
),
MaterialButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
color: Colors.green,
onPressed: () { },
child: Text('Nothing', textAlign: TextAlign.left),
),
MaterialButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
color: Colors.green,
onPressed: () {},
child: Text('Can You do something ?',
textAlign: TextAlign.left),
),
MaterialButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
color: Colors.green,
onPressed: () {},
child: Text('Nothing to do !', textAlign: TextAlign.left),
),
],
),
),
)
],
),
),
);
}
}
what i made

Please check the below code. I have comment out the solution in code.
class Something extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Solve Before Downvote !'),
),
body: Container(
width: MediaQuery.of(context).size.width,
color: Color(0xff263238),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SingleChildScrollView(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(2.0),
child: Material(
color: Colors.green,
borderRadius: BorderRadius.circular(10.0),
child: InkWell(
onTap: () {
setState(() {
abc = true;
});
},
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 12, 15, 12),
child: Text('SomeThing', textAlign: TextAlign.left),
),
),
),
),
Padding(
padding: const EdgeInsets.all(2.0),
child: Material(
color: Colors.green,
borderRadius: BorderRadius.circular(10.0),
child: InkWell(
onTap: () {
setState(() {
abc = true;
});
},
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 12, 15, 12),
child: Text('Nothing', textAlign: TextAlign.left),
),
),
),
),
Padding(
padding: const EdgeInsets.all(2.0),
child: Material(
color: Colors.green,
borderRadius: BorderRadius.circular(10.0),
child: InkWell(
onTap: () {
setState(() {
abc = true;
});
},
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 12, 15, 12),
child: Text('Can You do something ?',
textAlign: TextAlign.left),
),
),
),
),
Padding(
padding: const EdgeInsets.all(2.0),
child: Material(
color: Colors.green,
borderRadius: BorderRadius.circular(10.0),
child: InkWell(
onTap: () {
setState(() {
abc = true;
});
},
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 12, 15, 12),
child: Text('Nothing to do !',
textAlign: TextAlign.left),
),
),
),
),
],
),
),
)
],
),
),
);
}
}

Can you add Align() and set alignment : Alignment.centerLeft before widget child text

Flutter dropdown menu with ListTiles and row of Buttons

I'm trying to build out a custom dropdown menu that looks like this:
I've managed to implement the ListTiles and Row of Buttons without the dropdown, but I'm not sure how to nest all of that within a dropdown menu class. This is what I've got so far:
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer(),
body: SizedBox.expand(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[0]),
title: Text('All Circles'),
),
Divider(color: Colors.grey.shade400, indent: 72.0, height: 1.0),
ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[1]),
title: Text('Pickup'),
),
Divider(color: Colors.grey.shade400, indent: 72.0, height: 1.0),
ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[2]),
title: Text('Kappa Delta'),
),
Divider(color: Colors.grey.shade400, indent: 72.0, height: 1.0),
ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[3]),
title: Text('Ok Boomer'),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text("Join a Circle"),
color: Color(0xffb74093),
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red),
),
),
RaisedButton(
child: Text("Create a Circle"),
color: Colors.red,
textColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red),
),
),
],
),
],
),
),
),
);
}
}

I'm not sure you can use ListTile after the items: directly.
If you did run the code above, you're getting errors.
it needs to return DropdownMenuItem instead of ListTile directly
return DropdownMenuItem<String>(
value: value,
child: Row(
children: <Widget>[
CircleAvatar(backgroundColor: Colors.primaries[3]),
Text(value)
],
));
I think the above code would be relatively correct.

this is very simple first create a drop-down menu widget and then give your widget to a drop-down menu item
like this
give value to each drop-down item according to your objects array
DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: TextStyle(
color: Colors.deepPurple
),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return ListTile(
onTap: () {},
leading: CircleAvatar(backgroundColor: Colors.primaries[0]),
title: Text(value),
);
})
.toList(),
);