How to add text under each list in flutter - flutter

return Container(
height: 90,
child: Expanded(
child: ListView.builder(
itemCount: _trader.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index){
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 70,
width: 70,
decoration: BoxDecoration(
shape: BoxShape.circle,
),
child: GestureDetector(
onTap: ()=> print('Go to profile'),
child: Image.asset('image/profileIcon.png'),
),
),
);
}
),
),
);
}```


try this code:
return Container(
height: 90,
child: Expanded(
child: ListView.builder(
itemCount: _trader.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index){
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
InkWell(
onTap: ()=> print('Go to profile'),
child: Container(
height: 70,
width: 70,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('image/profileIcon.png'),
fit: BoxFit.fill,
),
shape: BoxShape.circle
),
),
),
Text("YOU WANT THAT TEXT")
],
),
);
}
),
),
);

Related

flutter ListView Separated

i tried to use listViewSeparated on a Widget along a row with scrolling but it doesn't show anything like its only a Scaffold (white page) i don't know what is the problem
Here is my code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../layout/cubit/cubit.dart';
import '../../layout/cubit/states.dart';
class HomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return BlocConsumer<LifeStyleCubit, LifeStates>(
listener: (context, state) {},
builder: (context, state) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
child: Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
ListView.separated(
shrinkWrap: true,
itemBuilder: (context,index) =>SpecialProgramWidget(),
separatorBuilder: (context,index) => SizedBox(width: 20,),
itemCount: 3
),
],
),
),
],
),
),
),
);
},
);
}
Widget SpecialProgramWidget() => Container(
width: 310,
height: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
),
child: Column(
children: [
Stack(
alignment: Alignment.bottomRight,
children: [
Container(
height: 230,
width: 310,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10)),
image: DecorationImage(
image: NetworkImage(
'https://i.pinimg.com/564x/20/bd/68/20bd68b5a248bb191178bd9b98b53a76.jpg'),
fit: BoxFit.cover)),
),
Align(
alignment: Alignment.topLeft,
child: Container(
height: 230,
width: 290,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://www.pngplay.com/wp-content/uploads/6/Fitness-PNG-HD-Quality.png'),
fit: BoxFit.cover)),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Special Program',
style: TextStyle(fontSize: 21, color: Colors.white),
),
)
],
),
Container(
width: 310,
height: 70,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10),
),
border: Border.all(color: Colors.grey.shade400, width: 1),
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Align(
alignment: Alignment.topLeft,
child: Text(
'Super pump biceps workout',
style: TextStyle(
fontSize: 15,
),
)),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Align(
alignment: Alignment.topLeft,
child: Text(
'6 Weeks',
style: TextStyle(fontSize: 15, color: Colors.grey),
)),
),
],
),
)
],
),
);
}
i need my screen displayed like this
return Scaffold(
body: Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
SpecialProgramWidget(),
SizedBox(width: 20,),
SpecialProgramWidget(),
SizedBox(width: 20,),
SpecialProgramWidget()
],
),
),
],
)
);
Which it displays the widget along a row... i wanted to do the same thing with ListViewSeparated but i only got White page with no data
i tried some solutions like wrapping Expanded widget on ListViewSeparated but still doesn't work
how can i solve this ?

The issue is on scrollDirection: Axis.horizontal,. Also you dont need to use ListView.separated( inside SingleChildScrolView, the parent is already handling the scroll event.
You can provide fixed with ListView.separated to bypass the issue,
Widget build(BuildContext context) {
// return
// BlocConsumer<LifeStyleCubit, LifeStates>(
// listener: (context, state) {},
// builder: (context, state) {
return Scaffold(
body: LayoutBuilder(
builder: (_, constraints) => Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
child: Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
SizedBox(
width: constraints.maxWidth,
child: ListView.separated(
shrinkWrap: true,
itemBuilder: (context, index) =>
SpecialProgramWidget(),
separatorBuilder: (context, index) =>
SizedBox(width: 20),
itemCount: 3,
),
),
],
),
),
],
),
),
),
),
// );
// },
);
}
A better decision will be using CustomScrolView I think it will be better for the thing you are trying to get.

Exit from gridview.builder iteration in flutter or remove empty space

I am trying to implement a vision board. I'm using gridview.builder for adding up to 12 images. Almost everything works as I expect: adding up to 12 images, but when the limit is reached, somehow I want to stop the iteration, because I am not able to return null, and any widget I return, it will create additional space I don't want.
GridView.builder(
clipBehavior: Clip.none,
physics: ScrollPhysics(),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: SizeConfig.screenWidth!/3,
crossAxisSpacing: 0,
mainAxisSpacing: 0),
itemCount: visions.length+1,
itemBuilder: (BuildContext ctx, index) {
print("__________");
print("AM INTRAT IN ITEM BUILDER");
print("INDEX $index");
print(visions.length);
if (index < visions.length) {
print("PHOTO ALREADY ADDED CONTAINER");
return Stack(
alignment: Alignment.center,
children: [
Container(
width: double.infinity,
height: double.infinity,
),
Container(
width: SizeConfig.screenWidth!/4,
height: SizeConfig.screenWidth!/4,
decoration: BoxDecoration(
image: DecorationImage(
image: FileImage(File(visions[index])),
fit: BoxFit.cover),
borderRadius: const BorderRadius.all(
Radius.circular(
5.0) // <--- border radius here
),
),
),
Positioned(
top:0,
right:0,
child: Container(
child: ClipOval(
child: InkWell(
onTap: () {
_removeVisions(index);
},
child: Container(
padding: const EdgeInsets.all(5),
color: Colors.white,
child:
const Icon(
Icons.delete,
size: 16,
color: Color(0xff221F1E)),
),
),
),
),
),
],
clipBehavior: Clip.none,
);
}
else if(index<12){
print("ADAUGA POZA");
print("INDEX $index");
print(visions.length);
return InkWell(
onTap: () {
_openGallery(context);
},
child:
Stack(
alignment: Alignment.center,
children:[
Container(
width: SizeConfig.screenWidth!/4,
height: SizeConfig.screenWidth!/4,
decoration:
BoxDecoration(
border: Border.all(color: const Color(0xff221F1E)),
borderRadius: const BorderRadius.all(Radius.circular(5.0)),
),
child:
const Icon(
Icons.add,
size: 22,
color: Color(0xff221F1E),
)
),
],
),
);
}
else {
return Container(color: Colors.red);
}
}
),
I want to remove that red container.
I have also tried to hardcode something with Positioned widget, but nothing worked, so I am trying somehow to exit when index is equal to 12 or any other solution...

I would try a true/false statement like this for your itemcount:
itemCount: (visions.length == 12) ? visions.length : visions.length + 1,

Yes, you can't return a null value but you can simply empty the widget. So, what I mean, SizedBox widget. Added an example for you, just check it
GridView.builder(
clipBehavior: Clip.none,
physics: ScrollPhysics(),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: SizeConfig.screenWidth!/3,
crossAxisSpacing: 0,
mainAxisSpacing: 0),
itemCount: visions.length+1,
itemBuilder: (BuildContext ctx, index) {
print("__________");
print("AM INTRAT IN ITEM BUILDER");
print("INDEX $index");
print(visions.length);
if (index < visions.length) {
print("PHOTO ALREADY ADDED CONTAINER");
return Stack(
alignment: Alignment.center,
children: [
Container(
width: double.infinity,
height: double.infinity,
),
Container(
width: SizeConfig.screenWidth!/4,
height: SizeConfig.screenWidth!/4,
decoration: BoxDecoration(
image: DecorationImage(
image: FileImage(File(visions[index])),
fit: BoxFit.cover),
borderRadius: const BorderRadius.all(
Radius.circular(
5.0) // <--- border radius here
),
),
),
Positioned(
top:0,
right:0,
child: Container(
child: ClipOval(
child: InkWell(
onTap: () {
_removeVisions(index);
},
child: Container(
padding: const EdgeInsets.all(5),
color: Colors.white,
child:
const Icon(
Icons.delete,
size: 16,
color: Color(0xff221F1E)),
),
),
),
),
),
],
clipBehavior: Clip.none,
);
}
else if(index<12){
print("ADAUGA POZA");
print("INDEX $index");
print(visions.length);
return InkWell(
onTap: () {
_openGallery(context);
},
child:
Stack(
alignment: Alignment.center,
children:[
Container(
width: SizeConfig.screenWidth!/4,
height: SizeConfig.screenWidth!/4,
decoration:
BoxDecoration(
border: Border.all(color: const Color(0xff221F1E)),
borderRadius: const BorderRadius.all(Radius.circular(5.0)),
),
child:
const Icon(
Icons.add,
size: 22,
color: Color(0xff221F1E),
)
),
],
),
);
}
else {
return const SizedBox.shrink();
}
}
),

How to Display Particulate range of data from list in Listview.builder in Flutter?

I want to Display data from index 1 to 3 only in Listview.builder so how i can do this?
Container(
padding: EdgeInsets.fromLTRB(0, 0, 0, Constants.APP_PADDING),
height: 225,
child: ListView.builder(
itemBuilder: popularPlanItemBuilder,
scrollDirection: Axis.horizontal,
itemCount: _imageList.length,
),
Widget popularPlanItemBuilder(BuildContext context, int index) {
ImageModel image = _imageList[index];
return Padding(
padding: const EdgeInsets.fromLTRB(5, 5, 0, 5),
child: Container(
alignment: Alignment.center,
child: Container(
child: Card(
child: Container(
alignment: Alignment.center,
child: ClipRRect(
borderRadius: BorderRadius.circular(18),
child: Image.network(
"$imageUrl" + image.imgPath!,
width: MediaQuery.of(context).size.width - 40,
fit: BoxFit.fill,
),
),
),
elevation: 8,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(18)),
),
),
),
);
}
),
As above I get all the image data from the list, but i want only data of index 1 to 3 so how i can do this?

By reducing the itemCount and checking index on itemBuilder
itemCount: data.length < 4 ? data.length : 4,
itemBuilder: (context, index) {
if (index >= 1 && index <= 3) {
return Text(data[index].toString()); //item builder
} else
return SizedBox();
},

Try this answer :
Container(
padding: EdgeInsets.fromLTRB(0, 0, 0, Constants.APP_PADDING),
height: 225,
child: ListView.builder(
itemBuilder: popularPlanItemBuilder,
scrollDirection: Axis.horizontal,
itemCount: 2,
),
Widget popularPlanItemBuilder(BuildContext context, int index) {
ImageModel image = _imageList[index];
return Padding(
padding: const EdgeInsets.fromLTRB(5, 5, 0, 5),
child: Container(
alignment: Alignment.center,
child: Container(
child: Card(
child: Container(
alignment: Alignment.center,
child: ClipRRect(
borderRadius: BorderRadius.circular(18),
child: Image.network(
"$imageUrl" + image.imgPath!,
width: MediaQuery.of(context).size.width - 40,
fit: BoxFit.fill,
),
),
),
elevation: 8,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(18)),
),
),
),
);
}
),

i need an horizontal and an vertical listView builder in the same page. horizontal at the top and vertical listview at the bottom

This is my code. i need an vertical listview at the top and an horizontal listview at the bottom. top listview shouldn't move with the bottom horizontal listview. My app freezes when i go to this page. i need to stop the main.dart and restart the app.i need a screen something like this. what should i do
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_ecommerce_app/common_widget/BottomNavBarWidget.dart';
import 'package:flutter_ecommerce_app/screens/ShoppingCartPage(p).dart';
class ExpanPrdCat extends StatefulWidget {
#override
_ExpanPrdCatState createState() => _ExpanPrdCatState();
}
class _ExpanPrdCatState extends State<ExpanPrdCat> {
bool isLoading = false;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
centerTitle: true,
title: Text('Vegetables'),
leading: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.arrow_back_ios_rounded),
),
actions: [
IconButton(
onPressed: () {},
icon: Icon(Icons.search),
color: Color(0xFF323232),
),
],
),
// bottomNavigationBar: BottomNavBarWidget(),
body: Container(
child: Column(children: [
Container(
height: 90,
child: Padding(
padding:
const EdgeInsets.only(top: 5, bottom: 5, left: 1, right: 1),
child: Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context, index) {
return categoryItemsTabs(index);
},
itemCount: 5,
)),
),
),
Container(
child: ListView.builder(
primary: false,
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (context, index) {
return cartItems(index);
},
itemCount: 3,
),
)
]),
),
);
}
//==================================================
categoryItemsTabs(int index) {
return Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 3),
height: 40,
width: 120,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/broccoli-in-a-pile-royalty-free-image-593310638-1564523257.jpg"),
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.4), BlendMode.darken)),
borderRadius: BorderRadius.circular(15)),
),
Container(
alignment: Alignment.center,
child: Text(
"Organic",
style: TextStyle(
color: Colors.white, fontSize: 15, fontWeight: FontWeight.bold),
),
),
],
);
}
cartItems(int index) {
return Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey[300],
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Container(
width: 80,
height: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(
"https://economictimes.indiatimes.com/thumb/height-450,width-600,imgsize-111140,msid-72862126/potato-getty.jpg?from=mdr"),
fit: BoxFit.cover)),
),
Padding(
padding: const EdgeInsets.only(left: 15, top: 15),
child: Row(
children: [
Container(
width: 160,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"potato",
style: TextStyle(
fontSize: 25,
),
overflow: TextOverflow.ellipsis,
),
SizedBox(
height: 5,
),
Text(
"malayalam name",
style: TextStyle(fontSize: 20),
overflow: TextOverflow.ellipsis,
),
SizedBox(
height: 5,
),
Column(
children: [
Text("price"),
],
)
],
),
),
],
),
),
Row(
children: [
Column(
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(05)),
height: 20,
child: DropdownButton<String>(
icon: Icon(Icons.keyboard_arrow_down),
underline: SizedBox(),
hint: Text("choose"),
items: ['1 Kg', '2Kg'].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (_) {},
),
),
SizedBox(
height: 50,
),
Row(
children: [
Container(
height: 20,
width: 70,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
color: Colors.blue,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CartScreen()),
);
},
child: Text(
" Add",
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w800),
),
),
)
],
)
],
),
],
)
],
),
),
),
)
],
);
}
}

Just add physics: ClampingScrollPhysics(), in your ListView.builder properties.
Example:
Container(
child: ListView.builder(
primary: false,
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemBuilder: (context, index) {
return cartItems(index);
},
itemCount: 3,
),
)

You can do it using SingleChildScrollView :
for horizontal scrolling
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [],
),
),
for vertical scrolling
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: [],
),
),

return Scaffold(
appBar: AppBar(....),
body: Container(
child: Column(children: [
Container(
height: 90,
width: MediaQuery.of(context).size.width,
child: Padding(
padding:
const EdgeInsets.only(top: 5, bottom: 5, left: 1, right: 1),
child: Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return categoryItemsTabs(index);
},
itemCount: 5,
),
),
),
),
Expanded(
child: Container(
child: ListView.builder(
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return cartItems(index);
},
itemCount: 3,
),
),
)
]),
),
);

Stack with image & Textfield flutter

I have this design where the images i provide autoscroll everytime,it's working fine,but when i try to overlap with the textfield so the textfield should be in between of the image as Stacked ,i tried with stack,but the textfield doesn't move to top,there is the Screenshot what i am getting,please help me on this
This is what i am getting
Code
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
Column(
children: <Widget>[
Container(
height: 180,
width: double.infinity,
child: Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.asset(
'assets/images/banner1.jpeg',
width: double.infinity,
fit: BoxFit.fitWidth,
);
},
itemCount: 3,
pagination: new SwiperPagination(
margin: new EdgeInsets.only(right: 200, bottom: 20)),
control: new SwiperControl(),
autoplay: true,
),
),
Padding(
padding: EdgeInsets.only(top: 0, left: 30, right: 30),
child: TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.search),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.orangeAccent[200], width: 4.0),
borderRadius: const BorderRadius.all(
const Radius.circular(30.0),
),
),
),
),
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
height: 110,
width: size.width,
child: ListView.builder(
shrinkWrap: true,
itemCount: 10,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
width: 100,
height: 100,
color: Colors.yellow,
),
);
},
),
),
],
),
),
],
),
],
),
),
),
);

Currently, TextField is inside COlumn that's why it appears below the image, you have to remove that code and add in stack list,
Example:
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Stack(
children: <Widget>[
Column(
children: <Widget>[
Container(
height: 180,
width: double.infinity,
child: new Image.asset(
'assets/images/image.jpg',
width: double.infinity,
fit: BoxFit.fitWidth,
),
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
height: 110,
width: 40,
child: ListView.builder(
shrinkWrap: true,
itemCount: 10,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
width: 100,
height: 100,
color: Colors.yellow,
),
);
},
),
),
],
),
),
],
),
Padding(
padding: EdgeInsets.only(left: 30, right: 30, top: 150),
child: TextField(
decoration: InputDecoration(
prefixIcon: Icon(Icons.search),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.orangeAccent[200], width: 4.0),
borderRadius: const BorderRadius.all(
const Radius.circular(30.0),
),
),
),
),
),
],
),
),
),
);