How to bottom align Button in the popup? - flutter

How to bottom align button in the popup ?
here is my tried code, but its giving some space from bottom.
I have used listview to build up popup
onPressed: () {
// Navigator.of(context).pushNamed(homePageTag);
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
content: Form(
key: _formKey,
child: ListView(
shrinkWrap: true,//This tells items to be put in center
children: <Widget>[
FlatButton(
//padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
color: appGreenColor,
child: Text("UPDATE", style: TextStyle(color: Colors.white)),
onPressed: () {
},
),
],
),
),
);
});
},
Looking for this- https://ibb.co/19k2ty7
& getting this - https://ibb.co/h7KwXbn

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
Color myColor = Color(0xff00bfa5);
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Rounde Alert Box",
home: Scaffold(
appBar: AppBar(
backgroundColor: myColor,
title: Text("Rounded Alert Box"),
),
body: RoundedAlertBox(),
),
);
}
}
class RoundedAlertBox extends StatefulWidget {
#override
_RoundedAlertBoxState createState() => _RoundedAlertBoxState();
}
class _RoundedAlertBoxState extends State<RoundedAlertBox> {
#override
Widget build(BuildContext context) {
return Center(
child: RaisedButton(
onPressed: openAlertBox,
color: myColor,
child: Text(
"Open Alert Box",
style: TextStyle(color: Colors.white),
),
),
);
}
openAlertBox() {
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0))),
contentPadding: EdgeInsets.only(top: 10.0),
content: Container(
width: 300.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
"Rate",
style: TextStyle(fontSize: 24.0),
),
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
],
),
],
),
SizedBox(
height: 5.0,
),
Divider(
color: Colors.grey,
height: 4.0,
),
Padding(
padding: EdgeInsets.only(left: 30.0, right: 30.0),
child: TextField(
decoration: InputDecoration(
hintText: "Add Review",
border: InputBorder.none,
),
maxLines: 8,
),
),
InkWell(
child: Container(
padding: EdgeInsets.only(top: 20.0, bottom: 20.0),
decoration: BoxDecoration(
color: myColor,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(32.0),
bottomRight: Radius.circular(32.0)),
),
child: Text(
"Rate Product",
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
),
),
],
),
),
);
});
}
}

Related

onPressed widget does not working,when ever i click on any view it does not show any splash action,in flutter

