RenderFlex children have non-zero flex but incoming width constraints are unbounded - android

I am writing code for my news project in flutter.I have copied this code from one tutorial. But I got exceptions and errors in my code. Anybody please help me to solve the issues. My code is:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(97),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 32),
decoration: BoxDecoration(
color: Colors.white,
border: Border(
bottom: BorderSide(
width: 0.5,
color: Colors.white,
))),
child: AppBar(
title: Text(
'News',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 30,
),
),
),
// height: 100,
)
]),
),
body: ListView.builder(
itemBuilder: (context, index) {
return _listItem(index);
},
itemCount: _newsInApp.length,
));
}
My console output is:
Launching lib/main.dart on iPhone 11 Pro Max in debug mode...
Running Xcode build...
Xcode build done. 22.9s
Syncing files to device iPhone 11 Pro Max...
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following assertion was thrown during performLayout():
flutter: RenderFlex children have non-zero flex but incoming width constraints are unbounded.


Replace your listItem widget method with :
_listItem(index) {
return Padding(
padding: const EdgeInsets.only(left: 15, top: 1, right: 1, bottom: 1),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.only(bottom: 15),
child: Text(
_newsInApp[index].title,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
),
IconButton(
iconSize: 16,
color: Colors.black26,
icon: Icon(Icons.arrow_forward_ios),
onPressed: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) {},
),
),
),
],
),
);
}

Related

Flutter release version not showing page correctly

i'm trying to build a release version of my flutter app using the cmd flutter build apk, the problem is that one page does not show any content. In the debug version it all works fine, but in the release version that page does not work properly.
The 2 images below show the output for the 2 versions.
Debug version:
Release version:
Code of the page in which the bug occurs:
class ProductListPage extends StatefulWidget {
ProductListPage(
{Key? key,
Title? title,
required this.subCatId,
required this.subCatName})
: super(key: key);
final String title = '';
static const String page_id = 'Product List';
int subCatId;
String subCatName;
#override
State<ProductListPage> createState() => _ProductListPageState();
}
class _ProductListPageState extends State<ProductListPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.white,
automaticallyImplyLeading: true,
iconTheme: IconThemeData(color: style.appColor),
title: Text(widget.subCatName),
centerTitle: false,
titleTextStyle: style.pageTitle(),
actions: [
IconButton(onPressed: () {}, icon: Icon(Icons.search)),
IconButton(onPressed: () {}, icon: Icon(Icons.share_outlined))
],
),
body:
_buildBody(), // This trailing comma makes auto-formatting nicer for build methods.
);
}
Widget _buildBody() {
return SingleChildScrollView(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
decoration: style.bottomBorder(),
child: Row(
children: [
Expanded(
child: ElevatedButton.icon(
onPressed: () {},
icon: Icon(Icons.filter_alt_outlined),
label: Text('Filter'),
style: simpleButton(),
)),
Expanded(
child: ElevatedButton.icon(
onPressed: () {},
icon: Icon(Icons.sort_outlined),
label: Text('Sort'),
style: simpleButton(),
)),
],
),
),
GetBuilder<ProductsController>(builder: (prodsBySub) {
Get.find<ProductsController>()
.getProductsBySubCategory(widget.subCatId);
return GridView.count(
crossAxisCount: 2,
shrinkWrap: true,
physics: ScrollPhysics(),
mainAxisSpacing: 16,
crossAxisSpacing: 16,
childAspectRatio: 70 / 100,
padding: EdgeInsets.all(16),
children: List.generate(
prodsBySub.productsListBySubCategory.length, (index) {
return _buildSingleProduct(
index,
ProductModel.fromJson(
prodsBySub.productsListBySubCategory[index]));
}),
);
})
],
),
),
);
}
Widget _buildSingleProduct(int position, ProductModel product) {
return InkWell(
onTap: () {
Get.toNamed(RouteHelper.getProduct(position, product.id));
},
child: Container(
width: double.infinity,
height: double.infinity,
padding: EdgeInsets.all(8),
decoration: style.shadowContainer(),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: double.infinity,
height: 140,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/mango.png'),
fit: BoxFit.contain)),
),
SizedBox(height: 8),
Text(
product.title,
style: TextStyle(fontSize: 14, fontFamily: 'medium'),
),
Text(
'50g/pack',
style: TextStyle(fontSize: 13, color: Colors.grey),
),
SizedBox(height: 8),
Row(
children: [
Expanded(
child: Row(
children: [
Container(
padding: EdgeInsets.symmetric(horizontal: 6, vertical: 1),
margin: EdgeInsets.only(right: 8),
decoration: style.offContainer(),
child: Text('10%', style: style.offLabel()),
),
Text(
'${product.price} €',
style: TextStyle(fontSize: 16, fontFamily: 'medium'),
),
],
)),
Container(
height: 30,
width: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
color: style.appColor),
child: Icon(Icons.add, color: Colors.white),
),
],
),
],
),
),
);
}
simpleButton() {
return ElevatedButton.styleFrom(
onPrimary: Colors.grey,
padding: EdgeInsets.symmetric(vertical: 12),
elevation: 0,
primary: Colors.transparent);
}
}
I have tried some solutions found on the internet like adding Internet permission for the APIs, or editing the build.gradle file. None of these solutions worked for me. I would love to get some help, thanks in advance.

