Related
I need to add 3 buttons at the bottom, all buttons need in one row top of the body content
I need to add 3 buttons at the bottom of app
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('WinLife'),
elevation: 10,
backgroundColor: const Color(0XFF82B58D),
leading: Container(
padding: EdgeInsets.all(5),
child: Image.asset('assets/images/logo/WinLife.png'),
),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.favorite,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.settings,
color: Colors.white,
),
onPressed: () {},
)
],
),
body: ListView.builder(
itemBuilder: (BuildContext ctx, int index) {
return Padding(
padding: EdgeInsets.all(10),
child: Card(
shadowColor: const Color(0XFF82B58D),
shape: Border.all(
color: const Color(0XFF82B58D),
width: 2,
),
elevation: 50,
color: const Color(0XFF82B58D),
child: Column(
children: <Widget>[
Image.asset(imgList[index]),
SizedBox(
height: 200,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: const <Widget>[
Icon(
Icons.favorite,
color: Colors.white,
size: 25,
),
Icon(
Icons.download,
color: Colors.white,
size: 25,
),
Icon(
Icons.share,
color: Colors.white,
size: 25,
),
],
),
],
),
),
);
},
itemCount: imgList.length,
),
);
}
There is a property called persistentFooterButtons in scaffold widget. It is using to show widgets to the screen footer. you can add any type of widgets inside to that. below some example code with output image FYR
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('WinLife'),
elevation: 10,
backgroundColor: const Color(0XFF82B58D),
leading: Container(
padding: const EdgeInsets.all(5),
child: Image.asset('assets/images/logo/WinLife.png'),
),
actions: <Widget>[
IconButton(
icon: const Icon(
Icons.favorite,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: const Icon(
Icons.settings,
color: Colors.white,
),
onPressed: () {},
)
],
),
body: Container(),
persistentFooterButtons: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
persistentFooterButtonWidget(),
persistentFooterButtonWidget(),
persistentFooterButtonWidget(),
],
),
],
);
}
persistentFooterButtonWidget() {
return OutlinedButton.icon(
label: const Text("Book now", style: TextStyle(color: Colors.black)),
onPressed: () {},
icon: const Icon(Icons.library_add_check_sharp, color: Colors.black, size: 20.0),
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
const Size(170.0, 40.0),
),
shape: MaterialStateProperty.all(RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
)),
side: MaterialStateProperty.all(
BorderSide(color: Colors.orange.shade200, width: 2)),
overlayColor: MaterialStateProperty.resolveWith<Color?>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.hovered)) {
return Colors.orange.shade200;
}
if (states.contains(MaterialState.pressed)) {
return Colors.orange.shade200;
}
return null; // Defer to the widget's default.
}),
),
);
}
I can see my data on Flutter Databese, but it disappears on the loading screen. It appears and disappears at first, what is the reason, how can I solve this problem ?
When I press the product group, the data appears at first, but then it disappears.
import 'package:flutter/material.dart';
import 'package:warehouse_management/models/product.dart';
import 'package:warehouse_management/screens/new_product_page.dart';
import 'package:warehouse_management/screens/search_product_in_group.dart';
import 'package:warehouse_management/utils/color_palette.dart';
import 'package:warehouse_management/widgets/product_card.dart';
class ProductGroupPage extends StatelessWidget {
final String? name;
ProductGroupPage({Key? key, this.name}) : super(key: key);
final FirebaseFirestore _firestore = FirebaseFirestore.instance;
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: Padding(
padding: const EdgeInsets.only(
bottom: 10,
right: 10,
),
child: FloatingActionButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return NewProductPage(
group: name,
);
},
),
);
},
splashColor: ColorPalette.bondyBlue,
backgroundColor: ColorPalette.pacificBlue,
child: const Icon(
Icons.add,
color: ColorPalette.white,
),
),
),
body: Container(
color: ColorPalette.pacificBlue,
child: SafeArea(
child: Container(
color: ColorPalette.aquaHaze,
height: double.infinity,
width: double.infinity,
child: Column(
children: [
Container(
padding: const EdgeInsets.only(
top: 10,
left: 10,
right: 15,
),
width: double.infinity,
height: 90,
decoration: const BoxDecoration(
color: ColorPalette.pacificBlue,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(16),
bottomRight: Radius.circular(16),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
IconButton(
icon: const Icon(
Icons.chevron_left_rounded,
size: 35,
),
onPressed: () {
Navigator.of(context).pop();
},
),
Text(
name!.length > 14
? '${name!.substring(0, 12)}..'
: name!,
style: const TextStyle(
fontFamily: "Nunito",
fontSize: 28,
color: ColorPalette.timberGreen,
),
),
],
),
Row(
children: [
IconButton(
splashColor: ColorPalette.timberGreen,
icon: const Icon(
Icons.search,
color: ColorPalette.timberGreen,
),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) =>
SearchProductInGroupPage(
name: name,
),
),
);
},
),
IconButton(
icon: const Icon(
Icons.delete,
color: ColorPalette.timberGreen,
),
onPressed: () {
//TODO
},
),
],
)
],
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: SizedBox(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: const [
SizedBox(
height: 20,
),
],
),
const Text(
"Ürünler",
style: TextStyle(
color: ColorPalette.timberGreen,
fontSize: 20,
fontFamily: "Nunito",
),
),
const SizedBox(height: 20),
Expanded(
child: StreamBuilder(
stream: _firestore
.collection("products")
.where("group", isEqualTo: name)
.orderBy('name')
.snapshots(),
builder: (
BuildContext context,
AsyncSnapshot<
QuerySnapshot<Map<String, dynamic>>>
snapshot,
) {
if (!snapshot.hasData) {
return const Center(
child: SizedBox(
height: 40,
width: 40,
child: CircularProgressIndicator(
color: Colors.black,
),
),
);
}
return ListView.builder(
itemCount: snapshot.data!.docs.length,
itemBuilder:
(BuildContext context, int index) {
return ProductCard(
product: Product.fromMap(
snapshot.data!.docs[index].data(),
),
docID: snapshot.data!.docs[index].id,
);
},
);
},
),
),
],
),
),
),
),
],
),
),
),
),
);
}
}
You can also find the fields I created for Firebase in the appendix.
When I click on the first field on the previous page, my data appears and then disappears.
Then, after 1 second, my data disappears, it appears on firebase, but not on the screen.
<meta-data
android:name="io.flutter.embedding.android.SplashScreenDrawable"
android:resource="#drawable/launch_background"
/>
The solution is to remove the above code.
I am trying to achieve a UI in which there are 2 buttons in the center and then afterwards there are 2 rows at the bottom of the screen fixed respective to screen sizes I will stay at its place, but I'm unable to do it in my case I'm using Column and all the other containers and rows are in it.
Desired Result on emulator is fine
What I am getting in real device
Here is the code.
class IntroPage extends StatelessWidget {
const IntroPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF29F76),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Image.asset(
"assets/intropage.png",
fit: BoxFit.fill,
),
Padding(
padding: const EdgeInsets.only(
top: 550,
),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignUpPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign Up",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 650,
),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignInPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign In",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Color(0xFFFE6B01)),
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 750,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 2,
width: 150,
color: Colors.white,
),
const Text(
" Please Read ",
style: TextStyle(color: Colors.white),
),
Container(
height: 2,
width: 150,
color: Colors.white,
),
],
),
),
Padding(
padding: const EdgeInsets.only(
top: 760,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
TermsandConditions()));
},
child: const Text(
"Terms & Conditions",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
Padding(
padding: const EdgeInsets.only(right: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PrivacyPolicy()));
},
child: const Text(
"Privacy Policy",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
],
),
),
],
)
],
),
),
);
}
}
Use this method its will do the job. Background image will appear and you can align your widgets using the Alignment property
class IntroPage extends StatelessWidget {
const IntroPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: AssetImage(
'assets/intropage.png',
),
)),
child: Scaffold(
backgroundColor: Colors.transparent,
body: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.only(top: 250.0),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignUpPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign Up",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
),
),
),
),
),
Align(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.only(top: 500.0),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignInPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign In",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Color(0xFFFE6B01)),
),
),
),
),
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(bottom: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 2,
width: 150,
color: Colors.white,
),
const Text(
" Please Read ",
style: TextStyle(color: Colors.white),
),
Container(
height: 2,
width: 150,
color: Colors.white,
),
],
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TermsandConditions()));
},
child: const Text(
"Terms & Conditions",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
Padding(
padding: const EdgeInsets.only(right: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PrivacyPolicy()));
},
child: const Text(
"Privacy Policy",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
],
),
),
],
)),
);
}
}
Try to wrap your widgets inside
Positioned(
Align(
alignment: Alignment.bottomCenter,
child: _your_widget_here()
It's not recommanded to use fix value for the layout.
Stack here it's not necessary.
A simple Spacer Widget can the work. But there are multiple way to do it.
import 'package:flutter/material.dart';
class IntroPage extends StatelessWidget {
const IntroPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF29F76),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Image.asset(
"assets/intropage.png",
fit: BoxFit.fitWidth,
),
const Spacer(),
Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignUpPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign Up",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignInPage()));
},
child: Container(
width: 180,
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.white,
),
borderRadius:
const BorderRadius.all(Radius.circular(40))),
child: const Center(
child: Text(
"Sign In",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Color(0xFFFE6B01)),
),
),
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 2,
width: 150,
color: Colors.white,
),
const Text(
" Please Read ",
style: TextStyle(color: Colors.white),
),
Container(
height: 2,
width: 150,
color: Colors.white,
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
TermsandConditions()));
},
child: const Text(
"Terms & Conditions",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
Padding(
padding: const EdgeInsets.only(right: 20, top: 6),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PrivacyPolicy()));
},
child: const Text(
"Privacy Policy",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
),
],
),
],
),
),
);
}
}
If you can use standard buttons, use them. I used ElevatedButton with custom styles, so please check it.
In general it is a bad idea to add accumulated top padding to each element. Screens sizes are different and your layout will be failed on another screen size.
Please see my example of how to do this better.
Also I added other small improvements, maybe you will be interested in.
class IntroPage extends StatelessWidget {
const IntroPage({Key? key}) : super(key: key);
Widget _createButton({
required VoidCallback onPressed,
required Widget child,
required Color textColor,
}) {
return ElevatedButton(
onPressed: onPressed,
child: child,
style: ElevatedButton.styleFrom(
elevation: 0.0,
primary: Colors.white,
onPrimary: textColor,
textStyle: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
padding: EdgeInsets.all(8.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40),
),
fixedSize: Size(180.0, 60.0),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF29F76),
body: SafeArea(
child: Column(
children: <Widget>[
Expanded(
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: SizedBox(
height: 400.0, //your image height
child: Image.network(
"https://images.ctfassets.net/hrltx12pl8hq/61DiwECVps74bWazF88Cy9/2cc9411d050b8ca50530cf97b3e51c96/Image_Cover.jpg?fit=fill&w=480&h=270",
fit: BoxFit.cover,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_createButton(
child: Text("Sign Up"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
//your page
builder: (context) => Container(),
),
);
},
textColor: Colors.black,
),
SizedBox(height: 32.0),
_createButton(
child: Text("Sign In"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
//your page
builder: (context) => Container(),
),
);
},
textColor: Color(0xFFFE6B01),
),
SizedBox(height: 32.0),
],
),
),
],
),
),
_BottomSection(),
],
),
),
);
}
}
class _BottomSection extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Expanded(
child: Divider(
height: 2,
thickness: 2,
color: Colors.white,
),
),
SizedBox(width: 10),
Text(
"Please Read",
style: TextStyle(color: Colors.white),
),
SizedBox(width: 10),
Expanded(
child: Divider(
height: 2,
thickness: 2,
color: Colors.white,
),
),
],
),
Padding(
padding: const EdgeInsets.only(
top: 6.0,
right: 20.0,
left: 20.0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => Container()));
},
child: const Text(
"Terms & Conditions",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => Container()));
},
child: const Text(
"Privacy Policy",
style: TextStyle(
color: Colors.white,
decoration: TextDecoration.underline),
),
),
],
),
),
],
);
}
}
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
},
),
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,
),
),
),
],
),
),
);
});
}
}