Flutter wrap text inside nested Widgets - flutter

My Text widget is not wrapping, causing an overflow. I've tried methods from this post, but appear to be missing the right spot to add in a flex/expanded.
The spot where it says "//get this text to wrap" is the Text widget I'd like to wrap.
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Text(snapshot.data[index].message_text, //get this text to wrap
style: TextStyle(
color: Colors.grey,
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
overflow: TextOverflow.visible,
),
),
Full Code:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(title: Text("Comments")),
body: Container(
child: Column(
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
child: new RefreshIndicator(
child:
Container(
child: FutureBuilder(
future: getAllCommentsForAd(this.ad_id_passed_in),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.data == null) {
return Container(
child: Center(
child: Text("Loading..."),
)
);
} else {
return ListView.builder(
shrinkWrap: true,
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
// return ListTile(
// leading: CircleAvatar(
// radius: 35.0,
// backgroundImage: new NetworkImage(snapshot.data[index].imageUrl),
// ),
// title: Text(snapshot.data[index].email),
// );
return GestureDetector(
onTap: () => (
print("tapped that")
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (_) => MessageScreenRoom(
// snapshot.data[index],this.logged_in_user_id
// ),
// ),
// )
),
child: Container(
margin: EdgeInsets.only(
top: 5.0,
bottom: 5.0,
right: 1.0,
left: 10.0,
),
padding:
EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
decoration: BoxDecoration(
color: snapshot.data[index].hearted ? Colors.lime[50] : Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(20.0),
bottomRight: Radius.circular(20.0),
topLeft: Radius.circular(20.0),
bottomLeft: Radius.circular(20.0),
)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
CircleAvatar(
radius: 35.0,
backgroundImage: new NetworkImage(snapshot.data[index].imageUrl),
),
SizedBox(
width: 10.0,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(snapshot.data[index].user_name,
style: TextStyle(
color: Colors.grey,
fontSize: 15.0,
fontWeight: FontWeight.bold,
)),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Text(snapshot.data[index].message_text, //get this text to wrap
style: TextStyle(
color: Colors.grey,
fontSize: 15.0,
fontWeight: FontWeight.bold,
)),
),
SizedBox(
height: 10.0,
),
Container(
width: MediaQuery.of(context).size.width * 0.45,
child: Text(
"",
style: TextStyle(
color: Colors.blueGrey,
fontSize: 15.0,
fontWeight: FontWeight.w600,
),
overflow: TextOverflow.ellipsis,
),
)
],
),
],
),
),
Column(
children: <Widget>[
Text("",
style: TextStyle(
color: Colors.grey,
fontSize: 15.0,
fontWeight: FontWeight.bold)),
SizedBox(
height: 5.0,
),
snapshot.data[index].hearted
? Container(
width: 40.0,
height: 20.0,
alignment: Alignment.center,
child: Icon(Icons.favorite, color: Colors.red, size: 30),
)
: Icon(Icons.favorite_border, color: Colors.red, size: 30),
],
),
],
),
),
);
},
);
}
}
),
),
onRefresh: refreshMessages,
),
),
),
),
// _buildMessageComposer(),
Row(
children: <Widget>[
Expanded(child: TextField(
textCapitalization: TextCapitalization.sentences,
controller: text_message_controller,
onChanged: (value){
},
decoration: InputDecoration.collapsed(hintText: ' Leave a comment...'),
)),
IconButton(
icon: Icon(Icons.send),
iconSize: 30.0,
color: Theme.of(context).primaryColor,
onPressed: () {
//send comment TODO: do this comment send
sendComment(ad_id_passed_in, this.logged_in_user_id, text_message_controller.text);
text_message_controller.clear();
setState(() {
});
})
],
),
],
),
),
);
}

try wrapping your text with Flexible widget

Related

How to write text below the container in row

