How to delete blank spaces or null Container in SliverGrid.count? - android

I'm trying to delete the Null Container in SliverGrid.count after validated the map entries . I wish the issue arrive you . thanks in advance for you solution .
class myGridItem extends StatefulWidget {
final Item item;
final EdgeInsets? margin;
const myGridItem({
Key? key,
required this.item,
this.margin,
}) : super(key: key);
#override
_myGridItemState createState() => _myGridItemState();
}
class _myGridItemState extends State<myGridItem> {
#override
Widget build(BuildContext context) {
return Container(
margin: widget.margin == null ? EdgeInsets.zero : widget.margin,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(7),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
offset: Offset.zero,
blurRadius: 15.0,
)
],
),
child: Column(
children: [
Expanded(
child: Stack(
alignment: Alignment.center,
children: [
Container(
margin: EdgeInsets.only(top: 37),
height: 180,
decoration: BoxDecoration(
image: DecorationImage(
alignment: Alignment.bottomCenter,
image: AssetImage(widget.item.imagePath),
),
),
),
// --------------------------- create favourit widget
Positioned(
top: 16,
right: 16,
child: Container(
width: 40,
height: 40,
alignment: Alignment.center,
decoration: BoxDecoration(
color: primaryColor,
shape: BoxShape.circle,
),
child: Text(
'999%',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
),
),
// ------------------------- discont missing
],
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.item.name,
style: TextStyle(
color: Colors.black,
fontSize: 13,
height: 1.5,
),
),
SizedBox(
height: 10,
),
Wrap(
spacing: 3,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'${Item.format(widget.item.price)}',
style: TextStyle(
fontSize: 18,
color: primaryColor,
height: 1.5,
),
),
],
)
],
),
],
),
)
],
),
);
}
}
Here the creation of SliverGrid.count to display the items I tried to use SliverChildBuilderDelegate but the same issue after some Editing on it to reach the same level of SliverGrid.count .
class myCartItemDisplay extends StatefulWidget {
#override
_myCartItemDisplayState createState() => _myCartItemDisplayState();
}
class _myCartItemDisplayState extends State<myCartItemDisplay> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: myAppBar(
title: 'Cart',
myBarColor: Colors.white,
mybackWidget: HomeScreen(),
),
bottomNavigationBar: AppBottomNavigation(),
backgroundColor: Colors.white,
body: SafeArea(
child: CustomScrollView(
slivers: [
Container(
child: SliverGrid.count(
crossAxisCount: 2,
childAspectRatio: 0.65,
mainAxisSpacing: 16,
crossAxisSpacing: 16,
children: Fake.furniture.asMap().entries.map((f) {
return Container(
child: f.value.addToCart == 1
? myGridItem(
item: f.value,
margin: EdgeInsets.only(
left: f.key.isEven ? 16 : 0,
right: f.key.isOdd ? 16 : 0,
))
: null,
);
}).toList(),
),
),
],
),
),
);
}
}


You can add a filter before your map:
children: Fake.furniture.asMap().entries
.where((f) => f.value.addToCart == 1)
.map((f) {
return Container(
child: myGridItem(
item: f.value,
margin: EdgeInsets.only(
left: f.key.isEven ? 16 : 0,
right: f.key.isOdd ? 16 : 0,
),
),
);
}).toList(),
This way you won't end up with any null entries in the first place.


