Related
How do I go about this
I want to add something like a greeting, say "Hi James" before the Sliders , something like this
https://i.postimg.cc/cJQb8Cyz/Screenshot-1664302329.png
I wanted the greeting to be there , not sure how to go about it.
My source code is looking thus
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
class TransactionDetails {
String? avatar;
String? name;
String? date;
String? amount;
TransactionDetails({
this.avatar,
this.name,
this.date,
this.amount,
});
TransactionDetails.fromJson(Map<String, dynamic> json) {
avatar = json['avatar'];
name = json['name'];
date = json['date'];
amount = json['amount'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = <String, dynamic>{};
data['avatar'] = avatar;
data['name'] = name;
data['date'] = date;
data['amount'] = amount;
return data;
}
}
Future<List<TransactionDetails>> fetchAlbum() async {
final response = await http.get(Uri.parse(
'https://brotherlike-navies.000webhostapp.com/people/people.php'));
if (response.statusCode == 200) {
final List result = json.decode(response.body);
return result.map((e) => TransactionDetails.fromJson(e)).toList();
} else {
throw Exception('Failed to load data');
}
}
class BaseScreen extends StatelessWidget {
const BaseScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(
"My Bank",
style: TextStyle(
fontFamily: "Poppins",
color: Colors.white,
fontWeight: FontWeight.bold),
),
leading: Padding(
padding: const EdgeInsets.all(8.0),
child: CircleAvatar(
backgroundImage:
NetworkImage('https://placeimg.com/640/480/people'),
),
),
actions: [
IconButton(
icon: Icon(Icons.notifications_active_outlined,
color: Colors.white, size: 27),
onPressed: () {})
],
),
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: double.infinity,
height: 150,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
Container(
margin: const EdgeInsets.all(15),
width: 319,
height: 100,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(16)),
alignment: Alignment.center,
child: const Text(
'\$5200.00',
style: TextStyle(
fontSize: 15,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
Container(
margin: const EdgeInsets.all(15),
width: 319,
height: 100,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(16)),
alignment: Alignment.center,
child: const Text(
'\$1200.00',
style: TextStyle(
fontSize: 15,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
SizedBox(height: 24),
],
),
),
Padding(
padding: EdgeInsets.all(15),
child: Text(
"Recent Transactions",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.green),
),
),
Center(
child: FutureBuilder<List<TransactionDetails>>(
future: fetchAlbum(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
shrinkWrap: true,
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
return ListTile(
leading: CircleAvatar(
child: Image.network(
snapshot.data![index].avatar.toString()),
),
title:
Text(snapshot.data![index].name.toString()),
trailing: Text(
snapshot.data![index].amount.toString()),
subtitle:
Text(snapshot.data![index].date.toString()),
);
});
} else if (snapshot.hasError) {
return Text('${snapshot.error}');
}
return const CircularProgressIndicator();
}))
],
)));
}
}
How do i put the greeting before the Sliders? Help is needed.
Add Text widget for text and SizedBox for space. You can also use Padding widget around Text.
),
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 20,
), //gap or use Padding widget
Text("Greatins"),
SizedBox(
height: 20,
), //gap
SizedBox(
height: 150,
with Padding widget
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(
top: 8,
bottom: 8,
),
child: Text("Greatins"),
),
SizedBox(
class BaseScreen extends StatelessWidget {
const BaseScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Padding(
padding: EdgeInsets.only(top: 1, left: 1),
child: Text(
"My Bank",
style: TextStyle(
fontFamily: "Poppins",
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
leading: Padding(
padding: const EdgeInsets.all(8.0),
child: CircleAvatar(
backgroundImage:
NetworkImage('https://placeimg.com/640/480/people'),
),
),
actions: [
IconButton(
icon: Icon(Icons.notifications_active_outlined,
color: Colors.white, size: 27),
onPressed: () {})
],
),
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(
top: 8,
bottom: 8,
),
child: Text("Greatins"),
),
SizedBox(
height: 150,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
Container(
margin: const EdgeInsets.all(15),
width: 319,
height: 100,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(16)),
alignment: Alignment.center,
child: const Text(
'\$5200.00',
style: TextStyle(
fontSize: 15,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
Container(
margin: const EdgeInsets.all(15),
width: 319,
height: 100,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(16)),
alignment: Alignment.center,
child: const Text(
'\$1200.00',
style: TextStyle(
fontSize: 15,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
SizedBox(height: 24),
],
),
),
Padding(
padding: EdgeInsets.all(15),
child: Text(
"Recent Transactions",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.green),
),
),
Center(
child: FutureBuilder<List<TransactionDetails>>(
future: fetchAlbum(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
shrinkWrap: true,
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
return ListTile(
leading: CircleAvatar(
child: Image.network(
snapshot.data![index].avatar.toString()),
),
title:
Text(snapshot.data![index].name.toString()),
trailing: Text(
snapshot.data![index].amount.toString()),
subtitle:
Text(snapshot.data![index].date.toString()),
);
});
} else if (snapshot.hasError) {
return Text('${snapshot.error}');
}
return const CircularProgressIndicator();
}))
],
)));
}
}
i want the popular menu to scroll down as i scroll on the whole page , not as it is right now scrolling only on that little part
its a Listview.builder inside a Listview
Demo : https://i.stack.imgur.com/TZ8xH.gif
here is the full code
its commented where the Listview and Listview.builder are
ctrl+f search this "//////" to quickly find them
import 'dart:async';
import 'package:custom_refresh_indicator/custom_refresh_indicator.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:foodninja/consts.dart';
import 'package:lottie/lottie.dart';
Color whiteBcg = const Color.fromARGB(255, 255, 255, 255);
Color limeColor = const Color.fromARGB(204, 77, 200, 118);
Color blackColor = Colors.black;
Color orangeInside = const Color.fromARGB(255, 210, 122, 0);
Color orangeOutside = const Color.fromARGB(45, 210, 123, 0);
Color cardBcg = const Color.fromRGBO(238, 238, 238, 1);
Color subText = const Color.fromARGB(255, 164, 164, 164);
class MyIconButton extends StatelessWidget {
const MyIconButton({
Key? key,
required this.icon,
required this.onClickAction,
}) : super(key: key);
final IconData icon;
final Function onClickAction;
#override
Widget build(BuildContext context) {
return Container(
height: 50,
width: 50,
decoration: BoxDecoration(
color: orangeOutside,
// border: Border.all(
// color: Colors.red,
// ),
borderRadius: BorderRadius.circular(15)),
child: TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
const Color.fromARGB(2, 255, 149, 0)),
),
onPressed: () => onClickAction(),
child: Icon(
icon,
color: orangeInside,
),
));
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
double h = MediaQuery.of(context).size.height;
double w = MediaQuery.of(context).size.width;
return Scaffold(
body: CustomRefreshIndicator(
onRefresh: () {
return Future(
() {},
);
},
builder: (
BuildContext context,
Widget child,
IndicatorController controller,
) {
return AnimatedBuilder(
animation: controller,
builder: (BuildContext context, _) {
return Stack(
children: <Widget>[
if (controller.isDragging ||
controller.isArmed ||
controller.isLoading)
Positioned(
left: w * 0.37,
top: controller.value * 50,
child: SizedBox(
height: 100,
width: 100,
child: Transform.translate(
offset: Offset(0, controller.value * 20),
child: Transform.scale(
scale: controller.value *1.5,
child:
Lottie.asset("assets/burgerBounce.json"))),
),
),
// if (controller.isArmed)
// Positioned(
// left: 0,
// top: 25 * controller.value,
// child: SizedBox(
// height: 100,
// width: 100,
// child: Lottie.asset("assets/icecream.json"),
// ),
// ),
Transform.translate(
offset: const Offset(0, 0),
child: child,
)
],
);
},
);
},
child: ListView(physics: const BouncingScrollPhysics(), children: [ ///////the list view
SafeArea(
child: Stack(children: [
SizedBox(
width: 500,
child: Image.asset(
'assets/PhoneVerificationPattern.png',
fit: BoxFit.fill,
),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
"Find your \nfavorite food",
style: TextStyle(
fontSize: 35, fontWeight: FontWeight.bold),
),
MyIconButton(
icon: Icons.notifications_none,
onClickAction: () {},
),
]),
const SizedBox(
height: 20,
),
Container(
alignment: Alignment.center,
height: 70,
width: w,
decoration: BoxDecoration(
color: orangeOutside,
// border: Border.all(
// color: Colors.red,
// ),
borderRadius: BorderRadius.circular(15)),
child: TextFormField(
style: TextStyle(color: orangeInside),
decoration: InputDecoration(
hintText: "what do you want to order ?",
hintStyle: TextStyle(color: orangeInside),
prefixIconColor: orangeInside,
fillColor: orangeInside,
focusColor: orangeInside,
border: InputBorder.none,
focusedBorder: InputBorder.none,
prefixIcon: Icon(
Icons.search,
color: orangeInside,
),
contentPadding:
EdgeInsets.fromLTRB(0, 14, 0, 0))),
),
const SizedBox(
height: 20,
),
PromoAdvert(h: h, w: w),
const SizedBox(
height: 15,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
"Nearest resturants",
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold),
),
RichText(
text: TextSpan(
children: [
TextSpan(
text: "View more",
style: TextStyle(
fontSize: 15,
color: orangeInside,
),
recognizer: TapGestureRecognizer()
..onTap = () {}),
],
),
),
],
),
const SizedBox(
height: 15,
),
NearestResturants(w: w, h: h),
const SizedBox(
height: 15,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
"Popular menu",
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold),
),
RichText(
text: TextSpan(
children: [
TextSpan(
text: "View more",
style: TextStyle(
fontSize: 15,
color: orangeInside,
),
recognizer: TapGestureRecognizer()
..onTap = () {}),
],
),
),
],
),
const SizedBox(
height: 20,
),
SizedBox(
height: 70,
width: 400,
child: ListView.builder( ////////////////List view builder where the problem is
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: 4,
itemBuilder: (context, index) => Container(
height: 70,
width: 400,
decoration: BoxDecoration(
color: cardBcg,
// border: Border.all(
// color: Colors.red,
// ),
borderRadius: BorderRadius.circular(15)),
child: Row(
children: [
Padding(
padding:
const EdgeInsets.fromLTRB(9, 5, 0, 5),
child: Container(
width: 50,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
nearestResturantsContentList[index]
.image,
),
),
borderRadius: BorderRadius.circular(15),
),
),
),
const SizedBox(
width: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Fruit Salade ",
textAlign: TextAlign.start,
),
Text(
"Vegan resto",
textAlign: TextAlign.start,
style: TextStyle(color: subText),
),
],
),
const SizedBox(
width: 150,
),
Text(
"7\$",
textAlign: TextAlign.start,
style: TextStyle(
color: const Color.fromARGB(
255, 254, 171, 29),
fontSize: 23),
)
],
)),
),
),
],
),
)
]),
),
]),
),
);
}
}
class NearestResturantsContent {
late String image;
late String text;
late String subText;
NearestResturantsContent(
this.image,
this.text,
this.subText,
);
}
List<NearestResturantsContent> nearestResturantsContentList = [
NearestResturantsContent(
"assets/veganRestoLogo.png",
"veganResto",
"3KM",
),
NearestResturantsContent(
"assets/AjintiLogo.png",
"Ajinti",
"6KM",
),
NearestResturantsContent(
"assets/ChefGoLogo.png",
"ChefGo",
"10KM",
),
NearestResturantsContent(
"assets/BakeryLogo.png",
"Bakery",
"3KM",
),
NearestResturantsContent(
"assets/healthyFoodLogo.png",
"healthyFood",
"5KM",
),
NearestResturantsContent(
"assets/windowstoLogo.png",
"windowsto",
"3KM",
),
];
class NearestResturants extends StatelessWidget {
const NearestResturants({
Key? key,
required this.w,
required this.h,
}) : super(key: key);
final double w;
final double h;
#override
Widget build(BuildContext context) {
return SizedBox(
width: w,
height: h * 0.22,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: nearestResturantsContentList.length,
itemBuilder: (context, index) {
return Container(
margin: const EdgeInsets.fromLTRB(0, 0, 10, 0),
width: w * 0.4,
height: h * 0.22,
decoration: BoxDecoration(
color: cardBcg,
// border: Border.all(
// color: Colors.red,
// ),
borderRadius: BorderRadius.circular(15)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
child: SizedBox(
height: 90,
width: 90,
child: Image.asset(
nearestResturantsContentList[index].image,
fit: BoxFit.fill,
),
),
),
Text(
nearestResturantsContentList[index].text,
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
overflow: TextOverflow.ellipsis),
),
const SizedBox(
height: 5,
),
Text(
nearestResturantsContentList[index].subText,
style: TextStyle(
color: subText,
fontSize: 13,
fontWeight: FontWeight.bold,
overflow: TextOverflow.ellipsis),
),
],
),
);
},
),
);
}
}
class PromoAdvertContent {
late String image;
late String text;
late String subText;
late Color color;
PromoAdvertContent(this.image, this.text, this.subText, this.color);
}
List<PromoAdvertContent> promoAdvertContentList = [
PromoAdvertContent("assets/promoAdvert.png", "Special deal for \nOctober",
"Buy now", limeColor),
PromoAdvertContent("assets/promoAdvert.png", "Special deal for \nOctober",
"check out", orangeInside),
PromoAdvertContent(
"assets/promoAdvert.png", "No way this \nOctober", "check out", subText)
];
class PromoAdvert extends StatelessWidget {
const PromoAdvert({
Key? key,
required this.h,
required this.w,
}) : super(key: key);
final double h;
final double w;
#override
Widget build(BuildContext context) {
bool isScrollingToRight = true;
int currentPage = 0;
PageController scrollController = PageController(initialPage: 0);
void _scrollToBottom() {
if (currentPage < promoAdvertContentList.length && isScrollingToRight) {
currentPage++;
} else if (!isScrollingToRight && currentPage == 0) {
currentPage++;
isScrollingToRight = true;
} else {
isScrollingToRight = false;
currentPage--;
}
if (scrollController.hasClients) {
scrollController.animateToPage(
currentPage,
duration: const Duration(milliseconds: 1000),
curve: Curves.easeOut,
);
}
}
WidgetsBinding.instance.addPostFrameCallback(
(_) => Timer.periodic(const Duration(seconds: 15), (_) {
_scrollToBottom();
}));
return SizedBox(
width: w,
height: h * 0.217,
child: CustomRefreshIndicator(
onRefresh: () {
return Future(
() {},
);
},
builder: (
BuildContext context,
Widget child,
IndicatorController controller,
) {
return AnimatedBuilder(
animation: controller,
builder: (BuildContext context, _) {
return Stack(
children: <Widget>[
if (controller.isDragging ||
controller.isArmed ||
controller.isLoading)
Positioned(
left: 0,
top: h * 0.05,
child: SizedBox(
height: 100,
width: 100,
child: Transform.translate(
offset: Offset(-controller.value * 20, 0),
child: Transform.rotate(
angle: 11,
child: Lottie.asset("assets/icecream.json"))),
),
),
// if (controller.isArmed)
// Positioned(
// left: 0,
// top: 25 * controller.value,
// child: SizedBox(
// height: 100,
// width: 100,
// child: Lottie.asset("assets/icecream.json"),
// ),
// ),
Transform.translate(
offset: const Offset(0, 0),
child: child,
)
],
);
},
);
},
child: PageView.builder(
controller: scrollController,
physics: const BouncingScrollPhysics(),
scrollDirection: Axis.horizontal,
itemCount: promoAdvertContentList.length,
itemBuilder: (context, index) {
if (promoAdvertContentList.length == index) {
print('a"sqdqsqs');
CircularProgressIndicator();
}
return Container(
width: h * 0.47,
height: 160,
decoration: BoxDecoration(
color: promoAdvertContentList[index].color,
// border: Border.all(
// color: Colors.red,
// ),
borderRadius: BorderRadius.circular(15)),
child: Stack(children: [
SizedBox(
height: 160,
width: h * 0.47,
child: Image.asset(
promoAdvertContentList[index].image,
fit: BoxFit.fill,
),
),
Positioned(
top: 30,
right: 5,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
promoAdvertContentList[index].text,
style: TextStyle(
color: whiteBcg,
fontSize: 20,
fontWeight: FontWeight.bold),
),
const SizedBox(
height: 10,
),
NextButton(
h: h,
w: w,
text: promoAdvertContentList[index].subText,
)
],
))
]),
);
},
),
),
);
}
}
class NextButton extends StatelessWidget {
const NextButton({
Key? key,
required this.h,
required this.w,
required this.text,
}) : super(key: key);
final double h;
final double w;
final String text;
#override
Widget build(BuildContext context) {
return Center(
child: SizedBox(
height: 45,
width: 100,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
elevation: 5,
child: TextButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
)),
backgroundColor: MaterialStateProperty.all<Color>(whiteBcg)),
onPressed: () {},
child: Text(
text,
style: TextStyle(color: limeColor, fontSize: 15),
overflow: TextOverflow.ellipsis,
softWrap: false,
)),
),
),
);
}
}
To the list view that is scrolling separately add physics
physics: NeverScrollableScrollPhysics(),
And remove sized box which is wrapping the listview
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.
I have gridviewbuilder that takes data from itemGriddata which has onTap function that directs it to a new page that takes data from that model as well but when I click on it the error in the title appears, any help or some kind of enlightement would be appreciated
this is gridview page
import 'package:flutter/material.dart';
import 'package:wild_wild_rift/builds/SinglePage.dart';
import 'package:wild_wild_rift/data/model.dart';
import 'package:google_fonts/google_fonts.dart';
class GridViewPage extends StatefulWidget {
#override
_GridViewPage createState() => _GridViewPage();
}
class _GridViewPage extends State<GridViewPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.grey,
automaticallyImplyLeading: true,
title: const Text(
'Champions',
style: TextStyle(
fontFamily: 'Lexend Doca',
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold,
),
),
elevation: 2,
),
body: Column(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: Padding(
padding: const EdgeInsetsDirectional.fromSTEB(15, 15, 15, 15),
child: GridView.builder(
itemCount: itemGriddata.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
childAspectRatio: 1,
),
itemBuilder: (context, index) {
return GridSingleItem(
itemGriddata: itemGriddata[index],
onTap: () async {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SinglePage(itemGriddata[index])));
},
);
},
),
),
),
],
));
}
}
class GridSingleItem extends StatelessWidget {
final itemGriddata;
final Function onTap;
const GridSingleItem({Key key, #required this.itemGriddata, this.onTap})
: super(key: key);
#override
Widget build(BuildContext context) {
return InkWell(
onTap: onTap,
child: ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: const Color(0xEEEEEE),
image: DecorationImage(
fit: BoxFit.cover,
image: Image.asset(itemGriddata.image).image,
),
boxShadow: const [
BoxShadow(
blurRadius: 3,
color: Color(0xDA000000),
)
],
borderRadius: BorderRadius.circular(9),
border: Border.all(
color: Colors.black,
),
),
child: Align(
alignment: AlignmentDirectional(-0.45, 0.85),
child: Text(
itemGriddata.name,
style: TextStyle(
fontFamily: 'Lexend Deca',
color: Color(0xFFFFFCFC),
fontWeight: FontWeight.normal,
shadows: [
Shadow(
blurRadius: 8.0,
color: Colors.black,
offset: Offset(1.0, 1.0),
),
],
),
),
),
),
),
);
}
}
this is page that I'd want to take data
import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import '../data/model.dart';
class SinglePage extends StatefulWidget {
#override
_SinglePage createState() => _SinglePage();
final Data data;
SinglePage(this.data);
}
class _SinglePage extends State<SinglePage> {
PageController pageViewController;
bool isFirstButton = false;
bool isSecondButton = false;
#override
void initState() {
super.initState();
pageViewController = PageController(initialPage: 0);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: const Color(0xFF090F13),
automaticallyImplyLeading: true,
title: Text(
itemGriddata.name,
style: TextStyle(
fontFamily: 'Lexend Deca',
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold,
),
),
actions: const [],
centerTitle: false,
elevation: 2,
),
backgroundColor: const Color(0xFF262D34),
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(0, 0, 0, 25),
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Row(
mainAxisSize: MainAxisSize.max,
children: [
Material(
color: Colors.transparent,
elevation: 3,
child: Container(
width: MediaQuery.of(context).size.width,
height: 150,
decoration: BoxDecoration(
color: const Color(0xFF090F13),
image: DecorationImage(
fit: BoxFit.cover,
image: Image.asset(
itemGriddata.backgroundimage,
).image,
),
),
),
),
],
),
Padding(
padding:
const EdgeInsetsDirectional.fromSTEB(20, 12, 20, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: const [
Text(
'Choose role',
style: TextStyle(
fontFamily: 'Lexend Deca',
color: Color(0xFF8B97A2),
fontSize: 14,
fontWeight: FontWeight.normal,
),
),
],
),
),
Padding(
padding:
const EdgeInsetsDirectional.fromSTEB(0, 12, 1, 0),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(
16, 0, 0, 0),
child: InkWell(
onTap: () async {
isSecondButton = false;
isFirstButton = true;
setState(() {});
await pageViewController.animateToPage(
0,
duration: const Duration(milliseconds: 500),
curve: Curves.ease,
);
},
child: Material(
color: Colors.transparent,
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: const Color(0xFF090F13),
borderRadius: BorderRadius.circular(8),
shape: BoxShape.rectangle,
border: isFirstButton
? Border.all(color: Colors.white)
: null),
child: Stack(
children: [
Align(
alignment: const AlignmentDirectional(
0, -0.05),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Image.asset(
'assets/images/icon-position-jungle.png',
width: 50,
height: 50,
fit: BoxFit.cover,
),
const Padding(
padding: EdgeInsetsDirectional
.fromSTEB(0, 8, 0, 0),
child: AutoSizeText(
'BUILD 1',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Lexend Deca',
color: Color(0xFF8B97A2),
fontSize: 14,
fontWeight:
FontWeight.normal,
),
),
),
],
),
),
],
),
),
),
),
),
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(
16, 0, 0, 0),
child: Material(
color: Colors.transparent,
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: const Color(0xFF090F13),
borderRadius: BorderRadius.circular(8),
border: isSecondButton
? Border.all(color: Colors.white)
: null),
child: InkWell(
onTap: () async {
isSecondButton = true;
isFirstButton = false;
setState(() {});
await pageViewController.animateToPage(
1,
duration:
const Duration(milliseconds: 500),
curve: Curves.ease,
);
},
child: Stack(
children: [
Align(
alignment: const AlignmentDirectional(
0, -0.05),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Image.asset(
'assets/images/icon-position-jungle.png',
width: 50,
height: 50,
fit: BoxFit.cover,
),
const Padding(
padding: EdgeInsetsDirectional
.fromSTEB(0, 8, 0, 0),
child: AutoSizeText(
'BUILD 2',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Lexend Deca',
color: Color(0xFF8B97A2),
fontSize: 14,
fontWeight:
FontWeight.normal,
),
),
),
],
),
),
],
),
),
),
),
),
],
),
),
),
Padding(
padding:
const EdgeInsetsDirectional.fromSTEB(20, 8, 20, 8),
child: Row(
mainAxisSize: MainAxisSize.max,
children: const [
Text(
'Builds',
style: TextStyle(
fontFamily: 'Lexend Deca',
color: Color(0xFF8B97A2),
fontSize: 14,
fontWeight: FontWeight.normal,
),
),
],
),
),
SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(
16, 8, 16, 0),
child: Container(
width: MediaQuery.of(context).size.width,
height: 200,
decoration: BoxDecoration(
color: const Color(0x00090F13),
boxShadow: const [
BoxShadow(
blurRadius: 3,
color: Colors.transparent,
offset: Offset(0, 2),
)
],
borderRadius: BorderRadius.circular(8),
),
child: SizedBox(
width: double.infinity,
height: 500,
child: PageView(
controller: pageViewController,
scrollDirection: Axis.horizontal,
children: [
Image.asset(
'assets/images/image_1.png',
width: 100,
height: 100,
fit: BoxFit.cover,
),
Image.asset(
'assets/images/image_2.png',
width: 100,
height: 100,
fit: BoxFit.scaleDown,
),
],
),
),
),
),
],
),
),
],
),
),
),
Padding(
padding: const EdgeInsetsDirectional.fromSTEB(20, 0, 20, 8),
child: Row(
mainAxisSize: MainAxisSize.max,
children: const [
Text(
'Text',
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xFF8B97A2),
),
),
],
),
),
],
),
),
);
}
}
and this is the model with data
final dynamic itemGriddata = [
Data(
name: "Ahri",
image: "assets/images/Ahri.png",
backgroundimage: "assets/images/Ahri_0.jpg"),
Data(
name: "Akali",
image: "assets/images/Akali.png",
backgroundimage: "assets/images/Akali_0.jpg")
];
class Data {
final String name;
final String image;
final String backgroundimage;
Data({this.name, this.image, this.backgroundimage});
}
The issue is that your SinglePage widget has a prop named final Data data; but the _SinglePageState widget is calling itemGriddata for your title and images. You'll need to change your code like so:
class SinglePage extends StatefulWidget {
const SinglePage(Key? key, this.data): super(key: key);
final Data data;
#override
State<StatefulWidget> createState() => _SinglePageState();
}
class _SinglePageState extends State<SinglePage> {
// use widget.data to get name, image, and backgroundImage
// ex... widget.data.name or widget.data.image
#override
Widget build(BuildContext context) {
return Text(widget.data.name);
}
}
You're passing the data correctly to SinglePage, but just change a few lines to ensure you're calling something with actual data! :D
What I Have are number of orders received that has be shown into a tab into a widget in flutter according with this code:
class ShipmentTab extends StatefulWidget {
#override
_ShipmentTabState createState() => _ShipmentTabState();
}
class _ShipmentTabState extends State<ShipmentTab> {
**final shipmentNumber = "16";**
#override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
color: Color(0xfffeaf0d),
child: Container(
width: 40,
height: 40,
child: Icon(
Icons.local_shipping,
color: Colors.white,
),
),
),
),
Padding(
padding: const EdgeInsets.all(13),
child: Text(
shipmentNumber,
style: TextStyle(
color: Colors.white, fontSize: 35, fontWeight: FontWeight.bold),
),
),
],
);
}
}
as you can see variable is " shipmentNumber " that show "16"
below I have listview.builder and I need to add itemCount and this count has to be refered to the tab above "16"
this is the code of the list:
Container(
height: 400,
child: ListView.builder(
shrinkWrap: true,
itemBuilder: (ctx, int) {
return Card(
color: Color(0xFF1f2032),
elevation: 15,
child: Container(
width: 60,
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Card(
color: Color(0xfffeaf0d),
child: Container(
height: 40,
width: 40,
child: Icon(
Icons.local_shipping,
color: Colors.white,
size: 25,
)),
),
Text(
'Ref № $int',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
Text(
'Mario Rossi',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Color(0xfffeaf0d),
),
),
Text(
'Consegnato',
style: TextStyle(color: Colors.lightGreenAccent),
),
Icon(
Icons.share,
color: Colors.white,
)
],
),
),
);
},
),
),
],
);
}
}
ListView.builder has itemCount parameter. I notice shipmentNumber is in String so you can parse it to int. Also you need to remove the Container height wrapping your ListView
ListView.builder(
shrinkWrap: true,
itemCount: int.parse(shipmentNumber),
itemBuilder: (BuildContext context, int index) {
/** build your Item here **/
return BuiltItem();
},
)