just add expanded around the gridview and everything is work

Solved it thanks to #Amanpreet Kaur's comment, actually I used flutter run --release and it showed me where the error was located, fixed it and it's all good now!

Flutter Android release UI render failure

I have built a Flutter application using MobX as my state management and am running into a strange issue at the moment that is only present on Android running in release mode.
I'm not sure if the offender is MobX, Hive or just Flutter in Android itself. However, on this specific page in my app, the Obsever will only display the last entry in the list. The other items are present, but the UI will only show the last index of the list. When I turn my phone landscape, the full content of the list is then visible and the page displays exactly as intended. Is there a way I can force the widgets to re-render in MobX when the page has already loaded?
I have tried downgrading my target SDK to 28, downgrading the gradle version, setting shrinkResources & minifyEnabled to false, enabled proguard. I also have ensured to call this in my main.dart;
WidgetsFlutterBinding.ensureInitialized();
Also attached are the outputs of my flutter doctor.
Again, this issue is only present on Android release build of my app. It works perfectly on iOS & Android on debug.
Any help would be greatly appreciated.
Below is the widget in question that has issues rendering in release mode
Widget _carPackageList() {
return ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: viewModel.customerCars.length,
itemBuilder: (context, index) => _carListItem(index));
}
Widget _carListItem(index) {
var packageDetails = viewModel.getDetailBookingById(
viewModel.customerCars[index].packageGroupId);
return Observer(
builder: (context) {
if (viewModel.isLoading) {
return CustomProgressIndiactor();
} else {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Column(
children: [
Text(
viewModel.customerCars[index].makeAndModel,
maxLines: 2,
style: TextStyle(
fontSize: 25,
fontFamily: 'Domus',
color: Color(0xff3c99a0))),
],
),
),
IconButton(
icon: Icon(Icons.highlight_remove, color: Colors.black),
onPressed: () {
viewModel.removeCustomerCar(index);
viewModel.customerCars.removeAt(index);
})
],
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Container(
width: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(15.0),
child: Text(packageDetails.name,
overflow: TextOverflow.ellipsis,
maxLines: 2,
style: TextStyle(
fontSize: 25,
fontFamily: 'Domus',
color: Color(0xff3c99a0))),
),
],
),
),
Padding(
padding: const EdgeInsets.all(15.0),
child: Observer(
builder: (_) {
var groupPrice =
viewModel.calculateCarCost(
viewModel.customerCars[index],
viewModel.customerCars[index]
.packageGroupId);
if (groupPrice == null) {
return Text('£0.00',
style: TextStyle(
color: Color(0xff1A2E35),
fontFamily: 'Aileron',
fontWeight: FontWeight.w700));
} else {
return Text(
'£${groupPrice.toStringAsFixed(2)}',
style: TextStyle(
color: Color(0xff1A2E35),
fontFamily: 'Aileron',
fontWeight: FontWeight.w700),
);
}
},
),
),
],
),
Padding(
padding: const EdgeInsets.only(
left: 15.0, top: 0, right: 15),
child: Text(packageDetails.description,
style: TextStyle(
color: Color(0xff1A2E35),
fontFamily: 'Aileron',
fontSize: 16,
fontWeight: FontWeight.w300)),
),
Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Optional Extras',
style: GoogleFonts.lato(
fontSize: 16,
color: Colors.black,
fontWeight: FontWeight.bold)),
Observer(
builder: (_) {
var opExtraPrice = viewModel
.calculateOptionalExtrasPrice(viewModel
.customerCars[index]
.optionalExtras);
if (opExtraPrice == null) {
return Text('£0.00',
style: TextStyle(
color: Color(0xff1A2E35),
fontFamily: 'Aileron',
fontWeight: FontWeight.w700));
} else {
return Text(
'£${opExtraPrice.toStringAsFixed(2)}',
style: TextStyle(
color: Color(0xff1A2E35),
fontFamily: 'Aileron',
fontWeight: FontWeight.w700));
}
},
),
],
),
),
Padding(
padding: const EdgeInsets.all(15.0),
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: viewModel.customerCars[index]
.optionalExtras.length,
itemBuilder: (context, innerIndex) {
var detailedOptionalExtra =
viewModel.getOptinalExtraById(viewModel
.customerCars[index]
.optionalExtras[innerIndex]
.packageItemId);
return Text(
detailedOptionalExtra.name,
style: TextStyle(
color: Color(0xff1A2E35),
fontFamily: 'Aileron',
fontSize: 16,
fontWeight: FontWeight.w300),
);
},
)),
Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Total Cost:',
style: TextStyle(
color: Color(0xff1A2E35),
fontFamily: 'Aileron',
fontSize: 16,
fontWeight: FontWeight.w700),
),
Observer(
builder: (context) => Text(
'£${viewModel.currentTotalCost.toStringAsFixed(2)}',
style: TextStyle(
color: Color(0xff1A2E35),
fontFamily: 'Aileron',
fontWeight: FontWeight.w700))),
],
),
)
],
),
),
),
],
),
);
}
},
);
}