I fixed it by add a new List it has my target entries
List<Item> _names = Fake.furniture.where((i) => i.addToCart == 1).toList();
And then :
_names.asMap().entries.map((f)
But if you have another solution with flutter give us it , thanks

Related

Use extracted Listview.builder with two lists in Flutter

I'm a beginner in Flutter.
I designed this page:
Instead of repeating the entire Listview.builder. I would like to use two instances of custom Listview.builder with two lists, one list for fruits, and the other for vegetables.
As appeared in the above screen, I tried to display vegetables in the vegetables section through the following:
Listview.builder Widget:
import 'package:flutter/material.dart';
import 'package:grocery_store/models/products_list.dart';
import '../utilities/add_product.dart';
import '../utilities/constants.dart';
class ProductsListView extends StatelessWidget {
final String? productImage;
final String? productName;
final String? productCategory;
final String? productPrice;
const ProductsListView({
Key? key,
this.productImage,
this.productName,
this.productCategory,
this.productPrice,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: fruitsList.length,
itemBuilder: (BuildContext context, int index) {
return ClipRect(
child: Container(
width: 140.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Colors.white,
boxShadow: const [
BoxShadow(
blurRadius: 10,
color: Colors.black,
),
],
),
margin: const EdgeInsets.all(10.0),
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 10, 10, 10),
child: Column(
children: [
Image.asset(
fruitsList[index].fruitImage!,
height: 80.0,
width: 90.0,
),
const SizedBox(
height: 15,
),
Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
fruitsList[index].fruitName!,
style: const TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
Text(
fruitsList[index].fruitCategory!,
textAlign: TextAlign.left,
style: const TextStyle(
height: 1.5,
color: kDarkGrey,
fontSize: 12.5,
fontWeight: FontWeight.bold,
),
),
],
),
],
),
Row(
children: [
Text(
fruitsList[index].fruitPrice!,
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
const Spacer(),
const AddProduct(),
],
)
],
),
),
),
);
},
);
}
}
Fruits and vegetables lists:
import '../utilities/constants.dart';
class Fruits {
final String? fruitImage;
final String? fruitName;
final String? fruitCategory;
final String? fruitPrice;
Fruits(
{this.fruitImage, this.fruitName, this.fruitCategory, this.fruitPrice});
}
final Fruits bananas = Fruits(
fruitImage: '${kFruitsImagesAsset}bananas.png',
fruitName: 'Bananas',
fruitCategory: 'Organic',
fruitPrice: '\$4.99',
);
final Fruits apples = Fruits(
fruitImage: '${kFruitsImagesAsset}apples.png',
fruitName: 'Apples',
fruitCategory: 'Organic',
fruitPrice: '\$5.00',
);
final Fruits chikku = Fruits(
fruitImage: '${kFruitsImagesAsset}chikku.png',
fruitName: 'Chikku',
fruitCategory: 'Organic',
fruitPrice: '\$9.00',
);
final Fruits peaches = Fruits(
fruitImage: '${kFruitsImagesAsset}peaches.png',
fruitName: 'Peaches',
fruitCategory: 'Organic',
fruitPrice: '\$12.00',
);
List<Fruits> fruitsList = [bananas, apples, chikku, peaches];
class Vegetables {
final String? vegetableImage;
final String? vegetableName;
final String? vegetableCategory;
final String? vegetablePrice;
Vegetables(
{this.vegetableImage,
this.vegetableName,
this.vegetableCategory,
this.vegetablePrice});
}
final Vegetables okra = Vegetables(
vegetableImage: '${kVegetablesImagesAsset}okra.png',
vegetableName: 'Okra',
vegetableCategory: 'Organic',
vegetablePrice: '\$6.99',
);
final Vegetables peas = Vegetables(
vegetableImage: '${kVegetablesImagesAsset}peas.png',
vegetableName: 'Peas',
vegetableCategory: 'Organic',
vegetablePrice: '\$10.50',
);
final Vegetables potatoes = Vegetables(
vegetableImage: '${kVegetablesImagesAsset}potatoes.png',
vegetableName: 'Potatoes',
vegetableCategory: 'Organic',
vegetablePrice: '\$5.99',
);
final Vegetables taro = Vegetables(
vegetableImage: '${kVegetablesImagesAsset}taro.png',
vegetableName: 'Taro',
vegetableCategory: 'Organic',
vegetablePrice: '\$5.50',
);
List<Vegetables> vegetablesList = [okra, peas, potatoes, taro];
Homepage where I want to display the two lists:
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:grocery_store/models/product_cards_column.dart';
import 'package:grocery_store/utilities/constants.dart';
import 'package:grocery_store/utilities/grocery_text_field.dart';
import '../models/products_cards.dart';
import '../models/products_list.dart';
class GroceryPage extends StatelessWidget {
const GroceryPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
var discountPortrait =
MediaQuery.of(context).orientation == Orientation.portrait;
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(15.0),
child: SingleChildScrollView(
child: Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 1, 0),
child: Row(
children: [
const Text(
'Grocery',
style: kTitleTextStyle,
),
const Spacer(),
ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: Image.asset(
'images/apple.jpg',
width: 46.0,
height: 46.0,
fit: BoxFit.cover,
),
),
],
),
),
const SizedBox(height: 10.0),
Row(children: [
GroceryTextField.groceryTextField(
groceryText: 'Search...',
),
const SizedBox(width: 5.0),
Container(
height: 50.0,
width: 50.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(18.0),
color: kLightGrey,
),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: SvgPicture.asset(
'images/funnel.svg',
semanticsLabel: 'Funnel',
color: kDarkGrey,
),
),
),
]),
const SizedBox(height: 10.0),
Container(
height: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: const Color(0xFFE9F9F2),
),
width: double.infinity,
child: Stack(
children: [
Positioned(
bottom: -150,
right: discountPortrait ? -30 : 30,
height: 290,
width: 430,
child: Image.asset(
'${kProductsImagesAsset}lettuce.png',
),
),
Positioned(
top: discountPortrait ? 35 : 15,
left: discountPortrait ? 25 : 100,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Get Up To',
style: kGreenTitleStyle.copyWith(
fontSize: discountPortrait ? 20 : 60,
),
),
Text(
'%10 off',
style: kGreenTitleStyle.copyWith(
fontSize: 40.0,
),
),
],
),
),
],
),
),
Column(
children: const [
ProductCardsRow(
groceryType: 'Fruits',
),
SizedBox(
height: 215,
width: double.infinity,
child: ProductsListView(
),
),
],
),
Column(
children: const [
ProductCardsRow(
groceryType: 'Vegetables',
),
SizedBox(
height: 215,
width: double.infinity,
child: ProductsListView(
),
),
],
),
],
),
),
),
),
);
}
}
Hope someone can help