i want to apply onTap or onpressed widget to below listview items and icons. please help me to sort out this problem. onPressed widget does not working, when ever I click on any view item it does not show any splash action, what to do please help me.i want to apply onTap or onpressed widget to below listview items and icons. please help me to sort out this problem. onPressed widget does not working, when ever I click on any view item it does not show any splash action, what to do please help me.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'screen_two.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Screens",
theme: ThemeData(primarySwatch: Colors.red),
home: LocationApp(),
);
}
}
class LocationApp extends StatefulWidget {
#override
_LocationAppState createState() => _LocationAppState();
}
class _LocationAppState extends State<LocationApp> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height,
maxWidth: MediaQuery.of(context).size.width,
),
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54.withOpacity(0.1),
offset: Offset(15.0, 20.0),
blurRadius: 20.0,
)
],
color: Colors.red.withOpacity(0.8),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(15.0),
child: Icon(
Icons.settings,
color: Colors.white,
),
),
Expanded(
flex: 4,
child: Padding(
padding: const EdgeInsets.only(left: 131.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 70.0, bottom: 30.0),
child: Container(
width: 130.0,
height: 130.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/she.png'),
fit: BoxFit.fill,
),
borderRadius:
BorderRadius.all(Radius.circular(100.0)),
border: Border.all(
color: Colors.white,
width: 4.0,
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Text(
"Alisa",
style: TextStyle(fontSize: 30.0, color: Colors.white),
),
),
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Text(
"22 want | 35 done",
style: TextStyle(fontSize: 17.0, color: Colors.white),
),
),
],
),
),
),
Expanded(
flex: 4,
child: Container(
decoration: BoxDecoration(color: Colors.white),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Column(
children: [
CustomTile(
Icon(
Icons.chat_bubble_outline,
color: Colors.orangeAccent,
),
"Order",
() => {},
),
CustomTile(
Icon(
Icons.trip_origin_outlined,
color: Colors.pink,
),
"Like",
() => {},
),
CustomTile(
Icon(
Icons.star,
color: Colors.orange,
),
"Comment",
() {},
),
CustomTile(
Icon(
Icons.android_rounded,
color: Colors.pink,
),
"Download",
() => {},
),
CustomTile(
Icon(
Icons.zoom_out_sharp,
color: Colors.green,
),
"Edit",
() {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Secondscreen()));
},
),
],
),
),
Container(
height: 70,
color: Colors.black26.withOpacity(0.1),
),
Padding(
padding: const EdgeInsets.only(
top: 0.0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
children: [
IconButton(
iconSize: 25.0,
icon: const Icon(
Icons.add_chart,
),
onPressed: () {
setState(() {});
},
),
Text('TIPS',
style: TextStyle(
color: Colors.orange, fontSize: 10)),
],
),
Column(
children: [
IconButton(
iconSize: 25.0,
icon: const Icon(
Icons.home,
),
tooltip: '',
),
Text(
'Home',
style: TextStyle(fontSize: 10),
),
],
),
Column(
children: [
IconButton(
iconSize: 25.0,
icon: const Icon(Icons.person,
color: Colors.red),
onPressed: () {},
tooltip: '',
),
Text('Profile',
style: TextStyle(
color: Colors.red, fontSize: 10)),
],
)
],
),
)
],
),
),
)
],
),
),
),
);
}
}
class CustomTile extends StatelessWidget {
Icon icon;
String text;
Function onTap;
CustomTile(this.icon, this.text, this.onTap);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(8.0, 0, 8.0, 0),
child: Container(
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey.shade400))),
child: InkWell(
splashColor: Colors.orangeAccent,
onTap: onTap,
child: Container(
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
icon,
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
text,
style: TextStyle(fontSize: 16.0),
),
)
],
),
Icon(Icons.arrow_right)
],
),
),
),
),
);
}
}
//class CustomTile extends StatelessWidget {
// Icon icon;
// String text;
// Function onTap;
// String news;
//
// CustomTile(this.icon, this.text, this.onTap, this.news);
//
// #override
// Widget build(BuildContext context) {
// return Container(
// decoration: BoxDecoration(
// border:
// Border(bottom: BorderSide(color: Colors.grey.withOpacity(0.4)))),
// child: InkWell(
// splashColor: Colors.orangeAccent,
// onTap: onTap,
// child: Container(
// height: 50,
// child: Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// children: <Widget>[
// Row(
// children: <Widget>[
// icon,
// Padding(
// padding: const EdgeInsets.all(8.0),
// child: Text(
// text,
// style: TextStyle(fontSize: 16.0),
// ),
// )
// ],
// ),
// Padding(
// padding: const EdgeInsets.only(left: 240.0),
// child: Text(
// news,
// style: TextStyle(fontSize: 17, color: Colors.red),
// ),
// ),
// Icon(Icons.chevron_right)
// ],
// ),
// ),
// ),
// );
// }
//}
According to the documentation of the Inkwell widget, an ancestor of this widget must be Material widget. By adding Material as a parent widget of your CustomTile, it will show you the colors. I also changed the onTap attribute to ()=>onTap() so that your function is triggered.
This code should work like you want:
class CustomTile extends StatelessWidget {
Icon icon;
String text;
Function onTap;
CustomTile(this.icon, this.text, this.onTap);
#override
Widget build(BuildContext context) {
return Material(
child: Padding(
padding: const EdgeInsets.fromLTRB(8.0, 0, 8.0, 0),
child: Container(
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey.shade400))),
child: InkWell(
splashColor: Colors.orangeAccent,
onTap: ()=>onTap(),
child: Container(
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
icon,
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
text,
style: TextStyle(fontSize: 16.0),
),
)
],
),
Icon(Icons.arrow_right)
],
),
),
),
),
),
);
}
}
The InkWell in your CustomTitle class must have a Material ancestor to cause ink reactions. So do something like this:
class CustomTile extends StatelessWidget {
final Icon icon;
final String text;
final void Function() onTap;
CustomTile(this.icon, this.text, this.onTap);
#override
Widget build(BuildContext context) {
return Material(child:
Padding(
padding: const EdgeInsets.fromLTRB(8.0, 0, 8.0, 0),
child: Container(...
See InkWell class docs

icon on pressed function isnt working,whenever i click on any icon,i want to show any action there,what to do?

please help me. when ever I clicked on home icon it does not show any action however I applied on pressed function. icon on pressed function is not working, whenever I click on any icon, I want to show any action there, what to do???. I want to show any action there, what to do???. I want to show any action there, what to do???
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'screen_two.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Screens",
theme: ThemeData(primarySwatch: Colors.red),
home: LocationApp(),
);
}
}
class LocationApp extends StatefulWidget {
#override
_LocationAppState createState() => _LocationAppState();
}
class _LocationAppState extends State<LocationApp> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height,
maxWidth: MediaQuery.of(context).size.width,
),
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54.withOpacity(0.1),
offset: Offset(15.0, 20.0),
blurRadius: 20.0,
)
],
color: Colors.red.withOpacity(0.8),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(15.0),
child: Icon(
Icons.settings,
color: Colors.white,
),
),
Expanded(
flex: 4,
child: Padding(
padding: const EdgeInsets.only(left: 131.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 70.0, bottom: 30.0),
child: Container(
width: 130.0,
height: 130.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/she.png'),
fit: BoxFit.fill,
),
borderRadius:
BorderRadius.all(Radius.circular(100.0)),
border: Border.all(
color: Colors.white,
width: 4.0,
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Text(
"Alisa",
style: TextStyle(fontSize: 30.0, color: Colors.white),
),
),
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Text(
"22 want | 35 done",
style: TextStyle(fontSize: 17.0, color: Colors.white),
),
),
],
),
),
),
Expanded(
flex: 4,
child: Container(
decoration: BoxDecoration(color: Colors.white),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Column(
children: [
CustomTile(
Icon(
Icons.chat_bubble_outline,
color: Colors.orangeAccent,
),
"Order",
() => {},
""),
CustomTile(
Icon(
Icons.trip_origin_outlined,
color: Colors.pink,
),
"Like",
() => {},
"new"),
CustomTile(
Icon(
Icons.star,
color: Colors.orange,
),
"Comment",
() {},
""),
CustomTile(
Icon(
Icons.android_rounded,
color: Colors.pink,
),
"Download",
() => {},
""),
CustomTile(
Icon(
Icons.zoom_out_sharp,
color: Colors.green,
),
"Edit", () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Secondscreen()));
}, ""),
],
),
),
Container(
height: 70,
color: Colors.black26.withOpacity(0.1),
),
Padding(
padding: const EdgeInsets.only(
top: 0.0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
children: [
IconButton(
iconSize: 25.0,
icon: const Icon(
Icons.add_chart,
),
onPressed: () {},
),
Text('TIPS',
style: TextStyle(
color: Colors.orange, fontSize: 10)),
],
),
Column(
children: [
IconButton(
iconSize: 25.0,
icon: const Icon(
Icons.home,
),
onPressed: () {
Scaffold.of(context).openDrawer();
print('Menu Icon pressed');
},
),
Text(
'Home',
style: TextStyle(fontSize: 10),
),
],
),
Column(
children: [
IconButton(
iconSize: 25.0,
icon: const Icon(Icons.person,
color: Colors.red),
onPressed: () {},
tooltip: '',
),
Text('Profile',
style: TextStyle(
color: Colors.red, fontSize: 10)),
],
)
],
),
)
],
),
),
)
],
),
),
),
);
}
}
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'screen_two.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Screens",
theme: ThemeData(primarySwatch: Colors.red),
home: LocationApp(),
);
}
}
class LocationApp extends StatefulWidget {
#override
_LocationAppState createState() => _LocationAppState();
}
class _LocationAppState extends State<LocationApp> {
#override
Widget build(BuildContext context) {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
return Scaffold(
key:_scaffoldKey,
body: SingleChildScrollView(
child: Container(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height,
maxWidth: MediaQuery.of(context).size.width,
),
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54.withOpacity(0.1),
offset: Offset(15.0, 20.0),
blurRadius: 20.0,
)
],
color: Colors.red.withOpacity(0.8),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(15.0),
child: Icon(
Icons.settings,
color: Colors.white,
),
),
Expanded(
flex: 4,
child: Padding(
padding: const EdgeInsets.only(left: 131.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 70.0, bottom: 30.0),
child: Container(
width: 130.0,
height: 130.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/she.png'),
fit: BoxFit.fill,
),
borderRadius:
BorderRadius.all(Radius.circular(100.0)),
border: Border.all(
color: Colors.white,
width: 4.0,
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Text(
"Alisa",
style: TextStyle(fontSize: 30.0, color: Colors.white),
),
),
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Text(
"22 want | 35 done",
style: TextStyle(fontSize: 17.0, color: Colors.white),
),
),
],
),
),
),
Expanded(
flex: 4,
child: Container(
decoration: BoxDecoration(color: Colors.white),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Column(
children: [
CustomTile(
Icon(
Icons.chat_bubble_outline,
color: Colors.orangeAccent,
),
"Order",
() => {},
""),
CustomTile(
Icon(
Icons.trip_origin_outlined,
color: Colors.pink,
),
"Like",
() => {},
"new"),
CustomTile(
Icon(
Icons.star,
color: Colors.orange,
),
"Comment",
() {},
""),
CustomTile(
Icon(
Icons.android_rounded,
color: Colors.pink,
),
"Download",
() => {},
""),
CustomTile(
Icon(
Icons.zoom_out_sharp,
color: Colors.green,
),
"Edit", () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Secondscreen()));
}, ""),
],
),
),
Container(
height: 70,
color: Colors.black26.withOpacity(0.1),
),
Padding(
padding: const EdgeInsets.only(
top: 0.0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
children: [
IconButton(
iconSize: 25.0,
icon: const Icon(
Icons.add_chart,
),
onPressed: () {},
),
Text('TIPS',
style: TextStyle(
color: Colors.orange, fontSize: 10)),
],
),
Column(
children: [
IconButton(
iconSize: 25.0,
icon: const Icon(
Icons.home,
),
onPressed: () {
_scaffoldKey.currentState.openDrawer(),
),print('Menu Icon pressed');
},
),
Text(
'Home',
style: TextStyle(fontSize: 10),
),
],
),
Column(
children: [
IconButton(
iconSize: 25.0,
icon: const Icon(Icons.person,
color: Colors.red),
onPressed: () {},
tooltip: '',
),
Text('Profile',
style: TextStyle(
color: Colors.red, fontSize: 10)),
],
)
],
),
)
],
),
),
)
],
),
),
),
);
}
}
Add a scaffold key
Then use the key to open the drawer
First, check if your print msg print on the terminal or log while pressing on IconButton
Like this code,
IconButton(
iconSize: 25.0,
icon: const Icon(Icons.home),
onPressed: () {
print('Menu Icon pressed');
},
),
The below code will help you to Open drawer,
declare and define scaffold key then also define drawer,
I hope the below code will help you, keep Fluttering :)
import 'package:flutter/material.dart';
class OpenDrawer extends StatefulWidget {
const OpenDrawer({Key key}) : super(key: key);
#override
_OpenDrawerState createState() => _OpenDrawerState();
}
class _OpenDrawerState extends State<OpenDrawer> {
GlobalKey<ScaffoldState> globalKey = GlobalKey();
#override
Widget build(BuildContext context) {
return Scaffold(
key: globalKey,
drawer: Drawer(child: YourDrawerWidget()),
body: Column(
children: [
IconButton(
iconSize: 25.0,
icon: const Icon(
Icons.home,
),
onPressed: () {
globalKey.currentState.openDrawer();
print('Menu Icon pressed');
},
),
Text(
'Home',
style: TextStyle(fontSize: 10),
),
],
),
);
}
}

