Increase Container height dynamically based on content inside card widget in Flutter - flutter

How to increase Container height dynamically based on content in card widget inside ListView.builder. I want the container to increase its height based on content but problem is scrollDirection: Axis.horizontal, inside listview.builder. How to solve this issue.
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
var height = MediaQuery.of(context).size.height;
var width = MediaQuery.of(context).size.width;
return Container(
height: height * 0.200, // Here i have to put some height to show card
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: 2,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
child: Card(
elevation: 0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.only(top: 5.0, right: 5.0),
child: Row(
children: [
Icon(
Icons.near_me,
size: 10.0,
),
Text(
'1 km',
style: TextStyle(fontSize: 10.0),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 5.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 5.0),
child: Container(
height: 80.0,
width: 80.0,
),
),
Padding(
padding: const EdgeInsets.only(
left: 10.0, right: 35.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: width * 0.40,
child: Text(
'test',
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: TextStyle(fontSize: 18.0),
),
),
Padding(
padding: const EdgeInsets.only(top: 5.0),
child: Row(
children: [
Text(
'test',
style: TextStyle(fontSize: 10.5),
)
],
),
),
Padding(
padding: const EdgeInsets.only(top: 5.0),
child: Row(
children: [
Icon(
Icons.location_on_outlined,
size: 12.0,
),
Container(
width: width * 0.40,
child: Text(
'test',
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: TextStyle(fontSize: 11.0),
),
),
],
),
)
],
),
),
],
),
),
],
)),
);
}),
);
}
}

Related

Exception caught by widgets library: Incorrect use of ParentDataWidget

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!!!

flutter i get a spacing in my listview design

i keep getting spacing like this on my app when i use the code below
class SellerProductList extends StatelessWidget {
const SellerProductList({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final userId = ModalRoute.of(context)!.settings.arguments as String;
final productProvider = Provider.of<ProductProvider>(context);
List<Product> productsList = productProvider.getBySellerIds(userId);
return Column(
children: [
Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
'Suggestion Products',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
),
TextButton(
onPressed: () {
Navigator.of(context).pushNamed(
FeedsScreen.routeName,
arguments: 'popular',
);
},
child: const Text('view all')),
],
),
),
Container(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0),
child: SizedBox(
width: double.infinity,
child: GridView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: productsList.length,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 2 / 3,
mainAxisSpacing: 0,
crossAxisSpacing: 10),
itemBuilder: (ctx, i) {
return ChangeNotifierProvider.value(
value: productsList[i],
child: const MainProduct(),
);
},
),
),
),
),
],
),
],
);
}
}
and this is the code that i use for the MainProduct()
the design of my listview product
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:toko_kita/models%20&%20providers/product.dart';
import 'package:toko_kita/screens/inner_screens/product_details_screen.dart';
class MainProduct extends StatefulWidget {
const MainProduct({Key? key}) : super(key: key);
#override
_MainProductState createState() => _MainProductState();
}
class _MainProductState extends State<MainProduct> {
#override
Widget build(BuildContext context) {
final productAttribute = Provider.of<Product>(context);
return InkWell(
onTap: () {
Navigator.of(context).pushNamed(ProductDetailsScreen.routeName,
arguments: productAttribute.id);
},
child: Container(
decoration: const BoxDecoration(
color: Colors.white,
),
child: Column(
children: [
Stack(
children: [
Column(
children: [
Positioned(
child: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: SizedBox(
height: 210,
width: 210,
child: FittedBox(
clipBehavior: Clip.hardEdge,
fit: BoxFit.cover,
child: Image.network(productAttribute.imageUrl)),
),
),
),
],
),
],
),
Padding(
padding: const EdgeInsets.only(left: 8, right: 8),
child: Container(
width: double.infinity,
height: 60,
decoration: const BoxDecoration(
color: Colors.white,
),
child: Column(
children: [
const SizedBox(
height: 8,
),
Container(
alignment: Alignment.centerLeft,
child: Text(
productAttribute.title,
maxLines: 2,
style: const TextStyle(
fontSize: 15,
overflow: TextOverflow.ellipsis,
),
textAlign: TextAlign.start,
),
),
const Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'\$ ${productAttribute.price}',
maxLines: 1,
style: const TextStyle(
fontSize: 16,
color: Colors.red,
overflow: TextOverflow.ellipsis,
),
),
Text(
'Sisa ${productAttribute.quantity}',
maxLines: 1,
style: const TextStyle(
fontSize: 12,
color: Colors.grey,
overflow: TextOverflow.ellipsis,
),
),
],
),
],
),
),
),
],
),
),
);
}
}
i havent use any sizedBox or any container widget to make of the top spacing. this just show on the top my listview. the other item didnt have any spacing that far. this is the listview i got in my phone
GridView widget has a default padding, try to remove the padding by giving it a padding of EgdeInsets.zero or the one you want.