You can set an other variable in constructor and call it list and pass your Vegetables and Fruits to it like this:
class ProductsListView extends StatelessWidget {
final List list;
const ProductsListView({
Key? key,
required this.list,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: list.length,
itemBuilder: (BuildContext context, int index) {
return ClipRect(
child: Container(
width: 140.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Colors.white,
boxShadow: const [
BoxShadow(
blurRadius: 10,
color: Colors.black,
),
],
),
margin: const EdgeInsets.all(10.0),
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 10, 10, 10),
child: Column(
children: [
Image.asset(
list is List<Fruits> ? (list[index] as Fruits).fruitImage! : (list[index] as Vegetables).vegetableImage!,
height: 80.0,
width: 90.0,
),
const SizedBox(
height: 15,
),
Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
list is List<Fruits> ? (list[index] as Fruits).fruitName! : (list[index] as Vegetables).vegetableName!,
style: const TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
Text(
list is List<Fruits> ? (list[index] as Fruits).fruitCategory! : (list[index] as Vegetables).vegetableCategory!
textAlign: TextAlign.left,
style: const TextStyle(
height: 1.5,
color: kDarkGrey,
fontSize: 12.5,
fontWeight: FontWeight.bold,
),
),
],
),
],
),
Row(
children: [
Text(
list is List<Fruits> ? (list[index] as Fruits).fruitPrice! : (list[index] as Vegetables).vegetablePrice!,
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
const Spacer(),
const AddProduct(),
],
)
],
),
),
),
);
},
);
}
}
and use it like this:
SizedBox(
height: 215,
width: double.infinity,
child: ProductsListView(
list: vegetablesList,
),
),
SizedBox(
height: 215,
width: double.infinity,
child: ProductsListView(
list: fruitsList,
),
),