I have always struggled with making this ui dynamically. Its a row of 4 or can be more than 4 containers with images in it and below that row there is text showing the name of the category made. I currently doing the name part with padding's according to my own device but it slips away in larger or smaller screen size devices other than mine. How can I tackle this. Image is also attached for better understanding if required. Also in the next code named intopage I am trying to stick the please read lines and the terms and conditions, privacy policy to the bottom but it isn't sticking
Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.black),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
child: Center(
child: Image.asset("assets/salonicon.png",
scale: 1.2, color: Colors.white),
),
),
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.black),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
child: Center(
child: Image.asset("assets/hairdresser.png",
scale: 1.2, color: Colors.white),
),
),
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.black),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
child: Center(
child: Image.asset("assets/facial-massage.png",
scale: 1.2, color: Colors.white),
),
),
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
color: Colors.black,
border: Border.all(color: Colors.black),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
child: Center(
child: Image.asset("assets/body-massage.png",
scale: 1.2, color: Colors.white),
),
),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.start,
// crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 30.0),
child: Text(
"Salons".toUpperCase(),
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.w600),
),
),
Padding(
padding: const EdgeInsets.only(left: 50.0),
child: Text(
"Hair".toUpperCase(),
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.w600),
),
),
Padding(
padding: const EdgeInsets.only(left: 60.0),
child: Text(
"Skin".toUpperCase(),
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.w600),
),
),
Padding(
padding: const EdgeInsets.only(left: 65.0),
child: Text(
"Body".toUpperCase(),
textAlign: TextAlign.center,
style: const TextStyle(fontWeight: FontWeight.w600),
),
),
],
),
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 row then columns to specify them according to your needs it took me 3 minutes to change your code according to your needs super easy just practice a couple of times and you won' forget it.
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
children: <Widget>[
Container(
height: 100.0,
width: 100.0,
decoration: BoxDecoration(
image: const DecorationImage(
image: AssetImage('assets/rnpic.png'),
fit: BoxFit.fill,
),
border: Border.all(color: Colors.black),
borderRadius:
const BorderRadius.all(Radius.circular(20))),
child: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(),
child: Align(
alignment: Alignment.topRight,
child: Container(
width: 70,
height: 30,
decoration: BoxDecoration(
color: const Color(0xFFFF6D00),
border: Border.all(
color: const Color(0xFFFF6D00)),
borderRadius: const BorderRadius.only(
topRight: Radius.circular(20.0),
)),
child: const Center(
child: Text(
"-50% OFF",
style: TextStyle(color: Colors.white),
),
),
),
),
)
],
),
),
],
),
const SizedBox(
width: 150,
child: Center(
child: Text(
"Colorado Salon special hairstyle",
style:
TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
),
),
),
Container(
width: 80,
height: 30,
decoration: const BoxDecoration(
color: Color(0xFFFF6D00),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Center(
child: Text(
"View".toUpperCase(),
style: const TextStyle(
fontWeight: FontWeight.w600, color: Colors.white),
),
),
),
],
)
],
),
Make the layout like this
Row(
mainAxisAlignment : MainAxisAlignment.spaceBetween,
children:[
//item 1
Column(
children:[
Icon(),
Text(),
]
),
//item 2
Column(
children:[
Icon(),
Text(),
]
),
//item 3
Column(
children:[
Icon(),
Text(),
]
)
]
)

ListView isn't scrolling in Flutter

ListView is not working here, Firstly instead of padding I used Positioned() but there is a similar issue on github and there I got to know that scrollable widget shouldn't be placed inside Positioned() so i replaced it with Padding(), but got no success.
here is my code
import 'package:flutter/material.dart';
import 'package:cpblog/webview.dart';
import 'package:flutter/rendering.dart';
class DetailsPage extends StatefulWidget {
final heroTag;
final foodName;
final url;
final text;
DetailsPage({this.heroTag, this.foodName,this.url,this.text});
#override
_DetailsPageState createState() => _DetailsPageState();
}
class _DetailsPageState extends State<DetailsPage> {
var selectedCard = 'WEIGHT';
#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('Here You Go!!',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 18.0,
color: Colors.white)),
centerTitle: true,
actions: <Widget>[
IconButton(
icon: Icon(Icons.more_horiz),
onPressed: () {},
color: Colors.white,
)
],
),
body: ListView(children: [
Stack(children: [
Container(
height: MediaQuery.of(context).size.height - 82.0,
width: MediaQuery.of(context).size.width,
color: Colors.transparent),
Padding(
padding: const EdgeInsets.only(top: 75.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(45.0),
topRight: Radius.circular(45.0),
),
color: Colors.white),
height: MediaQuery.of(context).size.height - 100.0,
width: MediaQuery.of(context).size.width),
),
Padding(
padding: EdgeInsets.only(top: 30.0,
left: (MediaQuery.of(context).size.width / 2) - 100.0,),
child: Hero(
tag: widget.heroTag,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage(widget.heroTag),
fit: BoxFit.cover)),
height: 200.0,
width: 200.0)),
),
Padding(
padding: const EdgeInsets.only(top:250.0,right:25.0,left: 25.0),
child: ListView(
shrinkWrap: true,
children: <Widget>[
Text(widget.foodName,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 22.0,
fontWeight: FontWeight.bold)),
SizedBox(height: 20.0),
Text(widget.text,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 20.0,
)),
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
width: 125.0,
height: 40.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(17.0),
color: Color(0xFF7A9BEE)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => WebView(widget.url, widget.foodName)));
},
child:Text('View More',
style: TextStyle(
color: Colors.white,
fontFamily: 'Montserrat',
fontSize: 15.0)),
)
],
),
)
],
),
SizedBox(height: 20.0),
Container(
height: 150.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
_buildInfoCard('WEIGHT', '300', 'G'),
SizedBox(width: 10.0),
_buildInfoCard('CALORIES', '267', 'CAL'),
SizedBox(width: 10.0),
_buildInfoCard('VITAMINS', 'A, B6', 'VIT'),
SizedBox(width: 10.0),
_buildInfoCard('AVAIL', 'NO', 'AV')
],
)
),
SizedBox(height: 20.0),
Padding(
padding: EdgeInsets.only(bottom:5.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0), bottomLeft: Radius.circular(25.0), bottomRight: Radius.circular(25.0)),
color: Colors.black
),
height: 50.0,
child:
InkWell(
onTap: () {
Navigator.pop(context);
},
child: Center(
child: Text(
'Back',
style: TextStyle(
color: Colors.white,
fontFamily: 'Montserrat'
)
),
),
)
),
)
],
),
)
])
]));
}
Widget _buildInfoCard(String cardTitle, String info, String unit) {
return InkWell(
onTap: () {
selectCard(cardTitle);
},
child: AnimatedContainer(
duration: Duration(milliseconds: 500),
curve: Curves.easeIn,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: cardTitle == selectedCard ? Color(0xFF7A9BEE) : Colors.white,
border: Border.all(
color: cardTitle == selectedCard ?
Colors.transparent :
Colors.grey.withOpacity(0.3),
style: BorderStyle.solid,
width: 0.75
),
),
height: 100.0,
width: 100.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 8.0, left: 15.0),
child: Text(cardTitle,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12.0,
color:
cardTitle == selectedCard ? Colors.white : Colors.grey.withOpacity(0.7),
)),
),
Padding(
padding: const EdgeInsets.only(left: 15.0, bottom: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(info,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 14.0,
color: cardTitle == selectedCard
? Colors.white
: Colors.black,
fontWeight: FontWeight.bold)),
Text(unit,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12.0,
color: cardTitle == selectedCard
? Colors.white
: Colors.black,
))
],
),
)
]
)
)
);
}
selectCard(cardTitle) {
setState(() {
selectedCard = cardTitle;
});
}
}
I tried physics, listView.builder(),but everytime I get the same result.
Thank you in advance!!!!
Surround you ListView with Expanded widget.
You can't have a scrollable widget inside another scrollable widget without setting a proper height for the inner one. Or use ConstrainedBox

