#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(50),
child: AppBar(
flexibleSpace: Container(
decoration: const BoxDecoration(
gradient: GlobalVariables.appBarGradient,
),
),
title: Text(
widget.category,
style: const TextStyle(
color: Colors.black,
),
),
),
),
body: productList == null
? const Loader()
: Column(
children: [
Container(
padding:
const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
alignment: Alignment.topLeft,
child: Text(
'Keep shopping for ${widget.category}',
style: const TextStyle(
fontSize: 20,
),
),
),
SizedBox(
height: 170,
child: GridView.builder(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.only(left: 15),
itemCount: productList!.length,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
childAspectRatio: 1.4,
mainAxisSpacing: 10,
),
itemBuilder: (context, index) {
final product = productList![index];
return GestureDetector(
onTap: () {
Navigator.pushNamed(
context,
ProductDetailScreen.routeName,
arguments: product,
);
},
child: Column(
children: [
SizedBox(
height: 130,
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black12,
width: 0.5,
),
),
child: Padding(
padding: const EdgeInsets.all(10),
child: Image.network(
product.images[0],
),
),
),
),
Container(
alignment: Alignment.topLeft,
padding: const EdgeInsets.only(
left: 0,
top: 5,
right: 15,
),
child: Text(
product.name,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
);
},
),
),
I tried SingleChildScrollView in child but it didnt helped.
Code Image
You are using scrollDirection: Axis.horizontal, therefore it is scrolling horizontally. you can remove it or set to scrollDirection: Axis.vertical, on GridView.
child: GridView.builder(
scrollDirection: Axis.vertical, //this by default
padding: const EdgeInsets.only(left: 15),
No need to provide fixed heigth, use Expnaded widget to get available height, follow this snippet
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
alignment: Alignment.topLeft,
child: Text(
'Keep shopping for',
style: const TextStyle(
fontSize: 20,
),
),
),
Expanded(
child: GridView.builder(
padding: const EdgeInsets.only(left: 15),
itemCount: 44,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
childAspectRatio: 1.4,
mainAxisSpacing: 10,
),
itemBuilder: (context, index) {
// final product = productList![index];
return GestureDetector(
onTap: () {},
child: Column(
children: [
SizedBox(
height: 130,
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black12,
width: 0.5,
),
),
child: Padding(
padding: const EdgeInsets.all(10),
// child: Image.network(
// product.images[0],
// ),
),
),
),
Container(
alignment: Alignment.topLeft,
padding: const EdgeInsets.only(
left: 0,
top: 5,
right: 15,
),
child: Text(
"name",
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
);
},
),
)
],
),
);
}
Related
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),
),
),
),
),
],
I made an application like this:
I want to add a little info text on top of this gridView structure. How can I do it? I'm a beginner and I just couldn't do it.
Codes:
body: Container(
padding: EdgeInsets.all(7),
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
itemCount: subjects.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(2.0),
child: Container(
child: InkWell(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.black),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(subjects[index].subjectImage, fit: BoxFit.cover, height: 50, width: 50,),
SizedBox(height: 15,),
Text(subjects[index].subjectName, style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),),
],
),
),
onTap: () {},
),
),
);
},
),
How can I do it? Thanks in advance.
Try below code. I have added text like Text("1234567890")
body: Container(
padding: EdgeInsets.all(7),
child: Column(
children: [
Text("1234567890"), //<------------
Expanded(
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
itemCount: subjects.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(2.0),
child: Container(
child: InkWell(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.black),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
subjects[index].subjectImage,
fit: BoxFit.cover,
height: 50,
width: 50,
),
SizedBox(
height: 15,
),
Text(
subjects[index].subjectName,
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.w500),
),
],
),
),
onTap: () {},
),
),
);
},
),
),
],
),
);
You can use #DholaHardik's answer. Just need to wrap the Grid View Builder to a Sized Box and give it a height let's say height = MediaQuery.of(context).size.height and if the error says Overyflow by say 45 pixels.. You can change height to MediaQuery.of(context).size.height - 45;
I am trying to bring a List of containers and i want to change the details inside this list of containers using fire store. But when i am running the program the page is showing blank. The output i want is like this image,
The output i am getting. And my second question is how to add images to the field inside the firestore.
Thanks in advance, it is really hard to publish a question in stack overflow.
body: StreamBuilder(
stream: Firestore.instance.collection('Event').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
const Text('No Event');
}
else if(snapshot.hasError){ const Text('No data avaible right now'); }
else {
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
DocumentSnapshot myEvent = snapshot.data.documents[index];
return ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
//1st box
Container(
margin: EdgeInsets.all(
SizeConfig.safeBlockHorizontal * 4),
child: Container(
child: new FittedBox(
child: Material(
// color: Colors.white,
elevation: 14.0,
borderRadius: BorderRadius.circular(24.0),
shadowColor: Color(0x802196F3),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Padding(
padding: EdgeInsets.only(
left:
SizeConfig.safeBlockHorizontal *
4),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
left: 8.0),
child: Container(
child: Text(
'${myEvent['date_1']}',
style: TextStyle(
color: Colors.black54,
fontSize: 24.0,
fontWeight:
FontWeight.bold),
)),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(
left: 8.0),
child: Container(
child: Column(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: <Widget>[
Container(
child: Text(
'${myEvent['title_1']}',
style: TextStyle(
color: Colors.black,
fontSize: 22.0,
fontWeight:
FontWeight.bold),
)),
SizedBox(
height: 10,
),
Container(
child: Text(
'${myEvent['details_1_a']}',
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
)),
Container(
child: Text(
'${myEvent['details_1_b']}',
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
)),
],
)),
),
],
),
),
),
SizedBox(
width:
SizeConfig.safeBlockHorizontal * 18,
),
Container(
width:
SizeConfig.safeBlockHorizontal * 60,
height:
SizeConfig.safeBlockHorizontal * 55,
child: ClipRRect(
borderRadius:
new BorderRadius.circular(24.0),
child: Image.network(
'${myEvent['image_1']}',
fit: BoxFit.fill,
alignment: Alignment.topRight,
),
),
),
],
),
),
),
),
),
//2nd box
Container(
margin: EdgeInsets.all(
SizeConfig.safeBlockHorizontal * 4),
child: Container(
child: new FittedBox(
child: Material(
// color: Colors.white,
elevation: 14.0,
borderRadius: BorderRadius.circular(24.0),
shadowColor: Color(0x802196F3),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Padding(
padding: EdgeInsets.only(
left:
SizeConfig.safeBlockHorizontal *
4),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
left: 8.0),
child: Container(
child: Text(
'${myEvent['date_2']}',
style: TextStyle(
color: Colors.black54,
fontSize: 24.0,
fontWeight:
FontWeight.bold),
)),
),
SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(
left: 8.0),
child: Container(
child: Column(
mainAxisAlignment:
MainAxisAlignment
.spaceEvenly,
children: <Widget>[
Container(
child: Text(
'${myEvent['title_2']}',
style: TextStyle(
color: Colors.black,
fontSize: 22.0,
fontWeight:
FontWeight.bold),
)),
SizedBox(
height: 10,
),
Container(
child: Text(
'${myEvent['details_2_a']}',
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
)),
Container(
child: Text(
'${myEvent['details_2_b']}',
style: TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
)),
],
),
),
),
],
),
),
),
SizedBox(
width:
SizeConfig.safeBlockHorizontal * 18,
),
Container(
width:
SizeConfig.safeBlockHorizontal * 60,
height:
SizeConfig.safeBlockHorizontal * 55,
child: ClipRRect(
borderRadius:
new BorderRadius.circular(24.0),
child: Image.network(
'${myEvent['image_2']}',
fit: BoxFit.fill,
alignment: Alignment.topRight,
),
),
),
],
),
),
),
),
),
I don't think you need the second listview, but if you do, try this:
body: StreamBuilder(
stream: Firestore.instance.collection('Event').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
const Text('No Event');
}
else if(snapshot.hasError){ const Text('No data avaible right now'); }
else {
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
DocumentSnapshot myEvent = snapshot.data.documents[index];
return ListView(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
children: <Widget>[
//1st box
...
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>
[Widget _builtCard() {
return Container(
margin: EdgeInsets.symmetric(horizontal: 10.0),
child: FutureBuilder(
future: dbManager.getCategoryList(),
builder: (context, snapshot) {
if (snapshot.hasData) {
categoryList = snapshot.data;
print("object");
return ListView.builder(
itemCount: categoryList.length,
physics: ScrollPhysics(),
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>\[
Container(
margin:
EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
child: Text(
categoryList\[index\].categoryName.toUpperCase(),
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20.0),
),
),
AspectRatio(
aspectRatio: 2 / 3,
child: Container(
child: FutureBuilder(
future: dbManager
.getProductList(categoryList\[index\].categoryName),
builder: (context, snapshot) {
if (snapshot.hasData) {
productList = snapshot.data;
productList.forEach((row) => print(row));
return GridView.builder(
physics: ScrollPhysics(),
scrollDirection: Axis.horizontal,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 4 / 2.5,
crossAxisCount: 2,
crossAxisSpacing: 15.0,
mainAxisSpacing: 15.0),
shrinkWrap: true,
itemCount: productList == null
? 0
: productList.length,
itemBuilder:
(BuildContext context, int index) {
Product prod = productList\[index\];
return GestureDetector(
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(10.0)),
elevation: 7.0,
child: Column(
children: <Widget>\[
SizedBox(height: 12.0),
Stack(children: <Widget>\[
Container(
height: MediaQuery.of(context)
.size
.height /
5,
width: MediaQuery.of(context)
.size
.width,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(
20.0),
image: DecorationImage(
image: NetworkImage(
prod.picture))),
),
\]),
SizedBox(height: 20.0),
Text(
prod.name,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Quicksand',
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
maxLines: 1,
),
SizedBox(height: 5.0),
Text(
'Rp ${prod.price.toString()}',
style: TextStyle(
fontFamily: 'Quicksand',
fontWeight: FontWeight.bold,
fontSize: 15.0,
color: Colors.grey),
),
SizedBox(height: 10.0),
Expanded(
child: InkWell(
onTap: () {
showModalBottomSheet(
isScrollControlled: true,
shape:
RoundedRectangleBorder(
borderRadius:
BorderRadius
.only(
topLeft:
Radius.circular(40),
topRight:
Radius.circular(40),
)),
context: context,
builder: (BuildContext bc) {
return Container(
height: MediaQuery.of(
context)
.size
.height *
.75,
child: Padding(
padding:
const EdgeInsets
.all(12.0),
child:
SingleChildScrollView(
child: Column(
children: <
Widget>\[
Center(
child: Image
.network(
prod.picture)),
Padding(
padding:
const EdgeInsets
.all(
8.0),
child: Center(
child: Text(
'${prod.name}',
style: TextStyle(
letterSpacing:
1.5,
fontSize:
15,
fontWeight:
FontWeight.bold),
),
),
),
Padding(
padding:
const EdgeInsets
.all(
8.0),
child: Center(
child: Text(
'Rp ${prod.price}'),
),
),
Padding(
padding:
const EdgeInsets
.all(
8.0),
child: Center(
child: Text(
'${prod.detail}'),
),
),
Center(
child:
RaisedButton(
child: Text(
'Add to cart'),
color: Colors
.lightGreen,
textColor:
Colors
.white,
onPressed:
() {
_addToCart(
prod.id,
prod.name,
prod.price,
prod.picture);
},
),
),
\],
),
),
),
);
});
},
child: Container(
width: 175.0,
decoration: BoxDecoration(
color:
prod.price.toString() ==
'Away'
? Colors.grey
: Colors.lightGreen,
borderRadius: BorderRadius
.only(
bottomLeft:
Radius.circular(
10.0),
bottomRight:
Radius.circular(
10.0)),
),
child: Center(
child: Text(
'Check Detail',
style: TextStyle(
color: Colors.white,
fontFamily:
'Quicksand'),
),
)),
))
\],
),
),
);
});
}
return Container(
child: Center(
child: new CircularProgressIndicator(),
),
);
},
),
),
),
\],
);
},
);
}
return Container(
child: Center(
child: new CircularProgressIndicator(),
),
);
},
),
);
}][1]
Is it possible to do it like this ? and than here is where the query to get the Data.
Please guys help me to solve this problem , your answer very help me a lot Thank you .
I dont know sometimes it just show properly but sometimes it will show like that error randomly .
I want my content change dynamicly by the category title