Why every time I add a ListView to my Column all widgets disappear? - flutter

I'm making a Flutter Web App and I have something like this
class _HomeViewState extends State<HomeView> {
#override
Widget build(BuildContext context) {
var posts = Provider.of<List<Post>>(context);
List<int> l =[1,2,3,4];
return Scaffold(
backgroundColor: Colors.white,
appBar: TheAppBaar,
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(child: Padding(
padding: EdgeInsets.all(20.0),
child: Column(
children: [
CreatePost(connUserUid: widget.user.uid, connUserImage:
userFetched.get('profileImage').toString(),
connUserFullname: userFetched.get('fullName').toString(),),
SizedBox(height: 10,),
ListView.separated(itemBuilder: (BuildContext context, int
index) {
return Container(
height: 150,
child: Text('${l[index]}'),
);
},
separatorBuilder:
(BuildContext context, int index) => Divider(),
itemCount: l.length)
],
),
),
),
),
);
}
}
Every time I want to display a ListView with those posts fetched or anything, the method Create Post and that Sized Box disappear and the list is not displayed either.
#override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.center,
child: Container(
width: 400,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10)),
boxShadow: [BoxShadow(
color:kPrimaryColor.withOpacity(0.2),
spreadRadius: 2,
blurRadius: 3,
offset: Offset(0,3)
)]
),
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align(
alignment: Alignment.center,
child: Container(
height: 50,
child: Image.network(widget.connUserImage),
),
),
Align(
alignment: Alignment.center,
child: Container(width: 30,child: Divider(
color: kPrimaryColor,
thickness: 2,
),),
),
SizedBox(height: 8,),
TextField(
maxLines: 5,
decoration: InputDecoration(
errorText: errorTextMessage,
border: OutlineInputBorder(
borderSide: BorderSide(color: kPrimaryColor)
),
labelText: 'Yadda, Yadda, Yadda...'
),
onChanged: (String value) {
setState(() {
postDescription = value;
errorTextMessage = null;
spinner = false;
});
},
),
SizedBox(height: 12,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
IconButton(
icon: Icon(Icons.add_a_photo_rounded, color: Color
(0xFFE53E00),
size:
25,),
onPressed: () {
imagePicker();
},
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: imageInfo == null ? Container() : Text(imageInfo.fileName),
)
],
),
Icon(Icons.pin_drop_rounded, color: Color(0xFF0077e5),
size:
25,),
Icon(Icons.map_rounded, color: Color(0xFF26c118),
size: 25,),
spinner? Padding(
padding: EdgeInsets.all(15.0),
child: CircularProgressIndicator(backgroundColor: kPrimaryColor,),
) :
IconButton(icon:
Icon(Icons
.arrow_forward_ios_outlined,
color:
kPrimaryColor,size: 25,), onPressed: () {
},),
],
)
],
),
),
),
);
}
This is the CreatePost method, just a " card ",
If I make a ListView all disappear, but if in my Column from the first code, I add 1 PostView by 1, they are displayed. I don't understand what's wrong. Should I remove those Align or I don't know. In my console I do not have any errors.
Thank you in advance!

Related

Flutter: RenderFlex children have non-zero flex but incoming height constraints are unbounded. Using Expandable listview