Text not updating on pressing button in dialog

I have a Text widget and two buttons to increase or decrease the count. + button to increase the count and - button to decrease the count. And the count is displayed in a Text widget. When I debug, count is changing but the Text is not updating. Not getting any error as well. How to do this. Here is my code:
_showDetails(BuildContext context, String barcodeResult) {
return showDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
child: Container(
height: 350.0,
width: 200.0,
decoration:
BoxDecoration(borderRadius: BorderRadius.circular(20.0)),
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
height: 150.0,
),
Container(
height: 100.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0),
),
color: Colors.teal),
),
Positioned(
top: 50.0,
left: 94.0,
child: Container(
height: 90.0,
width: 90.0,
child: CircleAvatar(
ExactAssetImage(
'assets/images/user-image-default.png'),
),
),
)
],
),
SizedBox(
height: 20.0,
),
Padding(
padding: EdgeInsets.all(10.0),
child: Text(
name,
style: TextStyle(
fontSize: 14.0, fontWeight: FontWeight.w300),
),
),
Padding(
padding: EdgeInsets.all(10.0),
child: Text(
description,
style: TextStyle(
fontSize: 14.0, fontWeight: FontWeight.w300),
),
),
Padding(
padding: EdgeInsets.all(10.0),
child: Text(
'Price : $price',
style: TextStyle(
fontSize: 14.0, fontWeight: FontWeight.w300),
),
),
SizedBox(
height: 15.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ClipOval(
child: Material(
color: Colors.teal, // button color
child: InkWell(
//splashColor: Colors.red, // inkwell color
child: SizedBox(
width: 40,
height: 40,
child: Icon(
Icons.add,
color: Colors.white,
)),
onTap: () {
setState(() {
// count++;
count = count + 1;
print(count);
});
},
),
),
),
SizedBox(
width: 20,
),
Text(count.toString()),
SizedBox(
width: 20,
),
ClipOval(
child: Material(
color: Colors.teal, // button color
child: InkWell(
// splashColor: Colors.red, // inkwell color
child: SizedBox(
width: 40,
height: 40,
child: Icon(
Icons.remove,
color: Colors.white,
)),
onTap: () {
setState(() {
//count--;
count = count - 1;
print(count);
});
},
),
),
),
],
),
],
),
),
);
});
}
Screenshot:
Here is the working code.
_showDetails(BuildContext context, String barcodeResult) {
return showDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return StatefulBuilder(builder: (context, setState) {
return Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
child: Container(
height: 350.0,
width: 200.0,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(20.0)),
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
height: 150.0,
),
Container(
height: 100.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0),
),
color: Colors.teal),
),
Positioned(
top: 50.0,
left: 94.0,
child: Container(
height: 90.0,
width: 90.0,
child: CircleAvatar(
backgroundImage: ExactAssetImage(chocolateImage),
),
),
)
],
),
SizedBox(
height: 20.0,
),
Padding(
padding: EdgeInsets.all(10.0),
child: Text(
name,
style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.w300),
),
),
Padding(
padding: EdgeInsets.all(10.0),
child: Text(
description,
style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.w300),
),
),
Padding(
padding: EdgeInsets.all(10.0),
child: Text(
'Price : \$${price * count}',
style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.w300),
),
),
SizedBox(
height: 15.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ClipOval(
child: Material(
color: Colors.teal, // button color
child: InkWell(
//splashColor: Colors.red, // inkwell color
child: SizedBox(
width: 40,
height: 40,
child: Icon(
Icons.add,
color: Colors.white,
)),
onTap: () {
setState(() {
// count++;
count = count + 1;
print(count);
});
},
),
),
),
SizedBox(
width: 20,
),
Text(count.toString()),
SizedBox(
width: 20,
),
ClipOval(
child: Material(
color: Colors.teal, // button color
child: InkWell(
// splashColor: Colors.red, // inkwell color
child: SizedBox(
width: 40,
height: 40,
child: Icon(
Icons.remove,
color: Colors.white,
)),
onTap: () {
setState(() {
//count--;
count = count - 1;
print(count);
});
},
),
),
),
],
),
],
),
),
);
});
});
}