how to use multi scroll in one screen -Flutter

I want to create an web ui in flutter like trello in that I want one horizontal primary scroll and one vertical secondary scroll but I am not able to scroll vertically in column I attach what I want to create and my code and if you still not understand please let me know
Here is my code :-
class PlaningWeekScreenWeb extends StatelessWidget {
const PlaningWeekScreenWeb({Key? key}) : super(key: key);
// Use this for set width of card and row in list
final double cardWidth = 180.0;
#override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(child: _getSideMenu()),
Container(
height: Get.height,
width: 1,
color: scrollBarColor,
),
Expanded(
child: _getMainScreen(),
flex: 6,
),
],
);
}
Widget _getMainScreen() {
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: ListView.builder(
itemCount: 4,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
scrollDirection: Axis.horizontal,
padding: EdgeInsets.zero,
itemBuilder: (context, i) {
return Row(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
width: cardWidth,
child: Row(
children: [
(10.0).addWSpace(),
"29".h3(
size: 25,
weight: FontWeight.w700,
color: GrayColor),
(5.0).addWSpace(),
Expanded(
child: "Sun".h3(
color: GrayColor,
weight: FontWeight.w400,
size: 15)),
(10.0).addWSpace(),
],
),
),
Container(
color: scrollBarColor,
height: 1,
width: cardWidth,
),
SizedBox(
width: cardWidth,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SingleChildScrollView(
primary: false,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
PlaningWeekCard(
device: Device.Web,
onTap: () {},
width: cardWidth,
),
PlaningWeekCard(
device: Device.Web,
onTap: () {},
width: cardWidth,
),
PlaningWeekCard(
device: Device.Web,
onTap: () {},
width: cardWidth,
),
PlaningWeekCard(
device: Device.Web,
onTap: () {},
width: cardWidth,
),
PlaningWeekCard(
device: Device.Web,
onTap: () {},
width: cardWidth,
),
PlaningWeekCard(
device: Device.Web,
onTap: () {},
width: cardWidth,
),
],
),
),
Container(
height: Get.height,
width: 1,
color: scrollBarColor,
),
],
),
),
],
),
],
);
}),
);
}
Widget _getSideMenu() {
return Container(
height: Get.height,
// width: 220,
child: SingleChildScrollView(
padding: EdgeInsets.zero,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
"Employers".h3(weight: FontWeight.w700, size: 22),
(10.0).addHSpace(),
PerytonSearchField(
hintText: 'Name',
),
(10.0).addHSpace(),
ExpansionTile(
title: Row(
children: [
PerytonCheckBox(val: false),
(5.0).addWSpace(),
Expanded(child: "Codonnier Offieces".expansionTileTittleWeb())
],
),
children: [
_getRow("Norway office"),
_getRow("Surat office"),
_getRow("Bardoli office"),
_getRow("Usa office"),
],
),
(10.0).addHSpace(),
ExpansionTile(
title: Row(
children: [
PerytonCheckBox(val: false),
(5.0).addWSpace(),
Expanded(child: "Codonnier Branches".expansionTileTittleWeb())
],
),
children: [
_getRow("Amsterdam office"),
_getRow("Surat office"),
_getRow("Suart-6 office"),
_getRow("california office"),
],
),
(10.0).addHSpace(),
ExpansionTile(
title: Row(
children: [
PerytonCheckBox(val: false),
(5.0).addWSpace(),
Expanded(
child: "Codonnier sub branches".expansionTileTittleWeb())
],
),
children: [
_getRow("van gogh branch"),
_getRow("Mota varacha branch"),
_getRow("vesu branch"),
_getRow("san francisco office"),
],
),
(10.0).addHSpace(),
"Workers".h3(weight: FontWeight.w700, size: 22),
(10.0).addHSpace(),
PerytonSearchField(
hintText: 'Name',
),
(10.0).addHSpace(),
_getRow("Harsh codonnier"),
(10.0).addHSpace(),
_getRow("Dipak codonnier"),
(10.0).addHSpace(),
_getRow("Subham codonnier"),
(10.0).addHSpace(),
_getRow("ravi codonnier"),
(10.0).addHSpace(),
],
).pSymmetricOnly(horizontal: 10),
),
);
}
Widget _getRow(String name) {
return Row(
children: [
PerytonCheckBox(val: false),
(5.0).addWSpace(),
Expanded(child: name.expansionTileWeb())
],
);
}
}
Here is my card widget:-
class PlaningDayCard extends StatelessWidget {
PlaningDayCard(
{Key? key,
required this.device,
required this.onTap,
required this.width})
: super(key: key);
final Device device;
final double width;
final Function onTap;
#override
Widget build(BuildContext context) {
return ResponsiveWidget(
mobile: _getMobileCard(),
tablet: _getWebCard(),
desktop: _getWebCard(),
device: device);
}
Widget _getWebCard() {
return SizedBox(
width: width - 2,
child: Card(
color: Colors.white,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white, width: 0.0),
borderRadius: BorderRadius.circular(15),
),
child: Material(
borderRadius: BorderRadius.circular(15),
clipBehavior: Clip.antiAlias,
color: Colors.transparent,
child: InkWell(
onTap: () {
onTap.call();
},
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: "Scrubbing sinks, tubs, showers"
.h2(weight: FontWeight.w700, size: 15),
),
],
),
(6.0).addHSpace(),
Row(
children: [
ImageAssetIconWithColor(
color: GrayColor,
size: 15,
image: ImageIcons.icTriangle,
),
(8.0).addWSpace(),
Expanded(
child: "Main Office".h2(
weight: FontWeight.w500,
color: GrayColor,
size: 14),
),
],
),
(8.0).addWSpace(),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
"09:00—13:00".h2(
weight: FontWeight.w700, color: GrayColor, size: 13),
],
)
],
).pSymmetricOnly(vertical: 5, horizontal: 6),
),
)),
);
}
Widget _getMobileCard() {
return SizedBox(
width: width - 2,
child: Card(
color: Colors.white,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.white, width: 0.0),
borderRadius: BorderRadius.circular(15.sp),
),
child: Material(
borderRadius: BorderRadius.circular(15.sp),
clipBehavior: Clip.antiAlias,
color: Colors.transparent,
child: InkWell(
onTap: () {
onTap.call();
},
child: Column(
children: [],
),
),
)),
);
}
}
Complete Running Code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Container(
height: 200,
child: GridView.count(
scrollDirection: Axis.horizontal,
crossAxisCount: 1 ,
children: List.generate(50,(index){
return Container(
child: Card(
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: <Widget>[
Container(
width: 50,
height: 100,
color: Colors.yellowAccent,
),
Container(
width: 50,
height: 100,
color: Colors.blue,
),
Container(
width: 50,
height: 100,
color: Colors.green,
),
Container(
width: 50,
height: 100,
color: Colors.red,
),Container(
width: 50,
height: 100,
color: Colors.yellowAccent,
),
Container(
width: 50,
height: 100,
color: Colors.blue,
),
Container(
width: 50,
height: 100,
color: Colors.green,
),
Container(
width: 50,
height: 100,
color: Colors.red,
)
],
),
color: Colors.amber,
),
);
}),
),
) ),
),
),
);
}
}
Complete Tested Code
import 'dart:math';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
class TrelloExample extends StatefulWidget {
const TrelloExample({Key? key}) : super(key: key);
#override
State<TrelloExample> createState() => _TrelloExampleState();
}
class _TrelloExampleState extends State<TrelloExample> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Padding(
padding: const EdgeInsets.only(top: 64.0),
child: ScrollConfiguration(
behavior: ScrollConfiguration.of(context).copyWith(
dragDevices: {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
},
),
child: SingleChildScrollView(
physics: const ClampingScrollPhysics(),
scrollDirection: Axis.horizontal,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: List.generate(
16,
(index) => SingleChildScrollView(
physics: const ClampingScrollPhysics(),
child: Padding(
padding: EdgeInsets.only(
right: 16.0, left: index == 0 ? 16.0 : 0.0),
child: Column(
children: List.generate(
index % 2 == 1
? 16
: index % 3 == 1
? 8
: index % 1 == 1
? 4
: 6,
(index) => Padding(
padding: const EdgeInsets.only(bottom: 16.0),
child: Material(
elevation: 4.0,
child: Container(
padding: const EdgeInsets.all(38.0),
color: Color(
(Random().nextDouble() * 0xFFFFFF).toInt())
.withOpacity(1.0),
child: Text(
"Trello Ticket Item $index",
style: const TextStyle(
fontSize: 16.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
),
),
),
),
),
),
),
),
);
}
}
You can achieve this with more than one ways. But I think the simplest way is that make Row as parent widget put all the ListView in Row after wrapping every ListView by Expanded widget.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0),
child: Row(
children: <Widget>[
Expanded(
child: ListView.separated(
itemCount: 10,
controller: ScrollController(),
separatorBuilder: (_, __) => const SizedBox(height: 10),
itemBuilder: ((context, index) => Container(
height: 80,
width: double.infinity,
color: Colors.red,
)),
),
),
const SizedBox(width: 10),
Expanded(
child: ListView.separated(
controller: ScrollController(),
itemCount: 2,
separatorBuilder: (_, __) => const SizedBox(height: 10),
itemBuilder: ((context, index) => Container(
height: 100,
width: double.infinity,
color: Colors.yellow,
)),
),
),
const SizedBox(width: 10),
Expanded(
child: ListView.separated(
controller: ScrollController(),
itemCount: 6,
separatorBuilder: (_, __) => const SizedBox(height: 10),
itemBuilder: ((context, index) => Container(
height: 70,
width: double.infinity,
color: Colors.green,
)),
),
)
],
),
),
);
}
Wrap with SingleChildScrollView over every page you want to scroll.
And also mention the scrollDirection: Axis.vertical.
I hope it works! :)
First must wrap it with a single scroll child view.
Then wrap it in rows,
Then wrap it in a ListView
Use expanded so everything can be seen.
I hope this works for you.
class myScroll extends MaterialScrollBehavior {
#override
Set<PointerDeviceKind> get dragDevices => {
PointerDeviceKind.touch,
PointerDeviceKind.mouse,
};
}