I want to design this layout:
I am using a expandable listview inside a column. I was add ListView.builder inside Expanded but still problem continue.
What is the wrong?
This is my code:
Parent page:
class LearningCoursePage extends StatefulWidget {
String courseId;
LearningCoursePage({Key? key, required this.courseId}) : super(key: key);
#override
State<LearningCoursePage> createState() => _LearningCoursePageState();
}
class _LearningCoursePageState extends State<LearningCoursePage> {
CourseModel? courseModel;
Future<void> _loadResource() async {
courseModel = await Get.find<CourseController>().getCourseById(widget.courseId);
}
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: _loadResource(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
backgroundColor: AppColors.yellowColor,
title: courseModel != null ? Text(courseModel!.name.toString()) : Text("Loading..."),
leading: IconButton(
icon: Icon(Icons.close),
onPressed: () {},
),
),
body: GetBuilder<AuthController>(builder: (authController) {
return authController.userLoggedIn() ? Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(Dimensions.radius20),
boxShadow: [
BoxShadow(
color: Color(0xFFe8e8e8),
blurRadius: 5.0,
offset: Offset(0, 5)
),
BoxShadow(
color: Colors.white,
offset: Offset(-5, 0)
),
BoxShadow(
color: Colors.white,
offset: Offset(5, 0)
),
]
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(height: 40,),
BigText(text: "Vui lòng đăng nhập để xác minh tài khoản"),
SizedBox(height: 20,),
SizedBox(height: 20,),
GestureDetector(
onTap: (){
Get.toNamed(RouteHelper.getSignInPage());
},
child: Container(
width: Dimensions.screenWidth/2,
height: Dimensions.screenHeight/13,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(Dimensions.radius15),
color: AppColors.yellowColor
),
child: Center(
child: BigText(
text: "ĐĂNG NHẬP",
size: Dimensions.font20+Dimensions.font20/2,
color: Colors.white,
),
),
),
),
SizedBox(height: 40,),
],
),
),
) :
SingleChildScrollView(
child: Container(
child: Column(
children: [
Container(
height: 400,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage("assets/image/test.jpg")
)
),
),
Container(
width: double.infinity,
color: AppColors.mainBlackColor,
child: Container(
margin: EdgeInsets.only(left: Dimensions.width20, right: Dimensions.width20),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 30,),
BigText(text: (courseModel != null ? courseModel!.name.toString().toUpperCase() : "Loading..."), size: 20, color: AppColors.whiteColor,),
SizedBox(height: 30,),
BigText(text: "Bạn hoàn thành 3 trong 59 bài giảng", size: 16, color: AppColors.whiteColor,),
SizedBox(height: 30,),
LinearPercentIndicator(
animation: true,
animationDuration: 1000,
lineHeight: 40.0,
backgroundColor: Colors.white,
percent: 0.2,
padding: EdgeInsets.only(right: 0),
center: Text("20.0%"),
trailing: Container(
color: AppColors.yellowColor,
padding: EdgeInsets.only(left: 10, right: 10),
alignment: Alignment.center,
height: 40,
child: SmallText(text: "hoàn thành", size: 16, color: AppColors.whiteColor,),
),
linearStrokeCap: LinearStrokeCap.butt,
progressColor: AppColors.yellowColor,
),
SizedBox(height: 30,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SelectButtonWidget(text: 'Vào học ngay', isSelect: true, width: Dimensions.screenWidth/2.5,),
SelectButtonWidget(text: 'Hướng dẫn học', width: Dimensions.screenWidth/2.5,),
],
),
SizedBox(height: 30,),
SelectButtonWidget(text: 'Xem mẫu chứng chỉ hoàn thành',),
SizedBox(height: 60,),
],
),
)
),
Container(
width: double.infinity,
color: AppColors.greyColor,
child: Container(
margin: EdgeInsets.only(left: Dimensions.width20, right: Dimensions.width20),
child: Column(
children: [
SizedBox(height: 30,),
LearningCourseBody(courseModel: courseModel,)
],
),
),
)
],
),
),
);
}),
);
},
);
}
}
The body page (cluster layout with gray background color):
class LearningCourseBody extends StatefulWidget {
CourseModel? courseModel;
LearningCourseBody({Key? key, this.courseModel}) : super(key: key);
#override
State<LearningCourseBody> createState() => _LearningCourseBodyState();
}
class _LearningCourseBodyState extends State<LearningCourseBody> {
#override
Widget build(BuildContext context) {
return Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SelectButtonWidget(text: 'Tổng quan', isSelect: true, width: Dimensions.screenWidth/3.5,),
SelectButtonWidget(text: 'Bài học', textColor: AppColors.mainBlackColor, width: Dimensions.screenWidth/3.5,),
SelectButtonWidget(text: 'Tài liệu', textColor: AppColors.mainBlackColor, width: Dimensions.screenWidth/3.5,),
],
),
SizedBox(height: 30,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(width: 5,),
SelectButtonWidget(text: 'Hỏi & đáp', textColor: AppColors.mainBlackColor, width: Dimensions.screenWidth/3.5,),
SizedBox(width: 5,),
SelectButtonWidget(text: 'Ghi chép', textColor: AppColors.mainBlackColor, width: Dimensions.screenWidth/3.5,),
SizedBox(width: 5,),
],
),
SizedBox(height: 60,),
// OverviewCourse(courseModel: widget.courseModel, rating: 5,)
(widget.courseModel != null && widget.courseModel!.particalsCourse != null) ? Expanded(child: ExpandableListViewWidget(courseModel: widget.courseModel!,)) : Text('Loading....'),
],
);
}
}
And this is the expandable lisview:
class ExpandableListViewWidget extends StatefulWidget {
CourseModel courseModel;
ExpandableListViewWidget({Key? key, required this.courseModel}) : super(key: key);
#override
State<ExpandableListViewWidget> createState() => _ExpandableListViewWidgetState();
}
class _ExpandableListViewWidgetState extends State<ExpandableListViewWidget> {
List<Widget> _buildExpandList(int index) {
List<Widget> res = [];
if (widget.courseModel.particalsCourse![index].lessons == null) return res;
for (var sub in widget.courseModel.particalsCourse![index].lessons!) {
var s = ListTile(
title: Text(sub.title!),
leading: Icon(Icons.play_circle),
trailing: sub.isTrial! ? SmallText(text: 'học thử', color: AppColors.yellowColor,) : Text(sub.timeLearning!.toString()),
);
res.add(s);
}
return res;
}
#override
Widget build(BuildContext context) {
List<bool> tileExpanded = List<bool>.generate(widget.courseModel.particalsCourse!.length, (index) => false);
return ListView.builder(
itemCount: widget.courseModel.particalsCourse!.length,
itemBuilder: (context, index) {
return Container(
child: ExpansionTile(
title: Text(widget.courseModel.particalsCourse![index].title!),
controlAffinity: ListTileControlAffinity.leading,
leading: Icon(
tileExpanded[index] ? Icons.arrow_drop_up : Icons.arrow_drop_down
),
children: _buildExpandList(index),
onExpansionChanged: (bool expanded) {
setState(() => tileExpanded[index] = expanded);
},
),
);
}
);
}
}
Hope your help? Thanks!!!
Finally, I was resolve this problem. This is my step:
Step 1: Column use mainAxisSize: MainAxisSize.min
Step 2: Change Expanded to Flexible
Step 3: Adding this two lines in ExpandableListViewWidget
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
...

