There is a space between my ListView and the Tiles - flutter

I am making and app using flutter and I was using a ListView togenerate the items but there is a gap between the List and the first Tile.
Already tried
Changing the size of the container that wraps around the listview
Removing the "header" with the title "ExercĂ­cios"
Removing the ClipRRect
class ExerciseList extends StatelessWidget {
final List<String> exercises;
const ExerciseList({Key? key, required this.exercises}) : super(key: key);
#override
Widget build(BuildContext context) {
return Padding(
padding:
const EdgeInsets.only(top: 30, bottom: 20, right: 30, left: 30),
child: ClipRRect(
borderRadius: BorderRadius.circular(30),
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
decoration:
const BoxDecoration(
color: Color.fromARGB(255, 60, 60, 60)
),
child: const Padding(
padding: EdgeInsets.only(top: 8, bottom: 8),
child: Text(
"ExercĂ­cios",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 32,
color: Colors.white
),
),
),
),
Container(
height: 300,
decoration:
const BoxDecoration(
color: Color.fromARGB(255, 65, 65, 65)
),
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return Container(
decoration: const BoxDecoration(
border: Border(
top: BorderSide(
color: Colors.black,
width: 0.6
)
)
),
child: ListTile(
title: Text(
exercises[index],
style: const TextStyle(
fontSize: 22,
color: Colors.white,
),
),
),
);
},
itemCount: exercises.length,
),
),
],
),
)
);
}
}```

Based on the code you provided, not able to re-create the issue on my end.
Check your data List for any empty entries.

Related

How to have custom color and border if selected

I wanted to implement a theme picker in my app so I made a dialog and got the title of the theme and the index with which it's going to be chosen class... now I want the dialog to show a border around the selected theme and show the background color of each theme
this is the code I use for the class:
class MultiThemeModel {
int index;
String themeName;
MultiThemeModel({required this.index, required this.themeName});
}
titlesForThemeModel(int index) {
switch (index) {
case 0:
return 'Luxury Purple';
case 1:
return 'Red Wine';
}
return 'No theme for index';
}
List<MultiThemeModel> get themes => List<MultiThemeModel>.generate(
2,
(index) =>
MultiThemeModel(index: index, themeName: titlesForThemeModel(index)));
List<Widget> get widgets => themes
.map((themeData) => MultipleThemeViewerWidget(themeData: themeData))
.toList();
what do I need to do to implement the features described above? I thought about maybe having a boolean and a color property in the class but I don't know how to map it and get it into the list... would be great to get some advice
thanks for the help in advance:)
Edit:
this is the Container for the colors:
class MultipleThemeViewerWidget extends StatelessWidget {
MultipleThemeViewerWidget({Key? key, required this.themeData})
: super(key: key);
final MultiThemeModel themeData;
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
getThemeManager(context).selectThemeAtIndex(themeData.index);
},
child: Container(
height: 60,
width: 105,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Theme.of(context).scaffoldBackgroundColor.withOpacity(.3),
border: Border.all(
color: Theme.of(context).scaffoldBackgroundColor, width: 3)),
child: Center(
child: Text(
themeData.themeName,
style: GoogleFonts.poppins(
textStyle: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Theme.of(context).scaffoldBackgroundColor,
),
),
),
),
),
);
}
}
this is the dialog I have for the implementation:
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
),
elevation: 1,
backgroundColor: Theme.of(context).indicatorColor,
insetAnimationCurve: Curves.decelerate,
child: SizedBox(
height: 170,
width: 320,
child: Stack(
children: [
Padding(
padding: const EdgeInsets.only(
top: 25,
left: 35,
right: 35,
),
child: Stack(
children: [
Container(
width: 250,
height: 30,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(90),
color: Colors.black,
),
),
GestureDetector(
onTap: () {
selected = false;
print(selected);
},
child: AnimatedContainer(
duration: const Duration(
milliseconds: 200,
),
width: 138,
height: 30,
decoration: BoxDecoration(
color: Theme.of(context)
.indicatorColor,
borderRadius:
BorderRadius.circular(90),
border: Border.all(
color: Colors.black,
width: 1,
),
),
child: Center(
child: Text(
'Light Mode',
style: GoogleFonts.poppins(
textStyle: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 112,
),
child: GestureDetector(
onTap: () {
setState(() {
selected = true;
print(selected);
});
},
child: AnimatedContainer(
duration: const Duration(
milliseconds: 200,
),
width: 138,
height: 30,
decoration: BoxDecoration(
color: selected
? Colors.black
: Colors.transparent,
borderRadius:
BorderRadius.circular(90),
),
child: Center(
child: Text(
'Dark Mode',
style: GoogleFonts.poppins(
textStyle: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
),
),
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(
top: 85,
left: 35,
right: 35,
),
child: SizedBox(
height: 60,
width: 250,
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: widgets),
),
),
],
),
),
);
getThemeManager:
/// Returns the [ThemeManger] that
ThemeManager getThemeManager(BuildContext context) =>
Provider.of<ThemeManager>(context, listen: false);
class ThemeModel {
final ThemeData? selectedTheme;
final ThemeData? darkTheme;
final ThemeMode? themeMode;
ThemeModel({
required this.selectedTheme,
required this.darkTheme,
required this.themeMode,
});
}

How to make a scrollable screen in flutter?

As you can see, Actually I want to make the screen scrollable, In my Flutter project, on one screen I have used some rows, columns, and listview but when I scroll my screen this is not happening, while I have to take SingleChildScrollView but it didn't work. and I have tried replacing the column with Listview but it didn't work. I don't understand where is the problem, please give me a solution. and I have attached my code and share a screenshot of the app screen below.
it shows pixel error.
.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/material.dart';
import 'package:movie_app/core/constants/constants.dart';
import 'package:movie_app/ui/views/movielist/movie_detail_view.dart';
class MovieListView extends StatefulWidget {
const MovieListView({Key? key}) : super(key: key);
#override
_MovieListViewState createState() => _MovieListViewState();
}
class _MovieListViewState extends State<MovieListView> {
int counter = 0;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Color(0xff070d2d),
body: Column(
children: [
Expanded(
child: SingleChildScrollView(
child: Container(
child: Column(
children: [
_buildHeaderSection(),
_buildSearchBar(),
SizedBox(height: 30),
buildCategoriesSection(),
SizedBox(height: 20),
buildListCategories(),
SizedBox(height: 30),
_buildPopularTitle(),
SizedBox(height: 30),
_buildPopularSection(),
],
),
),
),
),
],
),
),
);
}
Widget _buildHeaderSection() {
return Container(
padding: EdgeInsets.fromLTRB(30.0, 80.0, 30.0, 60.0),
// color: Colors.red,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MovieDetailView()),
);
},
child: Text(
"Hi, Edwards!",
style: TextStyle(
fontSize: 25,
//fontWeight: FontWeight.bold,
color: Colors.white),
),
),
Stack(
children: [
new IconButton(
icon: Icon(Icons.notifications),
onPressed: () {
setState(() {
//counter = 0;
});
}),
counter != 0
? new Positioned(
left: 20,
top: 20,
child: new Container(
padding: EdgeInsets.all(2),
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(6),
),
constraints: BoxConstraints(
minWidth: 14,
minHeight: 14,
),
child: Text(
'$counter',
style: TextStyle(
color: Colors.white,
fontSize: 8,
),
textAlign: TextAlign.center,
),
),
)
: new Container(),
ClipRRect(
borderRadius: BorderRadius.circular(50.0),
child: Image.network(
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9CbZTM7W7VmNIGF36hIjpJcVoWEhbPGEGSw&usqp=CAU",
height: 50.0,
width: 50.0,
),
),
],
)
],
),
);
}
Widget _buildSearchBar() {
return Container(
height: 50,
margin: EdgeInsets.only(left: 30, right: 30),
child: TextField(
decoration: InputDecoration(
prefixIcon: Icon(
Icons.search,
color: Colors.white,
),
hintText: "search your movie",
hintStyle: TextStyle(color: Colors.white),
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.white,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.grey,
width: 2.0,
),
),
)),
);
}
Widget buildCategoriesSection() {
return Container(
padding: EdgeInsets.only(left: 20, right: 20),
child: Row(
children: [
Text(
"Categories",
style: TextStyle(
color: Colors.white,
fontSize: 15,
),
),
SizedBox(
width: 150,
),
Text(
"See more",
style: TextStyle(
color: Colors.grey,
fontSize: 15,
),
)
],
),
);
}
Widget buildListCategories() {
return Container(
height: 80,
padding: EdgeInsets.only(left: 20),
width: MediaQuery.of(context).size.width,
child: Container(
child: ListView.builder(
itemCount: categoryList.length,
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context, position) {
return _buildCategoryItem(categoryList[position]);
},
),
),
);
}
Widget _buildCategoryItem(String category) {
return Container(
height: 80,
width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.red.withOpacity(0.3),
),
margin: EdgeInsets.only(right: 16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.adb, color: Colors.white,),
SizedBox(height: 8),
Text(
category,
style: TextStyle(color: Colors.white),
),
],
),
);
}
_buildPopularTitle() {
return Container(
padding: EdgeInsets.only(left: 20, right: 20),
child: Row(
children: [
Text(
"Popular",
style: TextStyle(
color: Colors.white,
fontSize: 15,
),
),
SizedBox(
width: 150,
),
Text(
"See more",
style: TextStyle(
color: Colors.grey,
fontSize: 15,
),
)
],
),
);
}
_buildPopularSection() {
return Container(
height: 200,
padding: EdgeInsets.only(left: 20),
width: MediaQuery.of(context).size.width,
child: Container(
child: ListView.builder(
itemCount: 6,
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context, position) {
return _buildPopularItem();
},
),
),
);
}
_buildPopularItem() {
return Column(
children: [
Container(
height: 200,
width: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.red,
),
margin: EdgeInsets.only(right: 16),
child: Image.network(
'https://d1csarkz8obe9u.cloudfront.net/posterpreviews/movie-poster-template-design-21a1c803fe4ff4b858de24f5c91ec57f_screen.jpg?ts=1574144362',
fit: BoxFit.cover,
),
),
SizedBox(height: 5,),
Container(
color: Colors.green,
child: Text("data",style: TextStyle(
color: Colors.red
),
),
),
],
);
}
}
As you have mentioned SingleChildScrollView should work, but your problem is that you don't have enough items to be scrolled according to your screenshot.
So please use enough items and try again.
And in your _buildPopularItem() widget, decrease the container width, that's why it says pixel overflow.
This overflow is made from _buildPopularTitle() while you set fixed height from _buildPopularSection having height: 200,
if you look closely, inside _buildPopularItem
There is a Container with height: 200, and it is taking full height, so for rest of children SizedBox h:5 and Container Text aren't having any spaces here, and creating overflow.
Solutions
increase the height of _buildPopularSection
reduce the container height inside _buildPopularItem
wrap with FittedBox(child: _buildPopularItem());
From the screenshot I can see that your container is smaller by 21 pixels in height. Please increase it.
_buildPopularSection() {
return Container(
height: 230,
padding: EdgeInsets.only(left: 20),
width: MediaQuery.of(context).size.width,
child: Container(
child: ListView.builder(
itemCount: 6,
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context, position) {
return _buildPopularItem();
},
),
),
);
}
_buildPopularItem() {
return Column(
children: [
Container(
height: 225,
width: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.red,
),
margin: EdgeInsets.only(right: 16),
child: Image.network(
'https://d1csarkz8obe9u.cloudfront.net/posterpreviews/movie-poster-template-design-21a1c803fe4ff4b858de24f5c91ec57f_screen.jpg?ts=1574144362',
fit: BoxFit.cover,
),
),
SizedBox(height: 5,),
Container(
color: Colors.green,
child: Text("data",style: TextStyle(
color: Colors.red
),
),
),
],
);
}
Replace the above code and it should work...

Add materialRoute at the ontap function

I try to open another page that I design on flutter but I get an error at the end of the code , at the brackets ( at the onTap(){}) what should I add in the brackets next to the ElementPageDetail? And also , why can't I add another container in the SingleChildScrollView that I created? It's because of the Stack? Expanded?
class _ElementMainPageState extends State<ElementMainPage> {
PageController _pageController = PageController(viewportFraction: 0.7);
double _indicatorHeight = 35.45;
int _pageIndex = 0;
List<String> _heroTag = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
List<String> _heroTextTag = List.generate(10, (index) => "t$index");
#override
void initState() {
// TODO: implement initState
super.initState();
}
#override
Widget build(BuildContext context) {
Expanded(
flex: 8,
child: Stack(
children: [
Positioned(
left: 0,
right: 0,
bottom: 160,
top: 0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
physics: BouncingScrollPhysics(),
scrollDirection: Axis.horizontal,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (_) =>
ElementDetailPage()));
},
child: Container(
margin: EdgeInsets.only(
left: 16, right: 16, bottom: 24),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black
.withOpacity(0.2),
spreadRadius: -4,
blurRadius: 4,
offset: Offset(-4, 24))
],
color: Colors.indigoAccent[700],
image: DecorationImage(
image: NetworkImage(
"https://i.pinimg.com/564x/f9/54/87/f95487ddee97d480f621aa27fc924443.jpg"),
fit: BoxFit.cover),
borderRadius:
BorderRadius.circular(24)),
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Spacer(),
Container(
height: 48,
width: 48,
decoration: BoxDecoration(
color: Colors.white
.withOpacity(0.5),
borderRadius:
BorderRadius.circular(8)),
child: Center(
child: Text(
"20",
style: TextStyle(
fontWeight:
FontWeight.bold,
color: Colors.white,
fontSize: 18),
),
),
),
SizedBox(
height: 8,
),
Text(
"questions to adress",
style: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
Text(
"Unknown Stage",
style: TextStyle(
fontSize: 24,
color: Colors.white,
fontWeight: FontWeight.bold,
),
)
],
),
),
),
))
And the ElementDetailPage
import 'package:flutter/material.dart';
class ElementDetailPage extends StatefulWidget {
String imageTag;
String titleTag;
ElementDetailPage(this.imageTag, this.titleTag);
#override
_ElementDetailPageState createState() => _ElementDetailPageState();
}
class _ElementDetailPageState extends State<ElementDetailPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Positioned(
left: 0,
right: 0,
top: 0,
bottom: 0,
child: Hero(
tag: widget.imageTag,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://i.pinimg.com/564x/f9/54/87/f95487ddee97d480f621aa27fc924443.jpg"),
fit: BoxFit.cover)),
padding: EdgeInsets.only(left: 24),
child: ListView(
children: [
SizedBox(
height: 100,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 64,
width: 64,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.5),
borderRadius: BorderRadius.circular(8)),
child: Center(
child: Text(
"20",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 18),
),
),
),
],
),
SizedBox(
height: 8,
),
Text(
"questions to adress",
style: TextStyle(
fontSize: 18,
color: Colors.white,
),
),
Text(
"Unknown stage",
style: TextStyle(
fontSize: 64,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
Text(
""
"Unknown stage is the first fase to know somebody new."
" It is the easiest stage to see if you like the person in front of you "
"and if you want to continue forming a bound with them to become friends or"
"\n if there aren't your type of a person and let them go.This question will have some "
" basic questions and some intimate questions, if somebody wants to skip a question i propose a shot"
" \n WARNING : You may fall in love",
style: TextStyle(color: Colors.white),
),
],
),
),
)),
Positioned(
left: 16,
top: 32,
child: IconButton(
icon: Icon(Icons.arrow_back),
color: Colors.white,
onPressed: () {
Navigator.of(context).pop();
},
)),
Positioned(
top: 600,
left: 100,
child: RaisedButton(
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(80.0)),
padding: EdgeInsets.all(0.0),
child: Ink(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.white, Colors.white30],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
borderRadius: BorderRadius.circular(30.0)),
child: Container(
constraints:
BoxConstraints(maxWidth: 250.0, minHeight: 50.0),
alignment: Alignment.center,
child: Text(
"Start playing",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.black, fontSize: 15),
),
),
),
)),
Positioned(
top: 700,
left: 100,
child: RaisedButton(
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(80.0)),
padding: EdgeInsets.all(0.0),
child: Ink(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.black, Colors.black87],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
borderRadius: BorderRadius.circular(30.0)),
child: Container(
constraints:
BoxConstraints(maxWidth: 250.0, minHeight: 50.0),
alignment: Alignment.center,
child: Text(
"Spotify Playlist",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 15),
),
),
),
))
],
),
);
}
}
In _ElementMainPageState() --> Wrap the Expanded widget inside the MaterialApp -> Scaffold Widget to resolve the navigating issue
And main thing is ElementDetailPage() too warp with Scaffold widget
For the error showed up in this error message:
In your ElementDetailPage, you are setting 2 positional arguments. By definition, these arguments need to be provided when you create a new ElementDetailPage.
To answer your question, you need to put the value of imageTag and titleTag, within the bracket. If you don't want to make these arguments compulsory, you can define them as optional parameters by putting them in the curly bracket:
class ElementDetailPage extends StatefulWidget {
String imageTag;
String titleTag;
ElementDetailPage({this.imageTag, this.titleTag});
#override
_ElementDetailPageState createState() => _ElementDetailPageState();
}

Flutter - Align widget all the way to the end of a card view. (View image included)

how can I get the flat button to fill the area under the divider all the way to the end of the card, it appears to not be able to go any further down.
See the white space under the FlatButton? I want it to look like the FlatButton is the end.
Doesn't have to be a flat button, any widget with onTap/press/(or a something hack-ish with gesture detector) listener would be fine.
Dart code is ->
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(4.0),
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(15))
),
child: Container(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 24, bottom: 16),
child: Text(_label, style: TextStyle(fontSize: 24, color: Color.fromARGB(190, 0, 0, 0), fontWeight: FontWeight.bold)),
),
Divider(color: Colors.black26, height: 2,),
Padding(
padding: const EdgeInsets.all(24.0),
child: Text(_information, style: TextStyle(fontSize: 20, color: Colors.black87)),
),
Divider(color: Colors.black26, height: 2,),
SizedBox(width: double.infinity, child: FlatButton(onPressed: () => _onTap(), color: Color.fromARGB(50, 100, 100, 100), child: Text('Done', style: TextStyle()), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5))))
],
),
),
),
);
}
Please see the code below, I'm using InkWell & Container :
import 'package:flutter/material.dart';
final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
//theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
String _label = "";
String _information = "";
return Padding(
padding: const EdgeInsets.all(4.0),
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(15))),
child: Container(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 24, bottom: 16),
child: Text(_label,
style: TextStyle(
fontSize: 24,
color: Color.fromARGB(190, 0, 0, 0),
fontWeight: FontWeight.bold)),
),
Divider(
color: Colors.black26,
height: 2,
),
Padding(
padding: const EdgeInsets.all(24.0),
child: Text(_information,
style: TextStyle(fontSize: 20, color: Colors.black87)),
),
Divider(
color: Colors.black26,
height: 2,
),
Spacer(),
InkWell(
onTap: () {}, //_onTap(),
child: Container(
width: double.infinity,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: const Color.fromARGB(50, 100, 100, 100)),
child: const Center(child: Text('Done', style: TextStyle())),
),
)
],
),
),
),
);
}
}
I solved my code like this, setting a height factor it did what i wanted automatically.
SizedBox(width: double.infinity, height: 60, child:
FlatButton(onPressed: () => _onTap(), color: Colors.transparent, child:
Text('Done', style: TextStyle()), shape: RoundedRectangleBorder(borderRadius:
BorderRadius.only(bottomLeft: Radius.circular(15), bottomRight: Radius.circular(15)))))
Only downside is that you have to specify a height rather than letting the widget adjust that based on content. Although there is probably a workaround for that.

How to add circular border to dialog in flutter?

How to add circular border for dialog box in a flutter?,I tried the below code but I can't able to get the desired output, I already added circular border but it's not working, I need circular border for dialog,Refer the expected output for details, please guide
My code :
`
class CustomDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
const double padding = 1.0;
return Dialog(
backgroundColor: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0))),
child: Column(mainAxisSize: MainAxisSize.min, children: [
Container(
margin: EdgeInsets.all(1),
width: double.infinity,
child: Text('title',
style: TextStyle(fontSize: 30, color: Colors.white)),
color: Colors.green,
),
Container(
color: Colors.white,
padding: EdgeInsets.all(10),
child: ListView(
shrinkWrap: true,
children: [
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
],
),
),
Divider(
color: Colors.white,
),
Container(
color: Colors.white,
height: 50,
padding: EdgeInsets.all(5),
alignment: Alignment.centerRight,
child: Text(
'CANCEL',
style: TextStyle(fontSize: 20),
)),
])));
}
}
`
My expectation:
current output:
Just need to add ClipBehavior to Dialog.
import 'package:flutter/material.dart';
class CustomDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
const double padding = 1.0;
return Dialog(
backgroundColor: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
clipBehavior: Clip.antiAlias, // add clipBehavior
child: Column(mainAxisSize: MainAxisSize.min, children: [
Container(
margin: EdgeInsets.all(1),
width: double.infinity,
child: Text('title',
style: TextStyle(fontSize: 30, color: Colors.white)),
color: Colors.green,
),
Container(
color: Colors.white,
padding: EdgeInsets.all(10),
child: ListView(
shrinkWrap: true,
children: [
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
height: 30,
child: Text('one',
style: TextStyle(
fontSize: 20,
))),
],
),
),
Divider(
color: Colors.white,
),
Container(
color: Colors.white,
height: 50,
padding: EdgeInsets.all(5),
alignment: Alignment.centerRight,
child: Text(
'CANCEL',
style: TextStyle(fontSize: 20),
)),
]),
);
}
}
The issue was with the Container you used to wrap the other widgets, you can add specific border radius to each container to fix.
I added a demo and code to get what you wanted your output to look like:
class CustomDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
height: 340,
child: Column(
children: [
Container(
height: 60,
width: double.infinity,
padding: EdgeInsets.all(
15.0,
),
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(
15.0,
),
topRight: Radius.circular(
15.0,
),
),
),
child: Text(
'Baby Names',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
),
...List.generate(
5,
(index) => Padding(
padding: const EdgeInsets.all(10.0),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'List Names',
style: TextStyle(
fontSize: 18,
),
),
),
),
),
Divider(
color: Colors.grey[200],
thickness: 1.5,
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Align(
alignment: Alignment.centerRight,
child: Text(
'CANCEL',
style: TextStyle(
fontSize: 18,
color: Colors.green,
),
),
),
),
],
),
),
);
}
}
RESULT:
You added RoundedRectangleBorder(),
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: MyWidget(),
),
);
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Dialog(
backgroundColor: Colors.green,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Container(
padding: EdgeInsets.only(
top: 10.0,
bottom: 5,
left: 5,
right: 5,
),
margin: EdgeInsets.only(top: 5),
decoration: new BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(5),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 10.0,
offset: const Offset(0.0, 10.0),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min, // To make the card compact
children: <Widget>[
Text(
"Baby",
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.w700,
),
),
Divider(color: Colors.grey,),
SizedBox(height: 16.0),
Text(
"text",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16.0,
),
),
SizedBox(height: 24.0),
Align(
alignment: Alignment.bottomRight,
child: FlatButton(
onPressed: () {
Navigator.of(context).pop(); // To close the dialog
},
child: Text("buttonText"),
),
),
],
),
),
);
}
}