How can I use a gridview inside a column?

I have a column with a container that acts as a header and a gridview of widgets below.
I want only the gridview to be scrollable and that the header will not move and always be displayed.
This is my code:
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: [
Container(
margin: EdgeInsets.only(left: 24, right: 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 22),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Message("Hello, Guest!", size: 32),
Icon(
CustomIcons.statistics,
color: AppColors.blue,
size: 32.0,
),
],
),
SizedBox(height: 14),
Message("What worries you now? Select or Add.", size: 14),
],
),
),
SizedBox(height: 16),
GridView.count(
primary: true,
shrinkWrap: true,
crossAxisCount: 2,
crossAxisSpacing: 40.0,
mainAxisSpacing: 40.0,
padding: const EdgeInsets.all(20.0),
children: _items,
),
],
),
),
);
}
}
When it runs I get a renderflex overflowed error:
When I wrap my gridview in an expanded widget as some answers suggested, the scroll gets out of bounds:
Appreciate the help!
Remove expnaded and wrap your safe area With SingleChildScrollView, and also add phyiscs:ScrollPhysics() in gridview
Wrap your Column with a SingleChildScrollView, A Column will always try to shrink-wrap its children, using Expanded tells the GridView to only take up the available space.
Another alternative is if your GridView doesn't grow in too much size is to use the shrink-wrap: true and use physics: const NeverScrollablePhyscis(), that way the GridView won't try to grow to infinite size.
You can wrap your Column inside a SingleChildScrollView widget to make the whole column scrollable. The Code Should be :
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child:Column(
children: [
Container(
margin: EdgeInsets.only(left: 24, right: 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 22),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Message("Hello, Guest!", size: 32),
Icon(
CustomIcons.statistics,
color: AppColors.blue,
size: 32.0,
),
],
),
SizedBox(height: 14),
Message("What worries you now? Select or Add.", size: 14),
],
),
),
SizedBox(height: 16),
SingleChildScrollView(
child: GridView.count(
primary: true,
shrinkWrap: true,
crossAxisCount: 2,
crossAxisSpacing: 40.0,
mainAxisSpacing: 40.0,
padding: const EdgeInsets.all(20.0),
children: _items,
),
),
],
),
),
);
}
}
You need to use a combination of Stack, ListView and Column widgets. Here's how to do it:
return Scaffold(
body: SafeArea(
child: Stack(
children: [
SizedBox(height: 16),
ListView(
shrinkWrap: true,
children: [
GridView.count(
primary: true,
shrinkWrap: true,
crossAxisCount: 2,
crossAxisSpacing: 40.0,
mainAxisSpacing: 40.0,
padding: const EdgeInsets.all(20.0),
children: [
Container(
margin: EdgeInsets.all(20),
color: Colors.red,
height: 200,
width: 200,
),
Container(
margin: EdgeInsets.all(20),
color: Colors.amber,
height: 200,
width: 200,
),
Container(
margin: EdgeInsets.all(20),
color: Colors.blue,
height: 200,
width: 200,
),
Container(
margin: EdgeInsets.all(20),
color: Colors.green,
height: 200,
width: 200,
),
],
),
],
),
Container(
color: Colors.white,
height: MediaQuery.of(context).size.height * 0.2,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 22),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Hello, Guest!"),
Icon(
Icons.ac_unit,
color: Colors.blue,
size: 32.0,
),
],
),
SizedBox(height: 14),
Text("What worries you now? Select or Add."),
],
),
),
],
),
),
);