flutter: GridView not showing properly

i'm trying to create a restaurant menu app in flutter language, and i wanted to view my saved data inside json file as gridView but sadly i'm getting error while running the app.. However, i tried to change the gridView to listView and its showing good..
so is there a way to show them as gridView?
thanks in advance
[
{
"placeImage": "assets/images/wood.jpg",
"placeName": "The Hawkers",
"placeItems": ["Burgers","Chinese","Fast Food","Italian","Juice"],
"minOrder": 20
},
{
"placeImage": "assets/images/wood.jpg",
"placeName": "Flipping Noodles",
"placeItems": ["Burgers","Chinese","Fast Food","Italian","Juice"],
"minOrder": 50
},
{
"placeImage": "assets/images/wood.jpg",
"placeName": "Pizza Hut",
"placeItems": ["Pizza","Chinese","Fast Food","Italian","Juice"],
"minOrder": 20
},
{
"placeImage": "assets/images/wood.jpg",
"placeName": "Blue Hill",
"placeItems": ["Burgers","Chinese","Fast Food","Italian","Juice"],
"minOrder": 40
},
{
"placeImage": "imagess/bluehill.jpg",
"placeName": "Blue Hill",
"placeItems": ["Burgers","Chinese","Fast Food","Italian","Juice"],
"minOrder": 40
}
]
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
void main() => runApp(Breakfast());
class Breakfast extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
var bannerItems = ["Burger", "Cheese Chilly", "Noodles", "Pizza"];
var bannerImage = [
"images/burger.jpg",
"images/cheesechilly.jpg",
"images/noodles.jpg",
"images/pizza.jpg"
];
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
var screenHeight = MediaQuery.of(context).size.height;
var screenWidth = MediaQuery.of(context).size.width;
Future<List<Widget>> createList() async {
List<Widget> items = new List<Widget>();
String dataString =
await DefaultAssetBundle.of(context).loadString("assets/data.json");
List<dynamic> dataJSON = jsonDecode(dataString);
dataJSON.forEach((object) {
String finalString = "";
List<dynamic> dataList = object["placeItems"];
dataList.forEach((item) {
finalString = finalString + item + " | ";
});
items.add(Padding(
padding: EdgeInsets.all(2.0),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0)),
boxShadow: [
BoxShadow(
color: Colors.black12,
spreadRadius: 2.0,
blurRadius: 5.0),
]),
margin: EdgeInsets.all(5.0),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0)),
child: Image.asset(
object["placeImage"],
width: 80,
height: 80,
fit: BoxFit.cover,
),
),
SizedBox(
width: 250,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(object["placeName"]),
Padding(
padding: const EdgeInsets.only(top: 2.0, bottom: 2.0),
child: Text(
finalString,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12.0,
color: Colors.black54,
),
maxLines: 1,
),
),
Text(
"Min. Order: ${object["minOrder"]}",
style:
TextStyle(fontSize: 12.0, color: Colors.black54),
)
],
),
),
)
],
),
),
));
});
return items;
}
return Scaffold(
body: Container(
height: screenHeight,
width: screenWidth,
child: SafeArea(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(10, 5, 10, 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(icon: Icon(Icons.menu), onPressed: () {}),
Text(
"Foodies",
style: TextStyle(fontSize: 50, fontFamily: "Samantha"),
),
IconButton(icon: Icon(Icons.person), onPressed: () {})
],
),
),
BannerWidgetArea(),
Container(
child: FutureBuilder(
initialData: <Widget>[Text("")],
future: createList(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Padding(
padding: EdgeInsets.all(8.0),
child: GridView.count(
crossAxisCount: 3,
crossAxisSpacing: 4.0,
mainAxisSpacing: 2.0,
children: snapshot.data,
),
);
} else {
return CircularProgressIndicator();
}
}),
)
],
),
)),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.black,
child: Icon(
MdiIcons.food,
color: Colors.white,
)),
);
}
}
class BannerWidgetArea extends StatelessWidget {
#override
Widget build(BuildContext context) {
var screenWidth = MediaQuery.of(context).size.width;
PageController controller =
PageController(viewportFraction: 0.8, initialPage: 1);
List<Widget> banners = new List<Widget>();
for (int x = 0; x < bannerItems.length; x++) {
var bannerView = Padding(
padding: EdgeInsets.all(10.0),
child: Container(
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
boxShadow: [
BoxShadow(
color: Colors.black38,
offset: Offset(2.0, 2.0),
blurRadius: 5.0,
spreadRadius: 1.0)
]),
),
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
child: Image.asset(
bannerImage[x],
fit: BoxFit.cover,
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0)),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.transparent, Colors.black])),
),
Padding(
padding: EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
bannerItems[x],
style: TextStyle(fontSize: 25.0, color: Colors.white),
),
Text(
"More than 40% Off",
style: TextStyle(fontSize: 12.0, color: Colors.white),
)
],
),
)
],
),
),
);
banners.add(bannerView);
}
return Container(
width: screenWidth,
height: screenWidth * 9 / 16,
child: PageView(
controller: controller,
scrollDirection: Axis.horizontal,
children: banners,
),
);
}
}
Firstly I would prefer having data from Future instead of <Widget> and will avoid forEach method to handle complex and bigger computation.
Lets processed with current condition of code-structure. According to your question, main issue is using ListView/GridView.
While SingleChildScrollView is handling the scroll, use GridView.count or ListView
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
About the top level-column
body: SafeArea(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min, // set min
children: <Widget>[
To check error, define states of FutureBuilder
child: FutureBuilder<List<Widget>>(
initialData: [Text("")],
future: createList(context),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting)
return Text("Loading");
if (snapshot.hasError) {
return Text("Error ${snapshot.error}");
}
if (snapshot.hasData) {
return Padding(
padding: EdgeInsets.all(8.0),
child: GridView.count(
childAspectRatio: 1 // items' width/height
crossAxisCount: 3,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
children: [
...snapshot.data!,
],
),
To load JSON, I've used like String dataString = await rootBundle.loadString("json/data.json");
To handle item size use childAspectRatio.
Assuming you don't have issue with loading images/BannerWidgetArea() widgets.
Does it solve the issue?

Flutter UI List Item

I am using the below code but not able to achieve the desired result, I am new to the flutter world so let me know where to improve to get the desired result. Here is the source code of what I have done.
return Expanded(
child: GridView.builder(
controller: _scrollController,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemCount: albumList.length,
itemBuilder: (BuildContext context, int index) {
return buildRow(index);
},
),
);
Widget buildRow(int index) {
return AlbumTile(
index: index,
albumList: albumList,
deleteAlbum: _deleteAlbum,
);
}
This the Album Tile
class AlbumTile extends StatelessWidget {
AlbumTile(
{Key key,
#required this.index,
#required this.albumList,
#required this.deleteAlbum})
: super(key: key);
final int index;
final List<Album> albumList;
final Function deleteAlbum;
#override
build(BuildContext context) {
String thumb;
if (albumList.elementAt(index).thumbUrl != "") {
thumb = WEBSERVICE_IMAGES +
albumList.elementAt(index).userId.toString() +
'/' +
albumList.elementAt(index).id.toString() +
'/' +
albumList.elementAt(index).thumbUrl;
} else {
thumb = "https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__340.jpg";
}
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
new AlbumPage(tabIndex: index, albumList: albumList),
),
);
},
child: Container(
// height of the card which contains full item
height: MediaQuery.of(context).size.height * 0.4,
width: MediaQuery.of(context).size.width * 0.28,
// this is the background image code
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
// url is my own public image url
image: NetworkImage(thumb),
),
borderRadius: BorderRadius.circular(12.0)),
// this is the item which is at the bottom
child: Align(
// aligment is required for this
alignment: Alignment.bottomLeft,
// items height should be there, else it will take whole height
// of the parent container
child: Container(
padding: EdgeInsets.only(left: 10.0, right: 0.0),
height: MediaQuery.of(context).size.height * 0.1,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Text() using hard coded text right now
Text(albumList.elementAt(index).name,
style: TextStyle(
fontSize: 18.5,
color: Colors.white,
fontWeight: FontWeight.w500)),
SizedBox(height: 3.0),
Text(albumList.elementAt(index).photos.toString() +' photos',
style: TextStyle(
fontSize: 12.5,
color: Colors.white,
fontWeight: FontWeight.w500))
],
),
),
// pop-up item
PopupMenuButton(
icon: Icon(Icons.more_vert, color: Colors.white),
itemBuilder: (_) => <PopupMenuItem<String>>[
new PopupMenuItem<String>(
child: Row(
children: <Widget>[
Icon(Icons.delete),
Text(
'Delete Album',
),
],
),
value: 'Delete',
),
],
onSelected: (value) {
deleteAlbum(albumList.elementAt(index).id, index);
},
),
],
),
),
),
),
);
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
new AlbumPage(tabIndex: index, albumList: albumList),
),
);
},
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Stack(
fit: StackFit.loose,
children: <Widget>[
ClipRRect(
borderRadius: new BorderRadius.circular(8.0),
child: FadeInImage.assetNetwork(
height: 1000,
placeholder: kPlaceHolderImage,
image: thumb,
fit: BoxFit.cover,
),
),
Align(
alignment: Alignment.bottomLeft,
child: Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 0, 0, 0),
child: Text(
albumList.elementAt(index).name,
style: TextStyle(
color: Colors.white,
fontSize: 18.5,
),
textAlign: TextAlign.left,
),
),
),
PopupMenuButton(
icon: ImageIcon(
AssetImage("graphics/horizontal_dots.png"),
color: Colors.white,
),
itemBuilder: (_) => <PopupMenuItem<String>>[
new PopupMenuItem<String>(
child: Row(
children: <Widget>[
Icon(Icons.delete),
Text(
'Delete Album',
),
],
),
value: 'Delete',
),
],
onSelected: (value) {
deleteAlbum(albumList.elementAt(index).id, index);
}),
],
),
),
],
),
),
);
}
}
Thank you in advance.
Welcome to the flutter. Amazing platform to start you career on building cross-platform mobile applications.
My code will look a bit different to you, but trust me, this will work out for you.
Please note: You need to change some parts, like changing the image url for NetworkImage(), onTap function, Text() content etc. But not much changes in the Whole Widget code. So please look for those, and make changes accordingly. You will get there :)
GestureDetector(
onTap: () => print('Works!'), // <-- onTap change, I have used print()
child: Container(
// height of the card which contains full item
height: MediaQuery.of(context).size.height * 0.4,
width: MediaQuery.of(context).size.width * 0.28,
// this is the background image code
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
// url is my own public image url
image: NetworkImage('https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__340.jpg')
),
borderRadius: BorderRadius.circular(12.0)
),
// this is the item which is at the bottom
child: Align(
// aligment is required for this
alignment: Alignment.bottomLeft,
// items height should be there, else it will take whole height
// of the parent container
child: Container(
padding: EdgeInsets.only(left: 10.0, right: 0.0),
height: MediaQuery.of(context).size.height * 0.1,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Text() using hard coded text right now
Text('Potraits', style: TextStyle(fontSize: 20.0, color: Colors.white, fontWeight: FontWeight.w500)),
SizedBox(height: 3.0),
Text('150 photos', style: TextStyle(fontSize: 17.0, color: Colors.white, fontWeight: FontWeight.w500))
]
)
),
// pop-up item
PopupMenuButton(
icon: Icon(Icons.more_vert, color: Colors.white),
itemBuilder: (_) => <PopupMenuItem<String>>[
new PopupMenuItem<String>(
child: Row(
children: <Widget>[
Icon(Icons.delete),
Text(
'Delete Album',
),
],
),
value: 'Delete',
),
],
onSelected: (value) {
//your function
}
)
]
)
)
)
)
)
Result
EDITS FOR WHOLE UI
So, the change required is in your buildRow Widget. You just need to give some paddings on your sides, and you are pretty much solid. Let me know
Widget buildRow(int index) {
return Padding(
padding: EdgeInsets.all(10.0),
child: AlbumTile(
index: index,
albumList: albumList,
deleteAlbum: _deleteAlbum,
)
);
}
And if you are unsatisfied with the spacings, just keep playing with the EdgeInsets painting class. I hope that helps. Please let me know. :)