Yeah it is pretty straightfroward, just click on the listview.builder method in your project and then click on FLutter Outline on the right hand side of the Android Studio IDE window, like this :
Once you have done that the ListView.Builder will be visible in this tree of widgets. What you need to do is to right click on the widget you want to extract and then click on extract method.
you'll get a dialog asking for the name of the newly created widget :
and a new widget will be created at the bottom of your file.
Just change the parameters for both the listview.builders and it'll look something like this :
Widget build(BuildContext context) {
return CommonList(typeList: fruitslist); // use this to change the list
}
And in the newly created widget you'd need to do the same:
class CommonList extends StatelessWidget {
final List typeList; //add a list parameter
const CommonList({
Key? key, required this.typeList, //request that list parameter
}) : super(key: key);
#override
Widget build(BuildContext context) {
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: typeList.length, // change the list type
itemBuilder: (BuildContext context, int index) {
return ClipRect(
child: Container(
width: 140.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Colors.white,
boxShadow: const [
BoxShadow(
blurRadius: 10,
color: Colors.black,
),
],
),
margin: const EdgeInsets.all(10.0),
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 10, 10, 10),
child: Column(
children: [
Image.asset(
typeList[index].fruitImage!, //update list to use it everywhere
height: 80.0,
width: 90.0,
),
const SizedBox(
height: 15,
),
Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
typeList[index].fruitName!, //like here
style: const TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
),
Text(
typeList[index].fruitCategory!, //here
textAlign: TextAlign.left,
style: const TextStyle(
height: 1.5,
color: kDarkGrey,
fontSize: 12.5,
fontWeight: FontWeight.bold,
),
),
],
),
],
),
Row(
children: [
Text(
typeList[index].fruitPrice!, //and here again
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
const Spacer(),
const AddProduct(),
],
)
],
),
),
),
);
},
);
}

Bottom align clipped image in Flutter

Bottom align clipped image in Flutter
Hello!
I'm beginner in Flutter
The following image:
I clipped the lettuce image in half with ClipPath:
I'm trying to move it into bottom right to be similar to the following image:
I tried many times with my available experience with no luck
Here's the code:
class GroceryPage extends StatelessWidget {
const GroceryPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(15.0),
child: SingleChildScrollView(
child: Column(
children: [
const SizedBox(height: 10.0),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: const Color(0xFFE9F9F2),
),
width: double.infinity,
child: Stack(
children: [
ClipPath(
clipper: HalfClip(),
child: Align(
alignment: Alignment.bottomRight,
child: Image.asset(
'${kProductsImagesAsset}lettuce.png',
height: 150,
// width: 150,
fit: BoxFit.cover,
),
),
),
Padding(
padding: const EdgeInsets.all(40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Get Up To',
style: kGreenTitleStyle.copyWith(
fontSize: 20.0,
),
),
Text(
'%10 off',
style: kGreenTitleStyle.copyWith(
fontSize: 40.0,
),
),
],
),
),
],
),
),
],
),
),
),
),
);
}
}
Can anyone help me doing so?

Use Positioned widget as Stack child.
Positioned(
top: 0,
left: 0,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Get Up To',
style: kGreenTitleStyle.copyWith(
fontSize: 20.0,
),
),
Text(
'%10 off',
style: kGreenTitleStyle.copyWith(
fontSize: 40.0,
),
),
],
),
),
More about using Stack
class GroceryPage extends StatelessWidget {
const GroceryPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(15.0),
child: SingleChildScrollView(
child: Column(
children: [
const SizedBox(height: 10.0),
Container(
height: 300, //cardHeight
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: const Color(0xFFE9F9F2),
),
child: Stack(
children: [
Align(
child: Container(
height: 600, // full image height= cardHeight*2
color: Colors.red,
),
// child: Image.asset(
// '${kProductsImagesAsset}lettuce.png',
// height: 150,
// // width: 150,
// fit: BoxFit.cover,
// ),
),
Positioned(
top: 0,
left: 0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Get Up To',
style: TextStyle(
fontSize: 20.0,
),
),
Text(
'%10 off',
style: TextStyle(
fontSize: 40.0,
),
),
],
),
),
],
),
),
],
),
),
),
),
);
}
}

Using carousel slider with page view

