I have started playing around with Flutter Swiper (https://pub.dev/packages/flutter_swiper) and so far it is very powerful!
The only thing I can't make it do is overlay the text on the image. Here is my code with the text displayed below the image:
new Swiper(
outer: false,
itemBuilder: (BuildContext context, int index) {
return new Column(
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Container(
child: new Container(
child: new Image.asset(dateIdeas[index]),
),
),
new Text(
"test",
textAlign: TextAlign.start,
),
],
),
],
);
},
itemCount: dateIdeas.length,
layout: SwiperLayout.DEFAULT,
itemHeight: 800,
itemWidth: 400,
),
This displays the word "Test" below the image, and the text moves as the image is swiped. However I cannot make the text overlay on the image. I have tried adding padding and increasing the "bottom" value to shift the text up but it does not move. Annoyingly it does shift the text left, right and down when asked.
Does anyone have any idea on how to do this?
Use a Stack
Swiper(
outer: false,
itemBuilder: (BuildContext context, int index) {
return new Column(
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Stack(
children: <Widget>[
new Container(
child: new Image.asset(dateIdeas[index]),
),
new Text(
"test",
textAlign: TextAlign.start,
),
],
)
],
),
],
);
},
// itemCount: dateIdeas.length,
// layout: SwiperLayout.DEFAULT,
itemHeight: 800,
itemWidth: 400,
);
Related
Good day.
I am trying to build a UI where the widget tree is like Row -> children(Column, List). The problem is I want my column to take the same height as the List. It is not happening. I am including screenshots and my code here. Any kind of help is appreciable
You can see that the column on the left is not taking all the space and space between the time and expanding more icons is not working either.
I am including my code here.
class CollapsibleAgendaList extends StatelessWidget {
#override
Widget build(BuildContext context) {
final SessionListCubit cubit = context.read<SessionListCubit>();
return ListView.separated(
itemBuilder: (context, index) {
return Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: GestureDetector(
onTap: () {
print('Tapped on time section. ');
},
child: Padding(
padding: EdgeInsets.all(8),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('10:30 Am'),
Icon(Icons.expand_more),
],
),
),
),
),
Expanded(
child: ListView.separated(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
print("item builder.");
return CollapsibleAgendaItem(
session: cubit.state.sessions[index], isLiked: true);
},
separatorBuilder: (context, index) {
return const Divider(
color: Colors.grey,
);
},
itemCount: 2),
),
],
);
},
separatorBuilder: (context, index) {
return const Divider(
color: Colors.grey,
);
},
itemCount: 4);
}
}
Edit: I'm going to explain the reason for this problem in my case. Maybe it will help someone in the future. When Flutter builds the child it asks for the required width/height from the parent. But as I used a ListView as a child, it doesn't know the height instantly. So, the Column was taking only the height it needed. But, I experimented that providing a height for the ListView solve the problem. But, In my case, I can't determine the height in runtime, instead, I used a Column like the accepted answer, which solved my problem. In the future, If someone finds a solution with ListView, Please do comment here.
You can top Row with IntrinsicHeight(expensive-widget). Also while you are not using scrollable physics, you can replace listVIew with Column
return ListView.separated(
itemBuilder: (context, index) {
return IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ColoredBox(
color: Colors.red,
child: GestureDetector(
onTap: () {
print('Tapped on time section. ');
},
child: Padding(
padding: EdgeInsets.all(8),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('10:30 Am'),
Icon(Icons.expand_more),
],
),
),
),
),
Column(
children: List.generate(2, (index) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 200,
),
const Divider(
color: Colors.grey,
),
],
);
}),
),
],
),
);
},
separatorBuilder: (context, index) {
return const Divider(
color: Colors.grey,
);
},
itemCount: 4);
Use mainAxisSize:MainAxisSize.max inside column.
To make the contents of the Row fill the entire height, you need to set crossAxisAlignment: CrossAxisAlignment.stretch, on the Row.
Here is the documentation on CrossAxisAlignment vs MainAxisAlignment.
CrossAxisAlignment.stretch
Stretches children across the cross axis. (Top-to-bottom for Row, left-to-right for Column)
I wanna put two parallel lists inside the row marked in the picture. I've tried different types of structures, but all give me problems.
Each element of the dynamic lists will have a picture and a Text.
Screen
I've been trying to put two sized box inside the row:
Row(children: [
SizedBox(
width: MediaQuery.of(context).size.width * 0.5,
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.5,
),
])
After the width putting the ListView
Everything I try gives me the next error:
error
Please refer to below code
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
ListView.builder(
physics:
NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: 15,
itemBuilder: (BuildContext context,
int index) {
return ListTile(
leading: Icon(
Icons.star_border,
),
title: Text(
'List $index' +
"Lorem ipsum dolor sit amet, ",
),
);
},
),
],
),
),
Flexible(
child: Padding(
padding: EdgeInsets.only(left: 15.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
ListView.builder(
physics:
NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: 15,
itemBuilder: (BuildContext context,
int index) {
return Row(
children: [
Icon(
Icons.star,
),
Text("List item $index"),
],
);
},
),
],
),
),
)
],
),
Try this :
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ListView.builder(
shrinkWrap:true,
builder:(context,index)=> Container(),
),
ListView.builder(
shrinkWrap:true,
builder:(context,index)=> Container(),
),
],
);
I am trying to use this LiquidSwipe.builder or PageView.builder for the page changing, now Im not clear how to achieve the effect that when info in one of this pages is missing, user need to firstly fulfil the info otherwise he can not scroll to next page.. thanks a lot for any clue!
LiquidSwipe.builder(
itemCount: data.length,
itemBuilder: (context, index) {
return Container(
width: double.infinity,
color: data[index].color,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset(
data[index].image,
height: 400,
fit: BoxFit.contain,
),
const Padding(
padding: EdgeInsets.all(20.0),
),
Column(
children: <Widget>[
Text(
data[index].text1,
style: WithPages.style,
),
Text(
data[index].text2,
style: WithPages.style,
),
Text(
data[index].text3,
style: WithPages.style,
),
],
),
],
),
);
},
positionSlideIcon: 0.8,
slideIconWidget: const Icon(Icons.arrow_back_ios),
onPageChangeCallback: pageChangeCallback,
waveType: WaveType.liquidReveal,
liquidController: liquidController,
fullTransitionValue: 880,
enableSideReveal: true,
enableLoop: true,
ignoreUserGestureWhileAnimating: true,
),
I wonder why that doesn't work. Maybe one can help me, I think it's just a small mistake.
I would like to be able to scroll the whole screen. The container with the "CompanyCard" widget can be scrolled vertically.
return Column(
children: <Widget>[
SearchBox(),
Expanded(
child: Stack(
children: <Widget>[
Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: companies.length,
itemBuilder: (context, index) => CompanyCard(),
),
),
],
),
),
SearchBox(),
SearchBox(),
SearchBox(),
],
);
horizontal: Facebook, Google Twitter (already works)
vertical: the whole screen (not working)
Wrap SingleChildScrollView to the widgets you like to scroll
return Column(
children: <Widget>[
SearchBox(),
SingleChildScrollView(
child: Expanded(
child: Stack(
children: <Widget>[
Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: companies.length,
itemBuilder: (context, index) => CompanyCard(),
),
),
],
),
),
),
SearchBox(),
SearchBox(),
SearchBox(),
],
);
New edit:
To make the whole page scrollable, wrap the page in SingleChildScrollView:
Full Code:
return Container(
child: SingleChildScrollView(
child: Expanded(
child: Column(
children: <Widget>[
SearchBox(),
SingleChildScrollView(
child: Expanded(
child: Stack(
children: <Widget>[
Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: companies.length,
itemBuilder: (context, index) =>
CompanyCard(),
),
),
],
),
),
),
SearchBox(),
SearchBox(),
SearchBox(),
],
),
),
),
);
You need to specify an explicit height to your List View. By default a List View has infinite height / width.
To be able to scroll the entire screen, you need to wrap your root widget inside a SingleChildScrollView and then specify a height for the List View container. Somewhat like this :-
body : SingleChildScrollView(child :...
... Other widgets...
Container (
height :200,
width :MediaQuery.of(context).size.width, // so that ListView occupies the entire width
child : ListView.builder(...
I think ListView in Column needs height.
I wrapped ListView with Container and give a some height.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("Home page"),
elevation: 5.0,
),
body: SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
SizedBox(child: Text('asdf')),
Container(
height: 500,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: 3,
itemBuilder: (context, index) =>
SizedBox(width: 200, child: Text('aaa')),
),
),
SizedBox(child: Text('asdf')),
SizedBox(child: Text('asdf')),
SizedBox(child: Text('asdf')),
],
),
),
),
);
}
Hello there i am making a flutter application in which inside ScrollView in need to put Expandable list view.First of all here is my build method.
return Scaffold(
appBar: AppBar(
backgroundColor: app_color,
iconTheme: IconThemeData(
color: Colors.white, //change your color here
)),
//debugShowCheckedModeBanner: false,
//key: scaffoldKey,
backgroundColor: app_color,
body: SingleChildScrollView(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:<Widget>[
Text("Header"),
new ListView.builder(
itemCount: datas.length,
shrinkWrap: true,
itemBuilder: (context, i) {
return new ExpansionTile(
title: new Text(datas[i].title, style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold, fontStyle: FontStyle.italic),),
children: <Widget>[
new Column(
children: _buildExpandableContent(datas[i]),
),
],
);
},
),
Text("Footer"),
],
),
)
)
);
}
Now the problem is that without SingleScrollChidView this works fine But after using SingleScrollChidView it does not shows anything and gives error RenderBox was not laid out.What is wrong here ? How can i use Expandable list view inside Singlechildscroll view in flutter.
I was able to achieve Expanded ListView within ScrollView with text by
- Use of Wrap inside SingleChildScrollView, provided you make all ListView using shrinkWrap: true
SingleChildScrollView(
child: Wrap(
direction: Axis.horizontal,
children: <Widget>[
_textBody, // text body, with 1000+ words
Padding(
padding: const EdgeInsets.all(15.0),
child: Column(
children: <Widget>[
ListViewOne(_genericListDataOne()),
],
),
),
Column(
children: <Widget>[
ListViewTwo(_genericListDataTwo())
],
)
],
),
),
part of the Code for ListViewOne
ListViewOne(
shrinkWrap: true,
padding: new EdgeInsets.symmetric(vertical: 8.0),
children: // build list here,
);
Give your ListView a fixed height using SizedBox or similar
SingleChildScrollView(
child: Column(
children: <Widget>[
Text("Header"),// tested with 20 of these for scrolling
SizedBox(
height: MediaQuery.of(context).size.height / 2,
child: new ListView.builder(
itemCount: 20,
shrinkWrap: true,
itemBuilder: (context, i) {
return new ExpansionTile(/* whatever */ );
},
),
),
Text("Footer"),// tested with 20 of these for scrolling
],
),
)
Use SizedBox.expand for this problem,
SizedBox.expand(
child : ListView.builder(
itemCount: datas.length,
shrinkWrap: true,
itemBuilder: (context, i) {
return new ExpansionTile(
title: new Text(datas[i].title, style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold, fontStyle: FontStyle.italic),),
children: <Widget>[
new Column(
children: _buildExpandableContent(datas[i]),
),
],
);
},
),
);
Edited answer
Try this, you should get the desired output you are looking for.
You can find the output here.
Column(
children: <Widget>[
Text(),
ListView(
shrinkWrap: true,
physics: ScrollPhysics(),
children:[]),
Text()
]
)
adding below shown code in ListView will allow smooth scrolling of widget
shrinkWrap: true,
physics: ScrollPhysics(),