The solution I found was to generate the list directly from the Hive box using a ValueListenableBuilder to listen to the box and add more elements to the list as soon as they arrive in the box. I can only assume there was some kind of race case going on with MobX attempting to gather the elements in the box from Hive and then serve up to the UI layer. I'll attach some sample code below for anyone else who may run into a similar issue.
Widget buildList() {
var _box = Hive.box("myBox").listenable();
return ValueListenableBuilder(
valueListenable: _box,
builder: (context, box, widget) {
return ListView.builder(
itemCount: box.length,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
border: Border(bottom: BorderSide(width: 0.1))),
child: ListTile(
title: Text(Hive.box("myBox").getAt(index)),
),
);
},
);
});
}

Some some code crashes my application on flutter

Im new in flutter, so i follow someone's tutorial to make music player app, everything normal until my app suddenly crashed, i tried to re-run the app but still it's crashed and i try to remove the code that last time i create and the app run normal, so what's wrong with the code?, sorry for my bad english.
....////
Widget _buildWidgetArtistName(MediaQueryData mediaQuery) {
return SizedBox(
height: mediaQuery.size.height / 1.8,
child: Padding(
padding: const EdgeInsets.only(left: 20.0),
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Stack(
children: <Widget>[
Positioned(
child: Text(
'Grande',
style: TextStyle(
color: Colors.white,
fontFamily: 'CoralPen',
fontSize: 72.0,
),
),
top: constraints.maxHeight - 100.0,
),
Positioned(
child: Text(
'Ariana',
style: TextStyle(
color: Colors.white,
fontFamily: 'CoralPen',
fontSize: 72.0,
),
),
top: constraints.maxHeight - 140.0,
),
Positioned(
child: Text(
'Tranding',
style: TextStyle(
color: Color(0xFF7D9AFF),
fontSize: 14.0,
fontFamily: 'Campton_Light',
fontWeight: FontWeight.w800,
),
),
top: constraints.maxHeight - 160.0,
),
],
);
},
),
),
);
}
#override
Widget build(BuildContext context) {
var mediaQuery = MediaQuery.of(context);
return Scaffold(
key: scaffoldState,
body: Stack(
children: [
_buildWidgetAlbumCover(mediaQuery),
_buildWidgetActionAppBar(mediaQuery),
_buildWidgetArtistName(mediaQuery), // This causing crash
],
),
);
}

- How to fix it : Incorrect use of ParentDataWidget?