I am using carousal slider with page view but when I am sliding the images in scroll view it is sliding to me to next page instead of next image. I just want to slide images when I slide on image and i want to slide to the next page when i slide below the image. but now wherever i slide on the screen it take me to the next page.
This is my page view.
import 'package:bartermade/controllers/profileController.dart';
import 'package:bartermade/models/tradeModel.dart';
import 'package:bartermade/widgets/profileView.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../screens/home/bottomBarViews/homeView/categoriesDetailScreen.dart';
class PageViewHolder extends StatelessWidget {
final PageController pageController = PageController(
initialPage: 0,
);
ProfileController _profileController = Get.find();
final String reciverId;
final String currentUserId;
final TradeModel catData;
PageViewHolder(
{required this.reciverId,
required this.currentUserId,
required this.catData});
var followersList = ['Ali', 'Hussain', 'Hassan', 'Akhtar'];
#override
Widget build(BuildContext context) {
// print("cat ID " + "${catData.user.id}");
// print("profile ID " + "${_profileController.profileId}");
return Scaffold(
body: PageView(
// physics: catData.user.id != _profileController.profileId.value
// ? AlwaysScrollableScrollPhysics()
// : NeverScrollableScrollPhysics(),
physics: ClampingScrollPhysics(),
pageSnapping: false,
onPageChanged: (index) {
},
controller: pageController,
children: [
//first screen in page view
TradeDetailScreen(
catData: catData,
currentUserId: currentUserId,
reciverId: reciverId,
),
//second screen here
ProfileView(
firstName: catData.user.firstName,
lastName: catData.user.lastName,
followers: followersList,
profileUrl: catData.user.profilePictureUrl,
screenState: true,
),
],
),
);
}
}
And this is my screen page
#override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) {
return OrientationBuilder(
builder: (context, orientation) => SafeArea(
child: SingleChildScrollView(
child: Column(children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
onPressed: () {
Get.back();
},
icon: Icon(
Icons.arrow_back_ios,
color: Colors.grey,
)),
Container(
clipBehavior: Clip.antiAlias,
height: 50,
width: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
),
child: CachedNetworkImage(
fit: BoxFit.cover,
imageUrl: '${widget.profileUrl}',
placeholder: (context, url) =>
Center(child: CircularProgressIndicator()),
errorWidget: (context, url, error) =>
Icon(Icons.error),
),
),
SizedBox(
width: 7,
),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"${widget.lastName ?? " " "${widget.firstName ?? " "}"}",
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: (MediaQuery.of(context)
.size
.height /
100) *
2),
),
widget.catData["user"] ==
profileController.userId.value
? Container(
height: 0,
width: 0,
)
: Container(
padding: EdgeInsets.all(5),
child: Center(
child: Text(
'Follow',
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
),
//width: 50,
decoration: BoxDecoration(
color: AppColors.pinkAppBar,
borderRadius: BorderRadius.all(
Radius.circular(20)))),
],
),
Row(
//crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'4.3',
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold,
fontSize: (MediaQuery.of(context)
.size
.height /
100) *
1.8),
),
Icon(
Icons.star,
size: 15,
color: Colors.yellow,
),
],
),
],
),
)
],
),
),
Column(
children: [
widget.catData["pictures"] == [] ||
widget.catData["pictures"].length == 0 ||
widget.catData["pictures"].isEmpty ||
widget.catData["pictures"] == null
? Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.6,
child: Center(child: Text(" No Image to show")))
: Stack(
children: [
CarouselSlider(
items: widget.catData["tradeWithPictures"]
.map<Widget>((e) {
return Container(
width: Get.width,
child: CachedNetworkImage(
fit: BoxFit.cover,
imageUrl: e['url'],
placeholder: (context, url) => Center(
child: CircularProgressIndicator()),
errorWidget: (context, url, error) =>
Icon(Icons.error),
),
);
}).toList(),
carouselController:
postController.carouselController,
options: CarouselOptions(
autoPlay: true,
enableInfiniteScroll: true,
height: Get.height * .7,
viewportFraction: 1.0,
enlargeCenterPage: false,
aspectRatio: 1 / 1.3,
onPageChanged: (index, reason) {
// postController.tradeImagesIndex(index);
// postController.carouselController.nextPage();
},
),
),
Positioned(
top: MediaQuery.of(context).size.height * 0.3,
bottom:
MediaQuery.of(context).size.height * 0.3,
left: 0,
right: 0,
child: Container(
padding:
EdgeInsets.symmetric(horizontal: 10),
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
ElevatedButton(
child: Icon(Icons.arrow_back_ios),
style: ButtonStyle(
splashFactory:
NoSplash.splashFactory,
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(25.0),
side: BorderSide(
color: AppColors.pinkColor),
),
),
),
onPressed: () {
postController.carouselController
.previousPage();
},
),
ElevatedButton(
child: Icon(Icons.arrow_forward_ios),
style: ButtonStyle(
splashFactory:
NoSplash.splashFactory,
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(25.0),
side: BorderSide(
color: AppColors.pinkColor),
),
),
),
onPressed: () {
postController.carouselController
.nextPage();
},
),
],
),
),
),
],
),
SizedBox(
height: 10,
),
],
),
Container(
margin: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
widget.catData["title"],
style: TextStyle(
color: AppColors.detailTextsColor,
fontWeight: FontWeight.bold),
),
profileController.userId == widget.catData["user"]
? Container(
height: 0,
width: 0,
)
: InkWell(
onTap: () {
},
child: Container(
padding: EdgeInsets.all(5),
child: Center(
child: Text(
'Offer Trade',
style: TextStyle(
color: Colors.white,
fontSize: 12),
),
),
//width: 50,
decoration: BoxDecoration(
color: AppColors.pinkAppBar,
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
),
),
],