Flutter Dart Bottomsheet error context = context

I hope somebody can help me solve this error;
I used this showModalBottomSheet Widget already, and just tried to implement the structure onto a new site. The error I get and just don't understand in the BottomSheet has something to do with " context = context, " . Do I have to iplement the void funktion somwhere else or should I create a new class that is extending the Header class? Can somebody please help me?
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: ListView(
children: <Widget>[
Header(),
//SelectOption(),
//Chats(),
//MoodsDetector(),
//NextUp(),
//PostFeed(),
],
),
);
}
}
class Header extends StatelessWidget {
const Header({
Key key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.fromLTRB(25, 50, 50, 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Welcome back,',
style: TextStyle(color: secondColor, fontSize: 20),
),
Text(
'Henri',
style: TextStyle(color: mainColor, fontSize: 30),
),
],
),
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
boxShadow: [
BoxShadow(color: secondColor.withOpacity(0.5), blurRadius: 20),
],
),
child: new IconButton(
icon: new Icon(Icons.search),
highlightColor: Colors.pink,
onPressed: _showSearch,
),
),
],
),
);
}
void _showSearch(){
showModalBottomSheet(
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(topRight: Radius.circular(30.0),topLeft: Radius.circular(30.0))
),
isScrollControlled: true,
isDismissible: true,
context: context,
builder: (builder) {
return SingleChildScrollView(
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
SingleChildScrollView(
padding: const EdgeInsets.all(15.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Card(
elevation: 8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
color: Colors.green,
child: ListTile(
onTap: () {
//open edit profile
},
title: Text(
"Rate your Friendship",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
leading: CircleAvatar(
backgroundImage: AssetImage("assets/images/HenriKlein.jpeg"),
),
trailing: Icon(
Icons.star,
color: Colors.white,
),
),
),
const SizedBox(height:10.0),
Card(
elevation: 4.0,
margin: const EdgeInsets.fromLTRB(32.0, 8.0, 32.0, 16.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
child: Column(
children: <Widget>[
ListTile(
leading: Icon(
Icons.people_outline,
color: Colors.lightGreen,
),
title: Text("Invite to event"),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () {
},
),
sizedBox,
ListTile(
leading: Icon(
Icons.directions_run,
color: Colors.lightGreen,
),
title: Text("Challange Henri"),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () {},
),
sizedBox,
ListTile(
leading: Icon(
Icons.phone_iphone,
color: Colors.lightGreen,
),
title: Text("Text/Call Henri"),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () { },
),
sizedBox,
ListTile(
leading: Icon(
Icons.lock_outline,
color: Colors.lightGreen,
),
title: Text("Delete Friend"),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () {},
),
],
),
),
const SizedBox(height: 5.0),
Center(
child: Text(
"Friens since 09/20/2019",
style: TextStyle(
fontSize: 15.0,
),
textAlign: TextAlign.center,
),
),
SizedBox(height: 20.0),
Container(
height: 40.0,
child: GestureDetector(
onTap: () {
},
child: Material(
borderRadius: BorderRadius.circular(50.0),
shadowColor: Colors.black,
color: Colors.green,
elevation: 7.0,
child: Center(
child: Text(
'27 mutural friends', //Login Button
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat'),
),
),
),
),
),
],
),
),
],
),
],
),
);
});
}
}
You are getting the error because context is not defined in _showSearch.
You should modify the function definition and add context as a parameter as follows:
void _showSearch(BuildContext context) {
...
And when you are calling, you must pass context of the widget from where you are calling it, as follows:
child: new IconButton(
icon: new Icon(Icons.search),
highlightColor: Colors.pink,
onPressed: () {
_showSearch(context); //here
},
),

Navigator.push() shows a Black Screen

I am trying to make a fruithero flutter app but while changing my main page to another page, It shows only a black screen on my android emulator in laptop and on my phone, but in https://flutlab.io/ it shows perfectly, What is the problem that the app is not working on local emulator or in my phone but working on online IDE
Showing an Eror like this: -
There are multiple heroes that share the same tag within a subtree.
main.dart
import 'package:flutter/material.dart';
import './detailsPage.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF21BFBD),
body: ListView(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 15.0, left: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.arrow_back_ios),
color: Colors.white,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailsPage(),
),
);
},
),
Container(
width: 125.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.filter_list),
color: Colors.white,
onPressed: () {},
),
IconButton(
icon: Icon(Icons.menu),
color: Colors.white,
onPressed: () {},
),
],
),
),
],
),
),
SizedBox(
height: 25.0,
),
Padding(
padding: EdgeInsets.only(left: 40.0),
child: Row(
children: <Widget>[
Text(
'Healthy',
style: TextStyle(
fontFamily: 'Mont',
color: Colors.white,
fontSize: 25.0,
fontWeight: FontWeight.bold),
),
SizedBox(width: 10.0),
Text(
'Food',
style: TextStyle(
fontFamily: 'Mont', color: Colors.white, fontSize: 25.0),
),
],
),
),
SizedBox(
height: 40.0,
),
Container(
height: MediaQuery.of(context).size.height - 185.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.only(topLeft: Radius.circular(75.0))),
child: ListView(
primary: false,
padding: EdgeInsets.only(left: 25.0, right: 20.0),
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 45.0),
child: Container(
height: MediaQuery.of(context).size.height / 1.68,
child: ListView(
children: <Widget>[
_buildFoodItem('images/one.png', 'Salmon', '\$24.0'),
_buildFoodItem('images/two.png', 'Spring', '\$22.0'),
_buildFoodItem('images/three.png', 'Sprite', '\$34.0'),
_buildFoodItem('images/one.png', 'Mut', '\$12.0')
],
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
height: 65.0,
width: MediaQuery.of(context).size.width / 6,
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey,
style: BorderStyle.solid,
width: 1.0,
),
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Icon(
Icons.search,
color: Colors.black,
),
),
),
Container(
height: 65.0,
width: MediaQuery.of(context).size.width / 6,
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey,
style: BorderStyle.solid,
width: 1.0,
),
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Icon(
Icons.shopping_cart,
color: Colors.black,
),
),
),
Container(
height: 65.0,
width: MediaQuery.of(context).size.width / 2,
decoration: BoxDecoration(
color: Color(0xff170F1F),
border: Border.all(
color: Colors.grey,
style: BorderStyle.solid,
width: 1.0,
),
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Text(
'Checkout',
style: TextStyle(
fontSize: 18.0,
color: Colors.white,
fontFamily: 'Mont',
),
)),
),
],
),
],
),
),
],
),
);
}
Widget _buildFoodItem(String imgPath, String foodName, String price) {
return Padding(
padding: EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0),
child: InkWell(
onTap: () {
Navigator.push( //Here is the Navigator.push()
context,
MaterialPageRoute(builder: (BuildContext context) {
return DetailsPage();
}),
);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Row(
children: [
Hero(
tag: imgPath,
child: Image(
image: AssetImage(imgPath),
fit: BoxFit.cover,
height: 75.0,
width: 75.0,
),
),
SizedBox(width: 10.0),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
foodName,
style: TextStyle(
fontFamily: 'Mont',
fontSize: 17.0,
fontWeight: FontWeight.bold),
),
Text(
price,
style: TextStyle(
fontFamily: 'Mont',
fontSize: 15.0,
color: Colors.grey),
)
],
),
],
),
),
IconButton(
icon: Icon(Icons.add),
color: Colors.black,
onPressed: () {},
),
],
),
),
);
}
}
Navigator.push code is like this:
Navigator.push(
context,
MaterialPageRoute(builder: (BuildContext context) {
return DetailsPage();
}),
);
detailsPage.dart
import 'package:flutter/material.dart';
class DetailsPage extends StatefulWidget {
#override
_DetailsPageState createState() => _DetailsPageState();
}
class _DetailsPageState extends State<DetailsPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF7A9BEE),
appBar: AppBar(
leading: IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: Icon(Icons.arrow_back_ios),
color: Colors.white,
),
backgroundColor: Colors.transparent,
elevation: 0.0,
title: Text(
'Details',
style: TextStyle(
fontFamily: 'Mont',
fontSize: 18.0,
color: Colors.white,
),
),
centerTitle: true,
actions: <Widget>[
IconButton(
icon: Icon(Icons.more_horiz),
onPressed: () {},
color: Colors.white,
),
],
),
);
}
}
Here is git Repository link: 1
i dont see the hero widget in the detailsPage.dart, when you set up a Hero widget in main and Navigate to detailsPage, you have to set up a hero widget to receive a hero transition from the main page, and because you have a listView in main you have to give a dynamic tag to each list item because each hero must have a tag associated with it so when it transfer to different layout it knows which hero to transit to it,
you already set up a hero tag in main page and you already give it a tag as tag: imgPath
tag is like an id for that hero, now you need to set the same tag (id) in the detailsPage,
please watch this to understand the logic Hero Flutter Widget
You should use Hero Widgets on both screens.
I couldn't find the Hero widget, nor the tag and not the image that you used on your first screen too (AssetImage(imgPath))
Try and parameterize using the propoer Hero specs.
Here you can find an good example and instructions: Flutter example

