The same 2 errors appear in 2 different files when I run my flutter program, does anyone know how to fix this? this is my code
code for list restaurant.dart
import 'package:flutter/material.dart';
import 'package:resto_app/data/model/restaurant_list.dart';
import 'package:resto_app/ui/detail_page.dart';
class CardRestaurant extends StatelessWidget {
final Restaurant restaurant;
const CardRestaurant({Key? key, required this.restaurant}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: InkWell(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) {
return RestaurantDetailPage(idrestaurant: restaurant.id);
}));
},
child: Stack(
children: <Widget>[
Container(
margin:
const EdgeInsets.only(left: 40, top: 5, right: 20, bottom: 5),
height: 170.0,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.lime.shade100,
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: const EdgeInsets.only(
left: 200, top: 20, right: 20, bottom: 20),
child: Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
width: 120.0,
child: Expanded(child: Text(restaurant.name)),
),
_sizebox(10),
Row(
children: [
_icon(Icons.star_rate, 20, Colors.yellow),
Text(
' ${restaurant.rating}',
),
],
)
],
),
),
),
),
Positioned(
left: 20.0,
top: 15.0,
bottom: 15.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Hero(
tag: restaurant.pictureId,
child: Image.network(
"https://restaurant-api.dicoding.dev/images/small/" +
restaurant.pictureId,
width: 200,
fit: BoxFit.cover,
),
),
),
),
],
),
),
);
}
}
Widget _sizebox(double height) {
return SizedBox(
height: height,
);
}
Widget _icon(IconData icon, double size, Color color) {
return Icon(
icon,
size: size,
color: color,
);
}
and my detailrestaurant.dart code
`
`import 'package:flutter/material.dart';
import 'package:resto_app/data/model/restaurants_detail.dart';
import 'package:resto_app/common/constant.dart';
class RestaurantDetail extends StatelessWidget {
static const routeName = '/restaurant_detail';
final Restaurant restaurant;
const RestaurantDetail({Key? key, required this.restaurant})
: super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Hero(
tag: restaurant.pictureId,
child: Image.network(
"https://restaurant-api.dicoding.dev/images/medium/" +
restaurant.pictureId,
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(restaurant.name),
_sizebox(10),
Row(
children: [
_icon(Icons.location_city, 20, Colors.grey),
const SizedBox(
width: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(restaurant.city),
Text(restaurant.address),
],
)
],
),
],
),
Row(
children: [
_icon(Icons.star_rate, 20, Colors.yellow),
Text(
' ${restaurant.rating}',
),
],
)
],
),
),
_barrierContent(),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding:
const EdgeInsets.only(top: 10, right: 20, left: 20),
child: Text('Description'),
),
Container(
padding: const EdgeInsets.only(
top: 10, right: 20, left: 20, bottom: 20),
width: double.infinity,
child: Text(restaurant.description)),
],
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 20),
child: Column(
children: [
Text('Category'),
ListBody(
children: restaurant.categories.map((food) {
return Text(
'- ${food.name}',
);
}).toList(),
),
],
),
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 20),
child: Column(
children: [
Text('Menu Food'),
ListBody(
children: restaurant.menus.foods.map((categori) {
return Text(
'- ${categori.name}',
);
}).toList(),
),
],
),
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 20),
child: Column(
children: [
Text('Menu Drink'),
ListBody(
children: restaurant.menus.drinks.map((drink) {
return Text('- ${drink.name}');
}).toList(),
),
],
),
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 10),
child: Column(
children: [
Text('Comment'),
ListBody(
children: restaurant.customerReviews.map((review) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Expanded(
child: Row(children: [
Container(
width: 40,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue),
child: Center(
child: Text(
review.name.characters.elementAt(0),
style: const TextStyle(
color: Colors.white, fontSize: 20),
)),
),
const SizedBox(
width: 15,
),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
review.name,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold),
),
Text(
' ${review.date}',
style: TextStyle(
fontSize: 14,
color: Colors.grey.shade500),
)
],
),
SizedBox(
width: 270,
child: Text(
review.review,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
)
],
),
)
]),
),
);
}).toList(),
),
],
),
),
_barrierContent()
],
),
],
),
),
),
);
}
}
Widget _barrierContent() {
return Container(
height: 10,
color: Colors.grey.shade200,
);
}
Widget _sizebox(double height) {
return SizedBox(
height: height,
);
}
Widget _icon(IconData icon, double size, Color color) {
return Icon(
icon,
size: size,
color: color,
);
}
`
``
error
The same 2 errors appear in 2 different files when I run my flutter program, does anyone know how to fix this?
child: Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
width: 120.0,
child: Expanded(child: Text(restaurant.name)),
),
parent of Expanded must be Stack, Column, Row but in your example it's wrong
You should use Expanded only within a Column, Row or Flex & that to its top most child only
Here you have use Expanded widget inside padding widget which is inside stack and also you can't use Expanded inside stack, so it causing this ParentDataWidget Error
code for list restaurant.dart
class CardRestaurant extends StatelessWidget {
final Restaurant restaurant;
const CardRestaurant({Key? key, required this.restaurant}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: InkWell(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) {
return RestaurantDetailPage(idrestaurant: restaurant.id);
}));
},
child: Stack( //---------------
children: <Widget>[
Container(
margin:
const EdgeInsets.only(left: 40, top: 5, right: 20, bottom: 5),
height: 170.0,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.lime.shade100,
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(//---------
padding: const EdgeInsets.only(
left: 200, top: 20, right: 20, bottom: 20),
child: Expanded(//--------- you can't use expanded inside Stack
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
width: 120.0,
child: Expanded(child: Text(restaurant.name)),
),
_sizebox(10),
and my detailrestaurant.dart code
class RestaurantDetail extends StatelessWidget {
static const routeName = '/restaurant_detail';
final Restaurant restaurant;
const RestaurantDetail({Key? key, required this.restaurant})
: super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Hero(
tag: restaurant.pictureId,
child: Image.network(
"https://restaurant-api.dicoding.dev/images/medium/" +
restaurant.pictureId,
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(restaurant.name),
_sizebox(10),
Row(
children: [
_icon(Icons.location_city, 20, Colors.grey),
const SizedBox(
width: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(restaurant.city),
Text(restaurant.address),
],
)
],
),
],
),
Row(
children: [
_icon(Icons.star_rate, 20, Colors.yellow),
Text(
' ${restaurant.rating}',
),
],
)
],
),
),
_barrierContent(),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding:
const EdgeInsets.only(top: 10, right: 20, left: 20),
child: Text('Description'),
),
Container(
padding: const EdgeInsets.only(
top: 10, right: 20, left: 20, bottom: 20),
width: double.infinity,
child: Text(restaurant.description)),
],
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 20),
child: Column(
children: [
Text('Category'),
ListBody(
children: restaurant.categories.map((food) {
return Text(
'- ${food.name}',
);
}).toList(),
),
],
),
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 20),
child: Column(
children: [
Text('Menu Food'),
ListBody(
children: restaurant.menus.foods.map((categori) {
return Text(
'- ${categori.name}',
);
}).toList(),
),
],
),
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 20),
child: Column(
children: [
Text('Menu Drink'),
ListBody(
children: restaurant.menus.drinks.map((drink) {
return Text('- ${drink.name}');
}).toList(),
),
],
),
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 10),
child: Column(
children: [
Text('Comment'),
ListBody(//--- this is top most child
children: restaurant.customerReviews.map((review) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Expanded(//--------- This causing problem here, you can only use Exapnded to column top most child
child: Row(children: [
Container(
width: 40,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue),
child: Center(
child: Text(
review.name.characters.elementAt(0),
style: const TextStyle(
color: Colors.white, fontSize: 20),
)),
),
const SizedBox(
width: 15,
),
Expanded(//---- This one also causing Problem
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
review.name,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold),
),
Text(
' ${review.date}',
style: TextStyle(
fontSize: 14,
color: Colors.grey.shade500),
)
],
),
SizedBox(
width: 270,
child: Text(
review.review,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
)
],
),
)
]),
),
);
}).toList(),
),
],
),
),
_barrierContent()
],
),
],
),
),
),
);
}
}
Keep this point in mind to avoid basic error
Most common one Expanded can only use to a descendant of Column,Row & Flex
Don't use Positioned under Row or Column instead use Align
Under ListView don't use Spacer instead use SizedBox
Hope this might help you to solve your Error
Happy Learning!!!
Related
I have a container with width MediaQuery.of(context).size.width / 1.75.When I minimize screen size text inside the container is overflowing.
This is the output I got now:
class ProfileTopPortion extends StatelessWidget {
const ProfileTopPortion({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(18.0),
child: Container(
width: MediaQuery.of(context).size.width / 1.75,
decoration: BoxDecoration(
border: Border.all(color: Color(0xffEBEBEB), width: 0.4),
color: Color(0xfffbfbfa),
),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () {
// Get.toNamed('/events',arguments: 0);
},
child: Padding(
padding: const EdgeInsets.only(top: 0.0),
child: SvgPicture.asset(
allowDrawingOutsideViewBox: true,
Images.avatar,
),
)),
),
),
SizedBox(
width: 20,
),
Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'First Name',
),
SizedBox(
height: 6,
),
Text(
'Engineer',
),
SizedBox(
height: 20,
),
Row(
children: [
Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Email',
),
SizedBox(
height: 10,
),
Text(
'Organization',
),
],
),
SizedBox(
width: 30,
),
Column(
mainAxisSize: MainAxisSize.min,
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'testEmail1235#gmail.com',
),
SizedBox(
height: 10,
),
Text("Test12346#gma.com"),
],
)
],
),
SizedBox(
height: 25,
),
],
),
],
),
),
),
],
),
);
}
}
I tried flexible and expanded widgets but nothing works.
You need to use Expanded in two widget, try this:
Padding(
padding: const EdgeInsets.all(18.0),
child: Container(
width: MediaQuery.of(context).size.width / 1.75,
decoration: BoxDecoration(
border: Border.all(color: Color(0xffEBEBEB), width: 0.4),
color: Color(0xfffbfbfa),
),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () {
// Get.toNamed('/events',arguments: 0);
},
child: Padding(
padding: const EdgeInsets.only(top: 0.0),
child: SvgPicture.asset(
allowDrawingOutsideViewBox: true,
Images.avatar,
),
)),
),
),
SizedBox(
width: 20,
),
Expanded(//<---- add this
child: Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'First Name',
),
SizedBox(
height: 6,
),
Text(
'Engineer',
),
SizedBox(
height: 20,
),
Row(
children: [
Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Email',
),
SizedBox(
height: 10,
),
Text(
'Organization',
),
],
),
SizedBox(
width: 30,
),
Expanded(//<---- add this
child: Column(
mainAxisSize: MainAxisSize.min,
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'testEmail1235#gmail.com',
overflow: TextOverflow.ellipsis,//<---- add this
),
SizedBox(
height: 10,
),
Text(
"Test12346#gma.com",
overflow: TextOverflow.ellipsis,//<---- add this
),
],
),
)
],
),
SizedBox(
height: 25,
),
],
),
),
],
),
),
),
wrap this column to expanded and also wrap the inner texts into flexible
Expanded( child: Column(
mainAxisSize: MainAxisSize.min,
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Flexible(child:Text(
'testEmail1235#gmail.com',
)),
SizedBox(
height: 10,
),
Flexible(child:Text("Test12346#gma.com")),
],
),)
Wrap your text with FittedBox
FittedBox(
child: Text(
"your text",
),
),
Instead of using height and width for container you can use the constraints property i.e
constraints:Boxconstrains(
maxWidth:double.infinity,
maxHeight:double.infinity,
),
It will resize the container height and width according to the text inside.
You can use padding for further decoration
I need a listview inside a row.
class Profiles extends StatelessWidget {
const Profiles({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
SideBar(),
Expanded(
child: ListView(
children: [
Wrap(
children: [
Padding(
padding: const EdgeInsets.only(top: 40.0, left: 45),
child: Container(
width: MediaQuery.of(context).size.width / 1.75,
decoration: BoxDecoration(
border: Border.all(color: Color(0xffEBEBEB)),
color: Color(0xfffbfbfa),
),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Positioned(
right: 0,
top: 0,
child: Align(
alignment: Alignment.topRight,
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: Text(
"Edit",
),
),
),
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () {
// Get.toNamed('/events',arguments: 0);
},
child: Padding(
padding:
const EdgeInsets.only(top: 0.0),
child: SvgPicture.asset(
allowDrawingOutsideViewBox: true,
Images.avatar,
),
)),
),
SizedBox(
width: 20,
),
Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'FirstName',
textAlign: TextAlign.left,
),
SizedBox(
height: 6,
),
Text("Update your role"),
SizedBox(
height: 20,
),
Row(
children: [
Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Email',
textAlign: TextAlign.left,
),
SizedBox(
height: 10,
),
Text(
'Organization',
textAlign: TextAlign.left,
),
],
),
SizedBox(
width: 30,
),
Column(
mainAxisSize: MainAxisSize.min,
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'email',
textAlign: TextAlign.left,
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
SizedBox(
height: 10,
),
Text(
"NA",
),
],
)
],
)
],
),
],
),
],
)
],
),
),
),
],
)
],
))
],
),
);
}
}
SideBar() is a Column widget having multiple elements. Code of the sidebar is,
class SideBar extends StatefulWidget {
#override
State<SideBar> createState() => _SideBarState();
}
class _SideBarState extends State<SideBar> {
#override
Widget build(BuildContext conText) {
return Material(
elevation: 1,
child: Container(
width: 70,
color: Color(0xFAFAFB),
child: Padding(
padding: const EdgeInsets.only(top: 15.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
SvgPicture.asset(
Images.topStoriesIcon,
),
SvgPicture.asset(
Images.topStoriesIcon,
),
SvgPicture.asset(
Images.topStoriesIcon,
)
],
),
],
),
),
),
);
}
}
I got an error: Assertion failed: constraints.hasBoundedWidth is not true.
But listview is working when I wrap with Expanded widget like this,
Row(
children: [
SideBar(),
Expanded(
child: ListView(
shrinkWrap: true,
children: [
],
),
)
],
).
But at that time I got Incorrect ParentWidget error
I tried many ways but didn't get results.
The expected result is attached below,
enter image description here
You can use Positioned widget as Stack child, you dont need to have on Column
child: Stack(
children: [
Positioned( // if needed put it here
top: 0,
right: 0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align( /// not here
alignment: Alignment.topRight,
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: Text(
"Edit",
),
),
),
Row(
mainAxisSize: MainAxisSize.min,
I have a somewhat complicated widget tree and can't figure this out. I've tried wrapping the Scaffold body in a SingleChildScrollView but for some reason it just makes the Container shrink and does not scroll. Here is the build function code:
return Stack(
children: [
Scaffold(
resizeToAvoidBottomInset: false,
body: Stack(
children: [
background(),
Padding(
padding: const EdgeInsets.only(top: 55),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('assets/logo.png', height: 100),
const SizedBox(width: 5),
const Text('GLOBE',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
color: Color(0xFF7FCCDC)))
],
),
),
Padding(
padding: const EdgeInsets.only(
top: 175, left: 35, right: 35, bottom: 50),
child: Container(
decoration: BoxDecoration(
color: const Color(0xFFFCFBF4).withOpacity(0.5),
borderRadius: BorderRadius.circular(20),
),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text('Welcome!',
style: TextStyle(
fontSize: 30, color: Color(0xFF6B6FAB))),
],
),
loginForm()
],
),
),
),
],
),
),
if (_isLoading)
const Opacity(
opacity: 0.8,
child: ModalBarrier(dismissible: false, color: Colors.black),
),
if (_isLoading)
const Center(
child: CircularProgressIndicator(color: Color(0xFFb1bbd8)),
),
],
);
Return a scaffold and add a sized box of height and width same as device. As a body use stack. Then in children add the next stack.
return Scaffold(
resizeToAvoidBottomInset: false,
body: SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Stack(
children: [
background(),
SizedBox(
height:MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: SingleChildScrollView(
child: Column(
mainAxisSize : MainAxisSize.min,
children:[
Padding(
padding: const EdgeInsets.only(top: 55),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('assets/logo.png', height: 100),
const SizedBox(width: 5),
const Text('GLOBE',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
color: Color(0xFF7FCCDC)))
],
),
),
Padding(
padding: const EdgeInsets.only(
top: 100, left: 35, right: 35, bottom: 50),
child: Container(
decoration: BoxDecoration(
color: const Color(0xFFFCFBF4).withOpacity(0.5),
borderRadius: BorderRadius.circular(20),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text('Welcome!',
style: TextStyle(
fontSize: 30, color: Color(0xFF6B6FAB))),
],
),
loginForm()
],
),
),
),
]
)
)
if (_isLoading)
const Opacity(
opacity: 0.8,
child: ModalBarrier(dismissible: false, color: Colors.black),
),
if (_isLoading)
const Center(
child: CircularProgressIndicator(color: Color(0xFFb1bbd8)),
),
]
)
)
)
TextField has a property called scrollPadding.
scrollPadding: EdgeInsets.only(bottom: 40)
By default it is set to EdgeInsets.all(20.0)
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
const Align(
alignment: Alignment.topRight,
child: CircleAvatar(
radius: 30,
backgroundImage: AssetImage('images/image.jpeg'),
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: const Color(0xff0277bd)),
width: 350,
height: 120,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Padding(
padding: EdgeInsets.fromLTRB(10, 30, 0, 15),
child: Text(
"New way to pay",
style: TextStyle(fontSize: 25, color: Colors.white),
),
),
Padding(
padding: EdgeInsets.only(left: 10),
child: Text(
"Try Uber Cash->",
style: TextStyle(fontSize: 18, color: Colors.white),
),
),
]),
),
Row(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(20, 20, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey[200]),
width: 160,
height: 120,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(80, 0, 5, 10),
child: Image.asset(
'images/carIcon.png',
width: 80,
height: 80,
),
),
const Padding(
padding: EdgeInsets.only(left: 12),
child: Text(
"Ride",
style: TextStyle(
fontSize: 20,
),
),
),
],
)),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 20, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey[200]),
width: 160,
height: 120,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(80, 0, 5, 10),
child: Image.asset(
'images/box.png',
width: 80,
height: 80,
),
),
const Padding(
padding: EdgeInsets.only(left: 12),
child: Text(
"Packages",
style: TextStyle(
fontSize: 20,
),
),
),
],
),
),
),
],
),
Row(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(20, 15, 0, 0),
child: ElevatedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.grey[300])),
onPressed: () {},
child: const Padding(
padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
child: Text(
"Enter pickup point",
style: TextStyle(fontSize: 25, color: Colors.black),
),
)),
),
ElevatedButton(
onPressed: () {},
child: const Expanded(
child: ListTile(
leading: Image(image: AssetImage('images/clock.png')),
title: Text("Now"),
trailing: Icon(Icons.arrow_drop_down),
),
))
],
)
],
),
);
}
}
The offending code is
Row(
children: [
Padding(...),
ElevatedButton(
onPressed: () {},
child: const Expanded(
child: ListTile(...),
),
)
],
)
You can't use an Expanded widget inside an ElevatedButton, only as a child of a Flex widget (e.g. Rows and Columns). Try refactoring this widget to
Row(
children: [
Padding(...),
Expanded(
child: ElevatedButton(
onPressed: () {},
child: ListTile(...),
),
),
],
)
I'm new to flutter, I'm trying to show cards in categories, I've made a module with the categories and items, including id for the categories and matching id for the item(one item can be in multiple categories ) but I don't know how to sort them
this is the main screen
Widget _buildIcon(int index) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: GestureDetector(
onTap: () {
setState(() {
_selectedIndex = index;
String id = DUMMY_CATEGORIES[index].id;
print(id);
});
},
child: Container(
height: 45,
width: 100,
decoration: BoxDecoration(
color: _selectedIndex == index
? Color.fromRGBO(126, 214, 223, 0.5)
: Color.fromRGBO(200, 214, 229,0.3),
borderRadius: BorderRadius.circular(80)),
child: Center(
child: Text(
DUMMY_CATEGORIES[index].title, style: TextStyle(color: _selectedIndex==index ?Color.fromRGBO(16, 172, 132, 1) : Colors.black, ),
),
),
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
Column(
children: <Widget>[
Container(
padding: EdgeInsets.only(right: 10, top: 20),
alignment: Alignment.topRight,
child: IconButton(
icon: Icon(
Icons.search,
size: 25,
),
)),
Container(
padding: EdgeInsets.only(left: 10),
alignment: Alignment.topLeft,
child: Text(
'Make it Bread',
style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
)),
],
),
SizedBox(
height: 30,
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: DUMMY_CATEGORIES
.asMap()
.entries
.map((MapEntry map) => _buildIcon(map.key))
.toList()
),
),
NewMealIteam(),
],
),
);
}
}
and this is the item
Widget build(BuildContext context) {
return Padding(padding: EdgeInsets.symmetric(horizontal: 10, vertical: 45),
child: Container(
height: 450,
//color: Colors.orange,
child: ListView.builder(itemCount: mealList.length,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context ,int index){
Meal mealLists = mealList[index];
return Container(
width: 280,
child: Stack(children: <Widget>[
Container(
height: 450,
margin: EdgeInsets.all(10),
padding: EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),
color: Colors.red,
image: DecorationImage(
image: AssetImage('assets/dough.png'
),fit: BoxFit.fill
),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 2.0,
spreadRadius: 0.0,
offset: Offset(3.0, 2.0), // shadow direction: bottom right
)
],),
),
Positioned(bottom :20 ,left: 20,child: Column(
children: <Widget>[
Container(width: 170,
padding: EdgeInsets.symmetric(vertical: 25),
child: Text(mealLists.title,style: TextStyle(color:Colors.white,fontSize: 32),textAlign: TextAlign.start,overflow: TextOverflow.fade
,),
),
Padding(
padding: EdgeInsets.all(2),
child: Container(width:220,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row( mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.schedule),
SizedBox(
width: 6,
),
Text('${mealLists.duration} min'),
],
),
Row( mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.work),
SizedBox(
width: 8,
),
],
),
Row( mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.monetization_on),
SizedBox(
width: 6,
),
// Text('${durations} min'),
],
),
],
),
),
)
],
))
],),
);
},
),
),
);
}
}
this is example for the module list
Category(
id: 'c1',
title: 'sour bread',
),
Meal(
id: 'm1',
categories: [
'c1',
'c2',
],
title: 'Sour Dough',
),
thanks