type 'List<Widget>' is not a subtype of type 'Widget

'
I am a beginner in flutter dev and was trying to implement the screen but then cannot seem to get my head around the error thrown
This code below is supposed to display an onboarding screen but it seems to throw an error with the emulator regarding the title and cannot seem to find any solution on the web any help?'
class OnBoardingScreen extends StatefulWidget {
#override
_OnBoardingScreenState createState() => _OnBoardingScreenState();
}
class _OnBoardingScreenState extends State<OnBoardingScreen> {
final int _numPages = 5;
final PageController _pageController = PageController(initialPage: 0);
int _currentPage =0;
void _onIntroEnd(context) {
Navigator.of(context).push(MaterialPageRoute(builder: (_) => SignUpScreen()));
}
void _onIntroSkip(context) {
Navigator.of(context).push(MaterialPageRoute(builder: (_) => LoginScreen()));
}
_buildPageIndicator(){
List<Widget> list =[];
for (int i=0;i<_numPages;i++){
list.add(i == _currentPage ? _indicator(true) : _indicator(false) );
}
return list;
}
_indicator (bool isActive){
return AnimatedContainer(duration: Duration(milliseconds: 150),
margin: EdgeInsets.symmetric(horizontal: 8.0),
height: 8.0,
width: isActive ? 24.0 : 16.0,
decoration: BoxDecoration(color: isActive ? Colors.white:Color(0xF385AD5),
borderRadius:BorderRadius.all(Radius.circular(12))
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion(
value: null,
child: Container(
decoration: BoxDecoration(
gradient:LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.1,0.4,0.7,0.9],
colors: [
Color(0xF3C5DD7),
Color(0xF092458),
Color(0xF1B5695),
Color(0xF4664A0)
]
)
),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 40),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
alignment: Alignment.centerRight,
child: TextButton(
onPressed: (){
_onIntroSkip(context);
},
child: Text(
'Skip',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
),
),
Container(
height: 600.0,
child: PageView(
physics :ClampingScrollPhysics(),
controller: _pageController,
onPageChanged: (int page){
setState(() {
_currentPage =page;
});
},
children: [
Padding(
padding: EdgeInsets.all(40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Image(
image: AssetImage('assets/rooms.webp'
),
height: 300,
width: 300,
),
),
SizedBox(
height: 30.0,
),
Text('Lorem Ipsum',
style: TextStyle(
fontWeight: FontWeight.w800
),
),
SizedBox(height: 15.0,),
Text('Lorem IpSsum',style:TextStyle(
fontWeight: FontWeight.w300
),
)
],
),
),
Padding(
padding: EdgeInsets.all(40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Image(
image: AssetImage('assets/thoughts.webp'
),
height: 300,
width: 300,
),
),
SizedBox(
height: 30.0,
),
Text('Lorem Ipsum',
style: TextStyle(
fontWeight: FontWeight.w800
),
),
SizedBox(height: 15.0,),
Text('Lorem IpSsum',style:TextStyle(
fontWeight: FontWeight.w300
),
)
],
),
),
Padding(
padding: EdgeInsets.all(40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Image(
image: AssetImage('group.jpg'
),
height: 300,
width: 300,
),
),
SizedBox(
height: 30.0,
),
Text('Lorem Ipsum',
style: TextStyle(
fontWeight: FontWeight.w800
),
),
SizedBox(height: 15.0,),
Text('Lorem IpSsum',style:TextStyle(
fontWeight: FontWeight.w300
),
)
],
),
),
],
),
),
Row(
mainAxisAlignment:MainAxisAlignment.center ,children: [
_buildPageIndicator() ,
],
),
_currentPage != _numPages - 1 ?
Expanded(
child: Align(
alignment: FractionalOffset.bottomRight,
child: TextButton(
onPressed: () {
_pageController.nextPage(duration: Duration(milliseconds: 500), curve: Curves.ease);
}, child:Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text('Next',style: TextStyle(color: Colors.white,
fontSize: 22.0),),
SizedBox(
width: 10.0,
),
Icon(
Icons.arrow_forward,
color: Colors.white,
size: 30,
)
],
),
),
),
)
:
Text("")
],
),
),
),
),
bottomSheet:_currentPage == _numPages -1 ? Container(
height: 100.0,
width: double.infinity,
color: Colors.white,
child: GestureDetector(
onTap: (){
_onIntroEnd(context);
},
child: Center(
child: Padding(padding: EdgeInsets.only(bottom: 30.0),child:
Text(
'Get Started',
style: TextStyle(
color: Color(0xF3C5DD7),
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
)),
),
),
) :
Text(''),
);
}
}
'This is supposed to display an Onboarding Screen but throws an error . This is shown with the image attached '