How to return for a screen that has parameters?

I have three screens. One has no parameters and the second has two parameters. When I go to the third screen and I press on the back button of Android, returns to the first screen instead of the second.
I've tried manipulate the back button with WillPopScope, but it didn't work. I think the problem is because of second's parameters...
Here the third(ChosenOption) and second(Options2) screens:
import 'dart:async';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:cruke_app/ui/options2.dart';
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:rating_bar/rating_bar.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:cruke_app/ui/map.dart';
import 'package:flutter/services.dart' show rootBundle;
class ChosenOption extends StatefulWidget {
final String option;
final DocumentSnapshot document;
ChosenOption({Key key, #required this.document, this.option}) : super(key: key);
#override
_ChosenOptionState createState() => _ChosenOptionState();
}
class _ChosenOptionState extends State<ChosenOption> {
Completer<GoogleMapController> _controller = Completer();
GoogleMapController mapController;
String _mapStyle;
static const LatLng _center = const LatLng(45.521563, -122.677433);
#override
void initState() {
super.initState();
rootBundle.loadString('assets/map_style.txt').then((string) {
_mapStyle = string;
});
}
void _onMapCreated(GoogleMapController controller) {
mapController = controller;
mapController.setMapStyle(_mapStyle);
_controller.complete(controller);
}
#override
Widget build(BuildContext context) {
double _rating = 0;
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
CarouselSlider(
height: 200.0,
items: [1,2,3,4,5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 1.0),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(widget.document["image"]),
fit: BoxFit.cover,
),
),
child: Text('$i', style: TextStyle(fontSize: 16.0),)
);
},
);
}).toList(),
),
],
),
Container(
margin: EdgeInsets.only(top: 20.0, left: 13.0),
child: Row(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * 0.8,
child: Text(widget.document["title"],
style: TextStyle(color: Colors.black,
fontSize: 20.0, fontWeight: FontWeight.bold),),
),
Container(
width: MediaQuery.of(context).size.width * 0.15,
child: RawMaterialButton(
onPressed: () {},
child: Icon(
Icons.favorite,
color: Colors.white,
size: 20.0,
),
shape: CircleBorder(),
elevation: 2.0,
fillColor: Colors.red,
padding: EdgeInsets.all(8.0),
),
),
],
),
),
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 13.0),
child: Icon(Icons.star, size: 18.0, color: Colors.black),
),
Container(
margin: EdgeInsets.only(left: 5.0),
child: RatingBar(
onRatingChanged: (rating) => setState(() => widget.document["rating"] == rating),
filledIcon: Icons.star,
emptyIcon: Icons.star_border,
halfFilledIcon: Icons.star_half,
isHalfAllowed: true,
filledColor: Colors.yellow,
emptyColor: Colors.grey,
halfFilledColor: Colors.yellow,
size: 18,
),
),
Container(
margin: EdgeInsets.only(left: 5.0),
child: Text(widget.document["avaliations"].toString()+" | ", style: TextStyle(color: Colors.black, fontSize: 10.0),),
),
Text(widget.document["city"], style: TextStyle(color: Colors.black, fontSize: 10.0),),
],
),
Container(
margin: EdgeInsets.all(13.0),
child: Text(widget.document["text"]),
),
Divider(),
Text("Avaliações", style: TextStyle(fontSize: 20,),),
buildEvaluation(_rating, "images/restaurant.jpg", "Leandro", "Minas Gerais - MG", "6 dias atrás"),
buildEvaluation(_rating, "images/restaurant.jpg", "Leandro", "Minas Gerais - MG", "10 dias atrás"),
buildEvaluation(_rating, "images/restaurant.jpg", "Leandro", "MInas Gerais - MG", "16 dias atrás"),
Stack(
children: <Widget>[
Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 20.0),
child: Text("Avaliar este Restaurante", style: TextStyle(fontSize: 18),),
),
Container(
alignment: Alignment.center,
margin: EdgeInsets.only(top: 10.0),
child: RatingBar(
onRatingChanged: (rating) => setState(() => _rating = rating),
filledIcon: Icons.star,
emptyIcon: Icons.star_border,
halfFilledIcon: Icons.star_half,
isHalfAllowed: true,
filledColor: Colors.yellow,
emptyColor: Colors.black,
halfFilledColor: Colors.yellow,
size: 20,
),
),
Container(
width: 300.0,
margin: EdgeInsets.only(bottom: 50.0),
child: TextField(
decoration: InputDecoration(
suffixIcon: Padding(
padding: EdgeInsetsDirectional.only(end: 12.0),
child: Icon(Icons.send, color: Colors.black),
),
hintText: "Comentar...",
hintStyle: TextStyle(color: Colors.grey, fontSize: 15.0),
fillColor: Colors.white,
),
textAlign: TextAlign.end,
),
),
Container(
margin: EdgeInsets.only(right: 220.0, bottom: 5.0),
child: Text("Local no mapa",
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
),
),
Container(
width: 340.0,
height: 200.0,
margin: EdgeInsets.only(bottom: 10.0),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey,
offset: Offset(1.0, 1.0),
blurRadius: 10.0,
),
],
borderRadius: BorderRadius.circular(10.0),
),
child: GoogleMap(
mapType: MapType.normal,
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 18.0,
),
),
),
RaisedButton.icon(
onPressed: (){
Navigator.push(
context,
MaterialPageRoute(builder: (context) => CrukeMap()),
);
},
label: Text(
'TRAÇAR ROTA',
style: TextStyle(fontSize: 13, color: Colors.white, fontWeight: FontWeight.bold),
),
color: Colors.red,
icon: Icon(Icons.directions, color: Colors.white),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
),
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 20.0, top: 40.0),
child: Icon(Icons.place, color: Colors.red, size: 18,),
),
Container(
margin: EdgeInsets.only(left: 10.0, top: 40.0),
child: Text("R. Sete de Setembro, Porto Seguro - BA, 45810-000", style: TextStyle(fontSize: 12.0),),
),
],
),
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 20.0, top: 10.0),
child: Icon(Icons.local_phone, color: Colors.red, size: 18,),
),
Container(
margin: EdgeInsets.only(left: 10.0, top: 10.0),
child: Text("(73)99906-3724", style: TextStyle(fontSize: 12.0),),
),
],
),
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 20.0, top: 10.0, bottom: 50.0),
child: Icon(Icons.timer, color: Colors.red, size: 18,),
),
Container(
margin: EdgeInsets.only(left: 10.0, top: 10.0, bottom: 50.0),
child: Text("Horário de Funcionamento: 12:00 às 20:00", style: TextStyle(fontSize: 12.0),),
),
],
),
],
),
],
),
],
),
),
);
}
Widget buildEvaluation(double _rating, String image, String name, String location, String time){
return Stack(
children: <Widget>[
Positioned(
child: Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 20.0, right: 20.0, top: 30.0),
child: Container(
height: 80.0,
width: 80.0,
decoration: BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: ExactAssetImage(image),
),
)),
),
Container(
margin: EdgeInsets.only(left: 20.0),
child: RatingBar(
onRatingChanged: (rating) => setState(() => _rating = rating),
filledIcon: Icons.star,
emptyIcon: Icons.star_border,
halfFilledIcon: Icons.star_half,
isHalfAllowed: true,
filledColor: Colors.yellow,
emptyColor: Colors.grey,
halfFilledColor: Colors.yellow,
size: 20,
),
),
Container(
margin: EdgeInsets.only(left: 10.0),
child: Text(time, style: TextStyle(color: Colors.black, fontSize: 10.0),),
),
],
),
),
Column(
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 110.0, left: 5.0),
child: Text(name),
),
Container(
padding: EdgeInsets.only(top: 5.0, left: 10.0),
child: Text(location),
),
],
),
Container(
margin: EdgeInsets.only(left: 140.0, top: 70.0, bottom: 10.0),
width: 200.0,
child: Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt" +
"ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." ),
),
],
);
}
}
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:cruke_app/main.dart';
import 'package:flutter/material.dart';
import 'package:rating_bar/rating_bar.dart';
//import 'package:cruke_app/main.dart';
import 'package:cruke_app/ui/chosen_option.dart';
class Options2 extends StatefulWidget {
final String text, city;
Options2({Key key, #required this.text, this.city}) : super(key: key);
#override
_Options2State createState() => _Options2State();
}
class _Options2State extends State<Options2> {
#override
Widget build(BuildContext context) {
TextEditingController controller = new TextEditingController();
return MaterialApp(
home: Scaffold(
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
alignment: Alignment.center,
padding: EdgeInsets.only(left: 20.0, right: 20.0),
width: 500,
height: 150,
child: Container(
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey,
offset: Offset(1.0, 1.0),
blurRadius: 5.0,
),
],
color: Colors.white,
borderRadius: BorderRadius.circular(30.0),
),
child: Padding(
padding: EdgeInsets.all(10.0),
child: TextField(
controller: controller,
decoration: InputDecoration(
suffixIcon: Padding(
padding: EdgeInsetsDirectional.only(end: 12.0),
child: Icon(Icons.search),
),
hintText: "Porto Seguro - BA",
hintStyle: TextStyle(color: Colors.grey, fontSize: 15.0),
fillColor: Colors.grey,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(28.0),
borderSide: BorderSide(
width: 5.0,
color: Colors.grey,
),
),
),
),
),
),
),
Text("CATEGORIAS", style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
Container(
padding: EdgeInsets.only(top: 8.0),
child: Row(
children: <Widget>[
Expanded(
child: RawMaterialButton(
onPressed: () {
if(controller.text != null){
if(testData("tours", controller.text)){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Options2(text: "tours", city: controller.text),
),
);
}
}
},
child: Icon(
Icons.restaurant,
color: Colors.white,
size: 30.0,
),
shape: CircleBorder(),
elevation: 2.0,
fillColor: Colors.red,
padding: EdgeInsets.all(8.0),
),
),
Expanded(
child: RawMaterialButton(
onPressed: () {
if(controller.text != null){
if(testData("restaurant", controller.text)){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Options2(text: "restaurant", city: controller.text),
),
);
}
}
},
child: Icon(
Icons.restaurant,
color: Colors.white,
size: 30.0,
),
shape: CircleBorder(),
elevation: 2.0,
fillColor: Colors.red,
padding: EdgeInsets.all(8.0),
),
),
Expanded(
child: RawMaterialButton(
onPressed: () {
if(controller.text != null){
if(testData("amusement", controller.text)){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Options2(text: "amusement", city: controller.text),
),
);
}
}
},
child: Icon(
Icons.restaurant,
color: Colors.white,
size: 30.0,
),
shape: CircleBorder(),
elevation: 2.0,
fillColor: Colors.red,
padding: EdgeInsets.all(8.0),
),
),
Expanded(
child: RawMaterialButton(
onPressed: () {
if(controller.text != null){
if(testData("tourism", controller.text)){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Options2(text: "tourism", city: controller.text),
),
);
}
}
},
child: Icon(
Icons.restaurant,
color: Colors.white,
size: 30.0,
),
shape: CircleBorder(),
elevation: 2.0,
fillColor: Colors.red,
padding: EdgeInsets.all(8.0),
),
),
],
),
),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 18.0),
child: Text("Passeios"),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 3.0),
child: Text("Restaurantes"),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 14.0),
child: Text("Diversões"),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 18.0),
child: Text("Turismo"),
),
),
],
),
Container(
padding: EdgeInsets.all(10.0),
width: double.infinity,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey,
offset: Offset(1.0, 1.0),
blurRadius: 10.0,
),
],
borderRadius: BorderRadius.circular(10.0),
),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(15.0),
child: Text("Sugestões", style: TextStyle(color: Colors.black)),
),
Container(
child: FutureBuilder<QuerySnapshot>(
future: Firestore.instance.collection(widget.text).where("city", isEqualTo: widget.city).getDocuments(),
builder: (context, snapshot){
if(!snapshot.hasData){
return Center(child: CircularProgressIndicator());
}else{
return snapshot.data.documents.isEmpty ? Center(child: Text("Sua busca não foi encontrada!")) : ListView.builder(
physics: const NeverScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index){
return buildCard(context, snapshot.data.documents[index], widget.text);
},
);
}
},
),
),
],
),
),
),
],
),
),
),
);
}
bool testData(String collection, String city){
try{
var data = Firestore.instance.collection(collection).where("city", isEqualTo: city).snapshots();
if(data != null){
return true;
}
}catch(error){
return false;
}
}
Widget buildCard(BuildContext context, DocumentSnapshot document, String collection){
return Material(
child: InkWell(
onTap: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ChosenOption(document: document, option: collection),
),
);
},
child: Container(
padding: EdgeInsets.only(top: 127.0),
margin: EdgeInsets.only(right: 10.0, left: 10.0, bottom: 15.0),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(document['image']),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(10.0),
),
width: double.infinity,
height: 200.0,
child: Column(
children: <Widget>[
Container(
alignment: Alignment.topLeft,
padding: EdgeInsets.only(left: 5.0),
child: Text(document['title'],
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
Row(
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 5.0),
child: Icon(Icons.star, size: 18.0, color: Colors.white),
),
Container(
padding: EdgeInsets.only(left: 5.0, right: 5.0),
child: RatingBar(
onRatingChanged: (rating) => setState(() => rating = document['rating']),
filledIcon: Icons.star,
emptyIcon: Icons.star_border,
halfFilledIcon: Icons.star_half,
isHalfAllowed: true,
filledColor: Colors.yellow,
emptyColor: Colors.grey,
halfFilledColor: Colors.yellow,
size: 18,
),
),
Container(
child: Text(document['avaliations'].toString(), style: TextStyle(color: Colors.white, fontSize: 9.0),),
),
Container(
child: Text(" | " + document['city'], style: TextStyle(color: Colors.white, fontSize: 9.0),),
),
],
),
Container(
height: 36.0,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey,
offset: Offset(1.0, 1.0),
blurRadius: 10.0,
),
],
borderRadius: BorderRadius.only(
topLeft: Radius.zero, topRight: Radius.zero,
bottomLeft: Radius.circular(10.0), bottomRight: Radius.circular(10.0)),
),
child: Padding(
padding: EdgeInsets.all(5.0),
child: Text(document['text'],
style: TextStyle(fontSize: 10.0),),
),
),
],
),
),
),
);
}
}
please use package back_button_interceptor https://pub.dev/packages/back_button_interceptor
In simple cases, when you need to intercept the Android back-button, you usually add WillPopScope to your widget tree. However, when developing stateful widgets that interact with the back button, it's more convenient to use the BackButtonInterceptor
example usage
#override
void initState() {
super.initState();
BackButtonInterceptor.add(myInterceptor);
}
#override
void dispose() {
BackButtonInterceptor.remove(myInterceptor);
super.dispose();
}
bool myInterceptor(bool stopDefaultButtonEvent) {
print("BACK BUTTON!"); // Do some stuff.
return true;
}
similar question How to deactivate or override the Android "BACK" button, in Flutter?