Custom Button in Flutter

What I am trying to achieve is below:
Should I be using Row with Icon and Text?
Here is my code and its output
RaisedButton(
elevation: 10,
onPressed: () {},
color: Colors.white,
child: Padding(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 55,
color: Colors.deepPurple,
child: Icon(
Icons.settings,
color: Colors.white,
),
),
Text(
'Settings',
style: TextStyle(
fontSize: 25,
),
),
],
),
),
);
OUTPUT:
Any help would be appreciated.
Here you go
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light(), //.copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
get borderRadius => BorderRadius.circular(8.0);
#override
Widget build(BuildContext context) {
return Center(
child: Material(
elevation: 10,
borderRadius: borderRadius,
child: InkWell(
onTap: () {},
child: Container(
padding: EdgeInsets.all(0.0),
height: 60.0,//MediaQuery.of(context).size.width * .08,
width: 220.0,//MediaQuery.of(context).size.width * .3,
decoration: BoxDecoration(
borderRadius: borderRadius,
),
child: Row(
children: <Widget>[
LayoutBuilder(builder: (context, constraints) {
print(constraints);
return Container(
height: constraints.maxHeight,
width: constraints.maxHeight,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: borderRadius,
),
child: Icon(
Icons.settings,
color: Colors.white,
),
);
}),
Expanded(
child: Text(
'Settings',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25,
),
),
),
],
),
),
),
),
);
}
}
John Joe's answer is correct. Here is another solution that does the same with plain Container widget. I am posting it here just in case someone interested.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.white),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(8.0),
child: MyWidget(),
),
],
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SizedBox(
height: 48.0,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
boxShadow: [
BoxShadow(
color: Colors.grey,
offset: Offset(1.0, 2.0),
blurRadius: 8.0,
spreadRadius: 2.0)
]),
child: Stack(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 48.0,
height: 48.0,
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
),
child: Align(
alignment: Alignment.center,
child: Icon(Icons.settings))),
Expanded(
child: Center(
child: Text("Hellow world",
style: Theme.of(context)
.textTheme
.headline6
.copyWith(color: Colors.black)),
)),
],
),
SizedBox.expand(
child: Material(
type: MaterialType.transparency,
child: InkWell(onTap: () {}),
),
),
],
),
),
);
}
}
See the live demo here.
You can use Column and Row.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: EdgeInsets.all(10),
child: Column(
children: <Widget>[
_firstWidget(),
SizedBox(height: 15),
_secondWidget(),
],
)),
);
}
Widget _firstWidget() {
return InkWell(
onTap: () {},
child: Card(
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
elevation: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
height: 55,
width: 30,
decoration: myBoxDecoration(),
child: Icon(
Icons.settings,
color: Colors.white,
),
)),
Expanded(
flex: 3,
child: Padding(
padding: EdgeInsets.only(left: 15),
child: Text(
'Programs & Services',
style: TextStyle(
fontSize: 25,
),
))),
],
),
));
}
Widget _secondWidget() {
return InkWell(
onTap: () {},
child: Card(
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
elevation: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
decoration: myBoxDecoration(),
height: 55,
width: 30,
child: Icon(
Icons.settings,
color: Colors.white,
),
)),
Expanded(
flex: 3,
child: Padding(
padding: EdgeInsets.only(left: 15),
child: Text(
'Settings',
style: TextStyle(
fontSize: 25,
),
))),
],
),
));
}
BoxDecoration myBoxDecoration() {
return BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.all(
Radius.circular(5.0) // <--- border radius here
),
);
}
Output
Darish's answer seems to me the best, since the splash is displayed on top of everything and makes a very good visual effect.
Even so, since the answer is from so long ago, I wanted to put here the updated code to NullSafety and also correct some bugs and remove unnecessary things.
For the rest it is perfect.
Here my code:
class MyWidget extends StatelessWidget {
const MyWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8.0),
boxShadow: const [
BoxShadow(
color: Colors.grey,
offset: Offset(1.0, 2.0),
blurRadius: 8.0,
spreadRadius: 2.0,
)
],
),
child: SizedBox(
height: 48,
child: Stack(
children: [
Row(
children: <Widget>[
Container(
width: 48.0,
height: 48.0,
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.circular(8),
),
child: const Center(
child: Icon(Icons.settings, color: Colors.white),
),
),
const Expanded(
child: Center(
child: Text("Hellow world"),
),
),
],
),
Material(
type: MaterialType.transparency,
child: InkWell(
onTap: () {},
borderRadius: BorderRadius.circular(8.0),
),
),
],
),
),
);
}
}