I am getting Error Incorrect use of ParentDataWidget.
And the lists not show the item in first time.
The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.
Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a ConstrainedBox widget.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.shopping_cart),
onPressed: () {},
)
],
backgroundColor: Colors.green,
),
drawer: Drawer(
child: AppDrawer(),
),
body: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(),
child: Column(
children: <Widget>[
Container(
height: 200,
width: double.infinity,
child: HomeSlider(),
),
Padding(
padding: EdgeInsets.only(top: 14.0, left: 8.0, right: 8.0),
child: Text(
AppLocalizations.of(context)
.translate('leatest_producrs'),
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 18,
fontWeight: FontWeight.w700)),
),
Container(
margin: EdgeInsets.symmetric(vertical: 8.0),
height: 200.0,
child: Expanded(
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: cards.length,
itemBuilder: (BuildContext context, int index) => Card(
child: InkWell(
child: Column(
children: [
Flexible(
child: Container(
height: double.infinity,
width: 120,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
cards[index].productImg,
),
fit: BoxFit.fitHeight,
)),
),
),
Container(
width: 150,
padding: EdgeInsets.all(10),
child: Text(cards[index].productName,
style: new TextStyle(fontSize: 12),
softWrap: true),
),
],
),
onTap: () {
Fluttertoast.showToast(
msg: cards[index].productName,
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
timeInSecForIosWeb: 1,
backgroundColor: Colors.white70,
textColor: Colors.black,
fontSize: 16.0);
},
),
),
),
),
),
Container(
child: Padding(
padding: EdgeInsets.only(top: 6.0, left: 8.0, right: 8.0),
child: Image(
fit: BoxFit.cover,
image: AssetImage('assets/images/banner-1.jpg'),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
child: Text('Featured Products',
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 18,
fontWeight: FontWeight.w700)),
),
Padding(
padding: const EdgeInsets.only(
right: 8.0, top: 8.0, left: 8.0),
child: RaisedButton(
color: Theme.of(context).primaryColor,
child: Text('View All',
style: TextStyle(color: Colors.white)),
onPressed: () {
Navigator.pushNamed(context, '/categorise');
}),
)
],
),
Container(
child: GridView.count(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 2,
padding:
EdgeInsets.only(top: 8, left: 6, right: 6, bottom: 12),
children: List.generate(cards.length, (index) {
return Container(
child: Card(
clipBehavior: Clip.antiAlias,
child: InkWell(
onTap: () {
print('Card tapped.');
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
cards[index].productImg,
),
fit: BoxFit.fitHeight,
)),
),
),
ListTile(
title: Text(
cards[index].productName,
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 12),
)),
],
),
),
),
);
}),
),
),
Container(
child: Padding(
padding: EdgeInsets.only(
top: 6.0, left: 8.0, right: 8.0, bottom: 10),
child: Image(
fit: BoxFit.cover,
image: AssetImage('assets/images/banner-2.jpg'),
),
),
)
],
),
),
));
Error Codes are
══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.
The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a
RenderObject, which has been set up to accept ParentData of incompatible type ParentData.
Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically,
Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a ConstrainedBox widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
RepaintBoundary ← NotificationListener<ScrollNotification> ← GlowingOverscrollIndicator ←
Scrollable ← ListView ← Expanded ← ConstrainedBox ← Padding ← Container ← Column ← ⋯
When the exception was thrown, this was the stack:
.
.
.
.
(elided 4 frames from class _RawReceivePortImpl, class _Timer, and dart:async-patch)
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.
The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.
Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a ConstrainedBox widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
RepaintBoundary ← NotificationListener<ScrollNotification> ← GlowingOverscrollIndicator ← Scrollable ← ListView ← Expanded ← ConstrainedBox ← Padding ← Container ← Column ← ⋯
When the exception was thrown, this was the stack:
#0 RenderObjectElement._updateParentData.<anonymous closure> (package:flutter/src/widgets/framework.dart:5689:11)
#1 RenderObjectElement._updateParentData (package:flutter/src/widgets/framework.dart:5705:6)
#2 ParentDataElement._applyParentData.applyParentDataToChild (package:flutter/src/widgets/framework.dart:4939:15)
#3 ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:4600:14)
#4 ParentDataElement._applyParentData.applyParentDataToChild (package:flutter/src/widgets/framework.dart:4942:15)
...
════════════════════════════════════════════════════════════════════════════════════════════════════

