Related
In my application I am listing in an appBar several Containers that have the names of product categories, these categories are being listed in the body with their respective products.
The ListView that is in the appBar has the same indexes of the ListView of the body, so the idea was to press the index 'x' in the appBar and the user would be redirected to the index 'x' in the body.
I tried many solutions, one of then was the package https://pub.dev/packages/scrollable_positioned_list, but it did not works because when calling the function to scroll my list just disappears.
Here's de code:
return Scaffold(
backgroundColor: Colors.white,
appBar: PreferredSize(
preferredSize: Size.fromHeight(120),
child: Column(
children: [
AppBar(...),
Expanded(
child: Container(
color: AppColors.primary,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: widget.listaProdutos.length,
itemBuilder: (context, index) {
return Padding(
padding: EdgeInsets.symmetric(...),
child: GestureDetector(
child: Container(
decoration: BoxDecoration(...),
child: Padding(...),
child: Center(
child: Text(
widget.listaProdutos[index].dsGrupo,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
),
onTap: () {
SHOULD SCROLL TO INDEX
},
),
);
},
)
),
),
],
),
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: widget.listaProdutos.length,
itemBuilder: (context, indexGrupo) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Card(...),
ListView.builder(..),
],
);
},
),
),
],
),
),
);
You can use PageView with scrollDirection: Axis.vertical,
class TFW extends StatefulWidget {
const TFW({super.key});
#override
State<TFW> createState() => _TFWState();
}
class _TFWState extends State<TFW> {
final PageController controller = PageController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
bottom: PreferredSize(
preferredSize: Size.fromHeight(100),
child: Expanded(
child: ListView.builder(
itemCount: 100,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return InkWell(
onTap: () {
controller.animateToPage(index,
duration: Duration(milliseconds: 400),
curve: Curves.easeIn);
},
child: SizedBox(width: 100, child: Text("$index")),
);
},
),
),
)),
body: PageView.builder(
controller: controller,
itemCount: 100,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return Container(
color: index.isEven ? Colors.red : Colors.blue,
child: Text("$index"),
);
},
),
);
}
}
Fortunately I was able to resolve the problem. To help members who may have the same doubt I will register here the solution that worked for me. (sorry for the bad English)
Question: Why ScrollablePositionedList wasn't working? (as I mentioned iniatily)
Response: I was using the ScrollablePositionedList within a SingleChildScrollView, and for some reason when using the scrollTo or jumpTo function, the information that was visible simply disappeared. For that reason, I was trying to find a way to get success using a ListView (what came to nothing).
Solution: ... Trying to figure out why the ScrollablePositionedList wasn't working as it should ...
The initial structure was:
body: SingleChildScrollView(
child: Column(
children: [
Container(
child: ScrollablePositionedList.builder(
Changed for:
body: ScrollablePositionedList.builder(
The only reason for all this confusion is that ScrollablePositionedList's indexing functions for some reason don't work as they should if it's inside a SingleChildScrollView. So, take off SingleChildScrollView and all good.
This is my code for the horizontal scrollbar. how to style this according to given UI. where and how I should add styles on this code. the code is showing how I placed the scroll bar in my home. dart. need suggestions to add styles.
home.dart.
body: ListView(
children: [
buildSearchInput(),
Padding(
padding: const EdgeInsets.only(top: 40, left: 20, right: 20),
child: Column(
children: [
SizedBox(
height: kToolbarHeight,
child: ListView(
scrollDirection: Axis.horizontal,
children: List.generate(4, (index) => Text("item $index")),
),
),
],
),
)
,
You can use Container with StadiumBorder to decorate them and using ListView.separated to have space between items.
final List<String> data = ["item A", "Item Number 2", "new One"];
Widget itemW({
required String text,
required Color bgcolor,
required Color textColor,
}) {
return Container(
padding: const EdgeInsets.all(16),
alignment: Alignment.center,
decoration: ShapeDecoration(
shape: const StadiumBorder(),
color: bgcolor,
),
child: Text(
text,
style: TextStyle(color: textColor),
),
);
}
....
ListView.separated(
itemCount: data.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) =>
itemW(color: Colors.cyanAccent,
bgcolor: Colors.cyanAccent,
text: data[index]),
separatorBuilder: (context, index) {
return const SizedBox(
width: 10,
);
},
),
I am displaying an image in my code when the list is empty. I am using firebase to fetch data and store it in the list since there is no data stored yet so the list is empty initially. But it is not displaying the image on empty condition
Code:
// tab bar view her
Expanded(
child: TabBarView(
controller: _tabController,
children: [
Container(
padding: EdgeInsets.only(right: 32, left: 32),
child: Medicine(),
),
// second tab bar view widget
Container(
padding: EdgeInsets.only(right: 32, left: 32),
child: MedHistory(),
),
],
),
),
],
),
Widget Medicine() {
print("MedicineList ${med_list.length}");
if(med_list.isEmpty) {
noMedicine();
}else {
ListView.separated(
physics: NeverScrollableScrollPhysics(),
padding: EdgeInsets.symmetric(vertical: 11, horizontal: 20),
shrinkWrap: true,
primary: false,
itemBuilder: (context, index) {
return MedicinesList(
med_list[index].userSdate,
med_list[index].userReminder,
med_list[index].userEdate,
med_list[index].userFreq,
med_list[index].userDosage,
med_list[index].userMed,
med_list[index].key);
},
separatorBuilder: (_, __) => Container(),
itemCount: med_list.length);
}
}
Widget noMedicine() {
return Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Image.asset(("assets/images/Medicine-amico.png")),
SizedBox(
height: 20,
),
Text(
'Hurray! You don\'t have any pending medicines to take!',
style: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w600,
fontSize: 14,
color: const Color(0x78000000),
height: 1.4285714285714286,
),
textAlign: TextAlign.center,
),
],
),
);
}
My screen should display this in case the list is empty:
Kindly help me out in solving the problem, Thank you
Can you try using med_list.isEmpty instead of med_list.length == 0 in your if check?
Edit: also make the list empty through List<MedicineList> med_list = []; or List<MedicineList> med_list = <MedicineList>[]; instead of List<MedicineList> med_list = List();.
Edit 2: The issue was that widgets were made using Widget name = {}. A widget has to be a class which extends either Stateless or Stateful. It also has to have an #override build(BuildContext context) {} fucntion. Please see comments for more details.
By using the condition of checking if list is empty or not inside TabView would make it and will display the image as well:
Expanded(
child: TabBarView(
controller: _tabController,
children: <Widget>[
med_list.length == 0
? noMedicine()
: ListView.separated(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
primary: false,
itemBuilder: (context, index) {
return MedicinesList(
med_list[index].userSdate,
med_list[index].userReminder,
med_list[index].userEdate,
med_list[index].userFreq,
med_list[index].userDosage,
med_list[index].userMed,
med_list[index].key);
},
separatorBuilder: (_, __) => Container(),
itemCount: med_list.length,
),
// second tab bar view widget
Container(
padding: EdgeInsets.only(right: 32, left: 32),
child: MedHistory(),
),
],
),
),
In my Flutter project, I have a container with a fixed height. Inside that container I have a Listview.
Here's the code-
return new Scaffold(
appBar: AppBar(
title: Text("All Values"),
),
body: new Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
height: isLoading ? 50.0 : 0,
color: Colors.white70,
child: Center(
child: new CircularProgressIndicator(),
),
),
Expanded(
child: Container(
height: 350,
color: Colors.red,
alignment: Alignment.bottomLeft,
child:
new ListView.builder(
itemCount: data.length-8,
itemBuilder: (BuildContext cxtx, int index) {
return Padding(
padding: const EdgeInsets.fromLTRB(10, 0.0, 10, 0),
child: Container(
child: showCard(index, radius),
),
);
},
controller: _scrollController,
),
),),
],
),
resizeToAvoidBottomPadding: false,
);
The code outputs like below-
So, the problem is I want to align these items at bottom left of the container. I could have done that using reverse: true but I need the list items with the same sequence. So, I need suggestion how can I do that?
You need those items in a row or a column? Follow with a row possibility:
Try this:
return new Scaffold(
appBar: AppBar(
title: Text("All Values"),
),
body: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
if(isLoading)
Container(
height: 50.0 ,
color: Colors.white70,
child: Center(
child: new CircularProgressIndicator(),
),
),
Expanded(
child: Container(
height: 350,
color: Colors.red,
alignment: Alignment.bottomLeft,
child: new ListView.builder(
itemCount: data.length - 8,
itemBuilder: (BuildContext cxtx, int index) {
return Padding(
padding: const EdgeInsets.fromLTRB(10, 0.0, 10, 0),
child: Container(
child: Text('asdf'),
),
);
},
controller: _scrollController,
),
),
),
],
),
resizeToAvoidBottomPadding: false,
);
StoreConnector<_ViewModel, List<Message>>(
converter: (store) {
// check mark ,reverse data list
if (isReverse) return store.state.dialogList;
return store.state.dialogList.reversed.toList();
},
builder: (context, dialogs) {
// Add a callback when UI render after. then change it direction;
WidgetsBinding.instance.addPostFrameCallback((t) {
// check it's items could be scroll
bool newMark = _listViewController.position.maxScrollExtent > 0;
if (isReverse != newMark) { // need
isReverse = newMark; // rebuild listview
setState(() {});
}
});
return ListView.builder(
reverse: isReverse, // 反转列表，insert数据时，刷新到0，加载更多时，滚动偏移不变
controller: _listViewController,
itemBuilder: (context, index) => _bubbleItem(context, dialogs[index], index),
itemCount: dialogs.length,
);
},
)
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(),