how to execute the API when the textfield is filled BLOC FLUTTER?

how to execute the API when the textfield is filled. so when the textfield is filled it starts executing the API.
I've tried making a check function that works if the textfield is not null then I can only start the API execution. in the following ways:
in the block I make a check function to check whether the textfield (_prefix) is filled or not but this function is an error when called in inStState in the UI section.
BLOC :
class DenomPulsaBloc {
final _repository = EresidenceRepository();
final _prefix = BehaviorSubject<String>();
SharedPreferences sPrefs;
final BehaviorSubject<List<Payload>> _subject = BehaviorSubject<List<Payload>>();
Function(String) get prefix => _prefix.sink.add;
cek() async{
if(_prefix.value.length >= 3) {
denomPulsa();
}else{
print("GAGAL");
}
}
denomPulsa() async{
try{
sPrefs = await SharedPreferences.getInstance();
ListPulsaResponses responses = await _repository.listDenomPulsa(sPrefs.getString("userid"), sPrefs.getString("password"), sPrefs.getString("imei"),
sPrefs.getString("coordinate"), sPrefs.getString("bit61"), sPrefs.getString("bit62"), _prefix.value);
List<Payload> list = responses.data.payload;
_subject.sink.add(list);
print(list);
}catch(e){
print(e.toString());
_subject.sink.add(e);
}
}
dispose(){
_subject.close();
_prefix.close();
}
BehaviorSubject<List<Payload>> get subject => _subject;
}
UI :
class _PulsaPageState extends State<PulsaPage> {
DenomPulsaBloc denomPulsaBloc;
int selectedCard = -1;
#override
void initState() {
super.initState();
denomPulsaBloc = DenomPulsaBloc();
denomPulsaBloc.cek();
}
#override
void dispose() {
denomPulsaBloc.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 2,
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.white,
brightness: Brightness.light,
elevation: 0.0,
leading: InkWell(
onTap: () {
Navigator.of(context).pop();
},
child: Icon(
Icons.arrow_back_ios,
color: Colors.black,
size: SizeConfig.texIconSize,
),
),
),
body: SafeArea(
child: Container(
height: SizeConfig.screenHeight,
width: SizeConfig.screenWidth,
padding: EdgeInsets.symmetric(horizontal: SizeConfig.widthMultiplier * 4),
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
child: Text(
'Pulsa',
style: AppTheme.styleSubTitleBoldLarge,
)
),
Container(
margin: EdgeInsets.only(top: SizeConfig.heightMultiplier * 4),
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(blurRadius: 5.0, color: Colors.black12)
]
),
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Container(
padding: EdgeInsets.all(SizeConfig.heightMultiplier * 2),
color: Colors.white,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 1,
child:
Container(
child: Icon(Icons.phone_android, color: Colors.green, size: SizeConfig.texIconSize,),
),
),
Expanded(
flex: 9,
child: Container(
margin: EdgeInsets.only(left: SizeConfig.widthMultiplier * 3),
child:Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text(
'Number',
style: AppTheme.styleSubTitle,
),
),
Container(
child: Stack(children: <Widget>[
Container(
height: SizeConfig.heightMultiplier * 5.5,
child: TextFormField(
inputFormatters: [
new LengthLimitingTextInputFormatter(13)
],
style: AppTheme.styleSubTitleBlackSmall,
decoration: const InputDecoration(
hintText: '090900909'
),
onChanged: denomPulsaBloc.prefix,
),
),
Align(
alignment: Alignment.centerRight,
child: Container(
alignment: Alignment.centerRight,
height: SizeConfig.texIconSize,
width: SizeConfig.texIconSize,
margin: EdgeInsets.only(right: SizeConfig.widthMultiplier * 9, top: SizeConfig.heightMultiplier * 1.5),
child: Image.asset(
"res/images/xl.png",
fit: BoxFit.fill,
)
),
),
Align(
alignment: Alignment.centerRight,
child: Container(
margin: EdgeInsets.only(top: SizeConfig.heightMultiplier * 1.5),
child: InkWell(
onTap: (){},
child: Icon(
Icons.close,
size: SizeConfig.texIconSize,
),
)
)
)
]),
),
]
),
)
),
],
),
),
),
),
Expanded(
child: Container(
width: SizeConfig.screenWidth,
height: SizeConfig.screenHeight,
child: StreamBuilder(
stream: denomPulsaBloc.subject,
builder: (context, AsyncSnapshot<List<Payload>> snapshot) {
if (snapshot.hasData) {
// print(snapshot.data);
return listDenomPulsa(snapshot);
}else{
Error();
}
return Container();
},
),
),
),
],
),
),
),
),
),
);
}