You can copy paste run full code below
In your case, you do not need Expanded because you already set Container height to 200
code snippet
Container(
margin: EdgeInsets.symmetric(vertical: 8.0),
height: 200.0,
child: ListView.builder(
working demo
full code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class CardItem {
String productImg;
String productName;
CardItem({this.productImg, this.productName});
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
List<CardItem> cards = [
CardItem(productImg: "https://picsum.photos/250?image=9", productName: "a"),
CardItem(
productImg: "https://picsum.photos/250?image=10", productName: "b"),
CardItem(
productImg: "https://picsum.photos/250?image=11", productName: "c"),
CardItem(
productImg: "https://picsum.photos/250?image=12", productName: "d"),
CardItem(
productImg: "https://picsum.photos/250?image=13", productName: "e"),
CardItem(
productImg: "https://picsum.photos/250?image=14", productName: "f"),
CardItem(
productImg: "https://picsum.photos/250?image=15", productName: "g"),
CardItem(
productImg: "https://picsum.photos/250?image=16", productName: "h")
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.shopping_cart),
onPressed: () {},
)
],
backgroundColor: Colors.green,
),
/* drawer: Drawer(
child: AppDrawer(),
),*/
body: SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(),
child: Column(
children: <Widget>[
Container(
height: 200,
width: double.infinity,
child: Text("HomeSlider()"),
),
Padding(
padding: EdgeInsets.only(top: 14.0, left: 8.0, right: 8.0),
child: Text(
'leatest_producrs',
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 18,
fontWeight: FontWeight.w700)),
),
Container(
margin: EdgeInsets.symmetric(vertical: 8.0),
height: 200.0,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: cards.length,
itemBuilder: (BuildContext context, int index) => Card(
child: InkWell(
child: Column(
children: [
Flexible(
child: Container(
height: double.infinity,
width: 120,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
cards[index].productImg,
),
fit: BoxFit.fitHeight,
)),
),
),
Container(
width: 150,
padding: EdgeInsets.all(10),
child: Text(cards[index].productName,
style: new TextStyle(fontSize: 12),
softWrap: true),
),
],
),
onTap: () {
},
),
),
),
),
Container(
child: Padding(
padding: EdgeInsets.only(top: 6.0, left: 8.0, right: 8.0),
child: Image(
fit: BoxFit.cover,
image: AssetImage('assets/images/banner-1.jpg'),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
child: Text('Featured Products',
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 18,
fontWeight: FontWeight.w700)),
),
Padding(
padding: const EdgeInsets.only(
right: 8.0, top: 8.0, left: 8.0),
child: RaisedButton(
color: Theme.of(context).primaryColor,
child: Text('View All',
style: TextStyle(color: Colors.white)),
onPressed: () {
Navigator.pushNamed(context, '/categorise');
}),
)
],
),
Container(
child: GridView.count(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 2,
padding:
EdgeInsets.only(top: 8, left: 6, right: 6, bottom: 12),
children: List.generate(cards.length, (index) {
return Container(
child: Card(
clipBehavior: Clip.antiAlias,
child: InkWell(
onTap: () {
print('Card tapped.');
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
cards[index].productImg,
),
fit: BoxFit.fitHeight,
)),
),
),
ListTile(
title: Text(
cards[index].productName,
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 12),
)),
],
),
),
),
);
}),
),
),
Container(
child: Padding(
padding: EdgeInsets.only(
top: 6.0, left: 8.0, right: 8.0, bottom: 10),
child: Image(
fit: BoxFit.cover,
image: AssetImage('assets/images/banner-2.jpg'),
),
),
)
],
),
),
)
);
}
}

The Expanded widget has to be a direct child of a Column, Row or Flex. You have it wrapped in a Container. Try to swap the Container and Expanded widgets.

Flutter padding issues on Android devices

I have the following widget in my Flutter app, which is pretty basic but for some reason, the padding is not working on some Android devices attached screenshot and code.
Code:
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
centerTitle: true,
title: Column(children: [
Text(
'register',
style: new TextStyle(
fontSize: 24.0,
color: Colors.white,
),
),
Text(
'Availability results',
style: new TextStyle(
fontSize: 18.0,
color: Colors.white,
),
),
]),
),
body: ListView(
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 12.0, bottom: 6.0),
child: Text(
'Showing results for',
style: Theme.of(context).textTheme.headline,
),
),
Padding(
padding: EdgeInsets.only(bottom: 12.0),
child: Text(
'"${_availabilityRespose.query}"',
style: Theme.of(context).textTheme.title,
),
),
It's bascially the padding in the list view

instead of using static values you should use dynamic values with
MediaQuery.of(context).size.width
MediaQuery.of(context).size.height
which may solve your problem but it is not a good solution. try to use Expanded with flex
Expanded(flex: 1, child: yourChild())
and you can test on device or emulator with different size and densities

Categories

Resources