Alert Dialog with Rounded corners in flutter

I am trying to create an alert dialog with rounded corners in Flutter same as below screenshot. also add my code here, but my output is exactly different from the expected one. anyone, please help me.
Expected Alert Dialog
my code is here.
void _showAlert() {
AlertDialog dialog = new AlertDialog(
content: new Container(
width: 260.0,
height: 230.0,
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
color: const Color(0xFFFFFF),
borderRadius: new BorderRadius.all(new Radius.circular(32.0)),
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
// dialog top
new Expanded(
child: new Row(
children: <Widget>[
new Container(
// padding: new EdgeInsets.all(10.0),
decoration: new BoxDecoration(
color: Colors.white,
),
child: new Text(
'Rate',
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
fontFamily: 'helvetica_neue_light',
),
textAlign: TextAlign.center,
),
),
],
),
),
// dialog centre
new Expanded(
child: new Container(
child: new TextField(
decoration: new InputDecoration(
border: InputBorder.none,
filled: false,
contentPadding: new EdgeInsets.only(
left: 10.0, top: 10.0, bottom: 10.0, right: 10.0),
hintText: ' add review',
hintStyle: new TextStyle(
color: Colors.grey.shade500,
fontSize: 12.0,
fontFamily: 'helvetica_neue_light',
),
),
)),
flex: 2,
),
// dialog bottom
new Expanded(
child: new Container(
padding: new EdgeInsets.all(16.0),
decoration: new BoxDecoration(
color: const Color(0xFF33b17c),
),
child: new Text(
'Rate product',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontFamily: 'helvetica_neue_light',
),
textAlign: TextAlign.center,
),
),
),
],
),
),
);
showDialog(context: context, child: dialog);
}
}
The output I get from the above code is.
Though i am late with the solution, but this may help others searching for it. The following code snippets details how it can be achieved.
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,
),
),
),
],
),
),
);
});
}
}
The output of the code snippet looks like this:
The container where you set the BoxDecoration is in the widget tree under the alert dialog. Which means you are setting just a box within the padding of your Dialog. You need to create a custom AlertDialog/showDialog and set the radius there. In the custom widget you also add the button and everything where you need to work beyond that padding.
When you include the customShowDialog.dart file in your project (gist.github.com) where you can edit the radius here borderRadius: BorderRadius.all(Radius.circular(20.0)) and call it like this:
return new CustomAlertDialog(
content: new Container(
width: 260.0,
height: 230.0,
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
color: const Color(0xFFFFFF),
borderRadius:
new BorderRadius.all(new Radius.circular(32.0)),
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
// dialog top
new Expanded(
child: new Row(
children: <Widget>[
new Container(
// padding: new EdgeInsets.all(10.0),
decoration: new BoxDecoration(
color: Colors.white,
),
child: new Text(
'Rate',
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
fontFamily: 'helvetica_neue_light',
),
textAlign: TextAlign.center,
),
),
],
),
),
// dialog centre
new Expanded(
child: new Container(
child: new TextField(
decoration: new InputDecoration(
border: InputBorder.none,
filled: false,
contentPadding: new EdgeInsets.only(
left: 10.0,
top: 10.0,
bottom: 10.0,
right: 10.0),
hintText: ' add review',
hintStyle: new TextStyle(
color: Colors.grey.shade500,
fontSize: 12.0,
fontFamily: 'helvetica_neue_light',
),
),
)),
flex: 2,
),
// dialog bottom
new Expanded(
child: new Container(
padding: new EdgeInsets.all(16.0),
decoration: new BoxDecoration(
color: const Color(0xFF33b17c),
),
child: new Text(
'Rate product',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontFamily: 'helvetica_neue_light',
),
textAlign: TextAlign.center,
),
),
),
],
),
),
);
});
You will get something like this:
EDIT:
Although Flutter lately introduced the shape property which would help you with the rounded corners by setting a ShapeBorder with e.g.
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0))
),
you would still need to quickly add a custom widget for some customizations, like custom padding, as stated above.
This worked for me:
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0))),
Try this code :
AlertDialog(
shape: RoundedRectangleBorder(borderRadius:
BorderRadius.all(Radius.circular(15))),
title: Text('Your title!'),
content: Container(),
);
add
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10.0))),
title: Text("Loading..."),
content: CircularProgressIndicator(),
);
},
);
Try this code
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
title: Text('title'),
content: Text('content'),
);
},
);
You can simply use shape property of AlertDialog
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(16)))
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
This line of code will make alert dialog with rounded corner.
Use like this
AlertDialog(
shape:RoundedRectangleBorder(
borderRadius:BorderRadius.circular(10.0,),
),
content: yourContent()
);
Try this code
Theme(
data: Theme.of(context).copyWith(
dialogTheme: DialogTheme(
backgroundColor: Theme.of(context).cardColor,
shape: RoundedRectangleBorder(
borderRadius: radius(6),
),
),
),
child: AlertDialog()
I was looking at these answers and none of them helped me achieve the desired look.
I noticed that there was a default padding so all I did was:
AlertDialog(
titlePadding: EdgeInsets.all(0),
title: Container(
height: 30.00,
width: 300.00,
decoration: BoxDecoration(
color: Colors.redAccent,
borderRadius: BorderRadius.only(topLeft: Radius.circular(32), topRight: Radius.circular(32)),
),
),
)
I overrode the titlePadding attribute and it came just right. There is also a contentPadding attribute if you find any trouble with that. I copied this from one of my apps just to show the attribute, but it is applicable to this case as well.
If you want to use the standard Dialog you can just apply a Decoration to the Container that matches your Dialog settings
showDialog(
context: context,
child: Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
),
child: Text('foobar'),
)
],
),
),
);
To change the appearance of the shape of the dialog, you can set the shape property of the AlertDialog to the desired shape.
AlertDialog default shape is a RoundedRectangleBorder with a radius of 4.0
AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
)
AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(12.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.end,
children: [
IconButton(
icon: Icon(
Icons.highlight_off_outlined, color: Color(0xff5A5D60),),
onPressed: () {
Navigator.of(context,
rootNavigator: true)
.pop();
}),
SizedBox(
width: 10,
)
],
),
Image(
image: AssetImage(
'assets/warningicon.png'),
),
SizedBox(
height: mdq.height * .01,
),
Text(
'Registered Successfully',
style: GoogleFonts.roboto(
color: Color(0xff11171C),
fontSize: mdq.width * .04,
fontWeight: FontWeight.bold),
),
Text(
'Your account has been Successfully\ncreated.',
textAlign: TextAlign.center,
style: GoogleFonts.roboto(
color: Color(0xff11171C),
fontSize: mdq.width * .04,
),
),
SizedBox(
height: mdq.height * .04,
),
Row(
//mainAxisAlignment: MainAxisAlignment.start,
// crossAxisAlignment: CrossAxisAlignment.center,
children: [
InkWell(
onTap: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Login1()));
},
child: Container(
padding: EdgeInsets.only(
top: 20.0, bottom: 20.0),
decoration: BoxDecoration(
color: Color(0xffEEEEEE),
borderRadius: BorderRadius.only(
bottomLeft:
Radius.circular(12.0),
//bottomRight: Radius.circular(32.0)
),
),
width: 150,
child: Text(
"No",
style: TextStyle(
color: Color(0xff5A5D60),
fontSize: 17),
textAlign: TextAlign.center,
),
),
),
InkWell(
onTap: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Testing()));
},
child: Container(
padding: EdgeInsets.only(
top: 20.0, bottom: 20.0),
decoration: BoxDecoration(
color: Color(0xffFFDC00),
borderRadius: BorderRadius.only(
//bottomLeft: Radius.circular(32.0),
bottomRight:
Radius.circular(12.0)),
),
child: Text(
"Yes",
style: TextStyle(
color: Colors.white,
fontSize: 17),
textAlign: TextAlign.center,
),
width: 150,
),
),
],
),
],
),
),
),[You can also show and design dialog box like this**strong text**][1]
You can use like this
using get: ------------->
Get.generalDialog(
pageBuilder: (BuildContext buildContext, Animation animation,
Animation secondaryAnimation) =>
AlertDialog(
contentPadding: EdgeInsets.zero,
// this padding user for outside of alert padding
insetPadding: EdgeInsets.symmetric(horizontal: 10),
content: Container(
height: Get.height - 300, // Change as per your requirement
width: Get.width, // Change as per your requirement
child: <Your Widget>
),
),
));
using alert dialog:------>
CustomAlertDialog(
content: new Container(
width: 260.0,
height: 230.0,
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
color: const Color(0xFFFFFF),
borderRadius:
new BorderRadius.all(new Radius.circular(32.0)),
),
child: <Your widget>
),
);
});
Padding(
padding: const EdgeInsets.symmetric(horizontal: 23.0),
child: IconButton(
onPressed: (){},
icon: const Icon(
Icons.fiber_new_rounded,
size: 25,
color: Colors.white,
)
),
),