Flutter: Pressing on Card Widget in ListView Not Working

I have ListView builder adsList which contains LstTiles adTile contains the Card.
When I press the Card widget I expect an action and to navigate to another screen or just print in console, but nothing happens although I wrapped the card inside GestureDetector.
here is the code
class _AdTileState extends State<AdTile> {
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(top: 8),
child: GestureDetector(
onTap: (){
print('card pressed');
Navigator.push(context, new MaterialPageRoute(builder: (context) => AdView()));
},
child: Card(
margin: EdgeInsets.fromLTRB(20, 6, 20, 0),
child: ListTile(
trailing: Image.network(widget.adModel.adImage),
title: Text(widget.adModel.adName),
subtitle: Text(widget.adModel.location),
),
),
),
);
}
}
Here is the code inside AdList:
class _AdsListState extends State<AdsList> {
#override
Widget build(BuildContext context) {
final ads = Provider.of<List<AdModel>>(context);
return ListView.builder(
scrollDirection: Axis.vertical,
itemCount:(ads == null) ? 0 : ads.length,
itemBuilder: (context, index){
return
CustomAdTile(adModel: ads[index],);
});
}
}
And here is the code on the Page which show the ListView Builder:
Widget build(BuildContext context) {
return StreamProvider<List<Profile>>.value(
value: DatabaseService().profiles,
child: StreamProvider<List<AdModel>>.value(
value: DatabaseService().ads,
child: Directionality(
textDirection: TextDirection.rtl,
child: Scaffold(
appBar: AppBar(),
body: Column(
children: <Widget>[
Container(),
Row(),
Expanded(
child: AdsList()
),
],
),
Code for CustomAdTile:
class _CustomAdTileState extends State<CustomAdTile> {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 5.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 3,
child: Padding(
padding: const EdgeInsets.fromLTRB(0.0, 0.0, 10.0, 0.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
widget.adModel.adName,
style: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14.0,
),
),
const Padding(padding: EdgeInsets.symmetric(vertical: 2.0)),
Text(
widget.adModel.location,
style: const TextStyle(fontSize: 10.0),
),
const Padding(padding: EdgeInsets.symmetric(vertical: 1.0)),
Text(
'${widget.adModel.category} views',
style: const TextStyle(fontSize: 10.0),
),
],
),
),
),
const Icon(
Icons.more_vert,
size: 16.0,
),
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
image: DecorationImage(image: NetworkImage(widget.adModel.adImage),
fit: BoxFit.fill),
),
)
],
),
);
}
}
It looks like you are never using AdTile, you are using CustomAdTile. You need to add the onTap inside CustomAdTile.
Here is the updated code for CustomAdTile.
class _CustomAdTileState extends State<CustomAdTile> {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 5.0),
child: InkWell(
///Add onTap here
onTap: () {
print('card pressed');
Navigator.push(
context, new MaterialPageRoute(builder: (context) => AdView()));
},
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 3,
child: Padding(
padding: const EdgeInsets.fromLTRB(0.0, 0.0, 10.0, 0.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
widget.adModel.adName,
style: const TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14.0,
),
),
const Padding(padding: EdgeInsets.symmetric(vertical: 2.0)),
Text(
widget.adModel.location,
style: const TextStyle(fontSize: 10.0),
),
const Padding(padding: EdgeInsets.symmetric(vertical: 1.0)),
Text(
'${widget.adModel.category} views',
style: const TextStyle(fontSize: 10.0),
),
],
),
),
),
const Icon(
Icons.more_vert,
size: 16.0,
),
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(widget.adModel.adImage),
fit: BoxFit.fill),
),
)
],
),
),
);
}
}