Change these parts of your code to look like this:
List<Widget> _buildPageIndicator(){
List<Widget> list =[];
for (int i=0;i<_numPages;i++){
list.add(i == _currentPage ? _indicator(true) : _indicator(false) );
}
return list;
}
.
.
.
.
Row(
mainAxisAlignment:MainAxisAlignment.center,
children: _buildPageIndicator() ,
),

Replace this part of your code:
...
Row(
mainAxisAlignment:MainAxisAlignment.center ,children: [
_buildPageIndicator() ,
],
),
...
with
...
Row(
mainAxisAlignment:MainAxisAlignment.center, children: _buildPageIndicator(),
),
...
or with
...
Row(
mainAxisAlignment:MainAxisAlignment.center ,children: [
..._buildPageIndicator(),
],
),
...

http request stop when i made build release flutter

I have a problem with my application,
when I make run in the emulator everything works well.
just when I made build apk, the application stops to get data from API URL, I tried it with debug version and everything works well.
so the problem with release version.
for sure I have internet permission in the Android manifest file.
I'm working with package:dio/dio.dart for HTTP request
Dart Code
import 'package:caro_app/restaurant.dart';
import 'package:caro_app/screens/FadeAnimation.dart';
import 'package:caro_app/screens/restaurant.dart';
import 'package:dio/dio.dart' as http_dio;
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'card.dart';
class HomePageApp extends StatefulWidget {
#override
_HomePageAppState createState() => _HomePageAppState();
}
class _HomePageAppState extends State<HomePageApp> {
Future<List<Restaurant>> _getRestaurantDio() async {
http_dio.Dio dio = http_dio.Dio();
http_dio.Response response = await dio
.get("myurl");
List data = response.data;
return data.map((e) => Restaurant.fromJson(e)).toList();
}
List<Food> food = [];
int sum = 0;
bool isDone = false;
List<Restaurant> allRestaurant = [];
#override
void initState() {
super.initState();
getData();
}
getData() async {
allRestaurant = await _getRestaurantDio();
isDone = true;
setState(() {});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.transparent,
leading: Container(
child: Icon(
Icons.menu,
color: Colors.orange,
),
),
title: Text(
"Bogota",
style: TextStyle(color: Colors.white, fontSize: 25),
),
brightness: Brightness.light,
actions: <Widget>[
IconButton(
icon: Icon(
Icons.notifications_none,
color: Colors.orange,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.shopping_cart,
color: Colors.orange,
),
onPressed: () {
Route route =
MaterialPageRoute(builder: (context) => CartScreen());
Navigator.push(context, route);
},
)
],
),
body: Stack(
children: <Widget>[
Container(
child: Container(
height: 40,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
AspectRatio(
aspectRatio: 2.2 / 1,
child: FadeAnimation(
1,
Container(
margin: EdgeInsets.only(right: 10),
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Text(
"All",
style:
TextStyle(fontSize: 20, color: Colors.orange),
),
),
)),
),
AspectRatio(
aspectRatio: 2.2 / 1,
child: FadeAnimation(
1.1,
Container(
margin: EdgeInsets.only(right: 10),
child: Center(
child: Text(
"Shaorma",
style:
TextStyle(fontSize: 17, color: Colors.orange),
),
),
)),
),
AspectRatio(
aspectRatio: 2.2 / 1,
child: FadeAnimation(
1.2,
Container(
margin: EdgeInsets.only(right: 10),
child: Center(
child: Text(
"Falafel",
style:
TextStyle(fontSize: 17, color: Colors.orange),
),
),
)),
),
AspectRatio(
aspectRatio: 2.2 / 1,
child: FadeAnimation(
1.3,
Container(
margin: EdgeInsets.only(right: 10),
child: Center(
child: Text(
"Burger",
style:
TextStyle(fontSize: 17, color: Colors.orange),
),
),
)),
),
AspectRatio(
aspectRatio: 2.2 / 1,
child: FadeAnimation(
1.4,
Container(
margin: EdgeInsets.only(right: 10),
child: Center(
child: Text(
"Pizza",
style:
TextStyle(fontSize: 17, color: Colors.orange),
),
),
)),
),
],
),
),
),
Container(
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
padding: EdgeInsets.only(
left: 8.0, right: 8.0, top: 75.0, bottom: 0.0),
child: FutureBuilder(
future: _getRestaurantDio(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
print(snapshot.data);
if (snapshot.data == null) {
return Container(
child: Center(
child: Text('Loading..',style: TextStyle(color:Colors.white),),
),
);
} else {
List<Restaurant> restaurant = snapshot.data;
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1),
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return Container(
child: InkWell(
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => ItemScreen(
user: restaurant[index],
valueSetter: (selectedProducts) {
setState(() {
restaurant
.add(snapshot.data[index]);
sum = 0;
food.forEach((item) {
sum = sum + item.price;
print(sum);
});
});
})));
},
child: FadeAnimation(
1,
Container(
// height: 250,
width: double.infinity,
padding: EdgeInsets.all(20),
margin: EdgeInsets.only(bottom: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image:
NetworkImage(restaurant[index].img),
fit: BoxFit.cover),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
FadeAnimation(
1,
Text(
restaurant[index].name,
style: TextStyle(
color: Colors.orange,
fontSize: 30,
fontWeight:
FontWeight.bold),
)),
SizedBox(
height: 10,
),
FadeAnimation(
1.1,
Container(
padding:
EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.orange,
borderRadius:
BorderRadius
.circular(
20)),
child: Text(
restaurant[index]
.family,
style: TextStyle(
color: Colors.white,
fontSize: 20),
))),
],
),
),
FadeAnimation(
1.2,
Container(
width: 35,
height: 35,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.orange),
child: Center(
child: Icon(
Icons.favorite_border,
size: 20,
color: Colors.white,
),
),
))
],
),
FadeAnimation(
1.2,
Container(
child: Container(
padding: EdgeInsets.all(9),
width: 200,
decoration: BoxDecoration(
color: Colors.deepOrange,
borderRadius:
BorderRadius.circular(20)),
child: Row(
children: <Widget>[
Icon(Icons.location_on),
SizedBox(
width: 10,
),
Text(
restaurant[index].city,
style: TextStyle(
color: Colors.white,
fontSize: 30,
fontWeight:
FontWeight.bold),
),
],
),
))),
],
),
),
),
),
);
},
);
}
},
),
),
),
],
),
);
}
}
class User {
final String name;
final String family;
final String city;
final String img;
List<String> food;
User(this.name, this.family, this.city, this.img);
}

add internet permission to Manifest file inside the android folder and make true the uses-clear-text-traffic if you get data from non https address;
<manifest ...>
<uses-permission android:name="android.permission.INTERNET" />
<application
...
android:usesCleartextTraffic="true"
...>
...
</application>
</manifest>

Categories

Resources