Updating single item on a Listview.builder widget in Flutter

so I have a list of users that is in a Listview.builder widget but my issue is that when I try to update one item on the list all the other items update as well.
I have a button that shows "Add friend" when I click on the button the message should change to "Invited", I have a string variable that holds the message so when I click on the button the string is updated from "Add friend" to "Invited", now when I click on button all the other button values change as well.
Here is my code:
class Friends extends StatefulWidget{
_FriendsState createState() => _FriendsState();
}
class _FriendsState extends State<Friends>{
List<String> nameList = [];
String btnText;
#override
Widget build(BuildContext context) {
bool showFriendList = false;
return Scaffold(
appBar: AppBar(
title: Text('Friends'),
actions: <Widget>[
IconButton(
onPressed: (){
},
icon: Icon(Icons.check, color: Colors.white,),
)
],
),
body:
Padding(
padding: EdgeInsets.all(10),
child: ListView(
children: <Widget>[
showFriendList? Column(
children: <Widget>[
Text('Find friends to add. Once they accept you can invite them to your challenge.', style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),),
SizedBox(height: 45,),
Container(
width: MediaQuery.of(context).size.width,
child: RaisedButton(
child: Text('GO AND FIND FRIENDS', style: TextStyle(fontWeight: FontWeight.w500, fontSize: 14, color: Colors.white)),
onPressed: (){
setState(() {
showFriendList != showFriendList;
});
},
color: Theme.of(context).accentColor,
shape: RoundedRectangleBorder(side: BorderSide(color: Theme.of(context).accentColor),borderRadius: BorderRadius.circular(14)),
),
)
],
): Container(
height: MediaQuery.of(context).size.height,
child:friends(context) ,
)
],
) ,
)
);
}
Widget friends(BuildContext context){
return
ListView(
children: <Widget>[
Container(
margin: EdgeInsets.all(8),
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white
),
child: TextField(
decoration:InputDecoration(
hintText: 'Enter User\'s name',
border: InputBorder.none,),
),
),
/* noRequest== true? SizedBox(height: 0,):friendRequest(context),
noRequest== true? SizedBox(height: 0,): Container(
margin: EdgeInsets.all(10),
height: 60,
child: Column(mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.start,
children: <Widget>[Text('Your friends', style: TextStyle(fontSize: 16, color: Theme.of(context).textSelectionColor,)) ],),
),*/
Container(
height: 0.5,
color: Colors.grey,
),
ListView.builder(
shrinkWrap: true,
itemCount: users.length,
itemBuilder: (BuildContext context, int index){
return
Container(
padding: EdgeInsets.only(left: 6),
height:80 ,
child:
Column(
children: <Widget>[
Row(
children: <Widget>[
users[index].profileUrl != null? CircleAvatar(child: Image.asset(users[index].profileUrl),): Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: Colors.white70,
shape: BoxShape.circle,
image: DecorationImage(
image:AssetImage('assets/plus.png') //NetworkImage(renderUrl ??'assets/img.png')
)
),
),
SizedBox(width: 30,),
Expanded(
flex: 1,
child:
Container(
child:
Row(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 12,),
users[index].fullName != null? Text( users[index].fullName, style: TextStyle(fontSize: 18)): Text('Anjelika Thompson', style: TextStyle(fontSize: 18),),
SizedBox(height: 12,),
Row(
//crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(child: Icon(Icons.location_on),alignment: Alignment.topLeft,),
SizedBox(width: 10,),
users[index].distance_KM.toString() != null ? Text( users[index].distance_KM.toString()):Text('48.7 km')
]),
],
),
],
)
),
),
SizedBox(width: 0,),
//Icon(Icons.check,color: Colors.red,size: 40,)
FlatButton(
child: Text(btnText==null? 'ADD FRIEND': btnText, style: TextStyle(color: Color(0xff7667e5)),),
onPressed: () {
nameList.add(users[index].fullName);
setState(() {
btnText = 'INVITED';
});
},
)
],
),
Container(
height: 0.5,
color: Colors.grey,
)
],
) ,
);
}
// final item = feeds[index];
)
],
);
}
}
From my class, I have a string value called "btnText" that I use to set the new value. but at the moment once I click on one button to change from "Add friend" to "Invited" all other button Text in the listview change as well.
Please I need help figuring out what is the problem
#Chidinma, you can add a check to see if user is in your nameList,
FlatButton(
child: Text(btnText==null || !nameList.contains(users[index].fullName) ? 'ADD FRIEND': btnText, style: TextStyle(color: Color(0xff7667e5)),),
onPressed: () {
nameList.add(users[index].fullName);
setState(() {
btnText = 'INVITED';
});
................
This is just to give you an idea. A better solution would be to create a selected column in users table and save selected state as bool value. If you don't have database then i'd recommend creating indexList like nameList and save the index of invited friends and check to see if index is in the indexList like i've done with the nameList instead.
Method
inviteButtonStateFunction(index){
for (var e in invitedPeopleListIndex) {
if(e == index){
return Text("Invited");
}
}
return Text("Invite");
}
Usage
child: TextButton(
onPressed: () {
if(invitedPeopleListIndex.contains(index)){
invitedPeopleListIndex.remove(index);
}else{
invitedPeopleListIndex.add(index);
}
print(invitedPeopleListIndex);
print(invitedPeopleList);
},
child: inviteButtonStateFunction(index), // Show the text here
)