I'm developing a table at Flatter.
In order to process selection/unselection for each row of the table, I would like to develop a Checkbox for the header of the table and all rows.
Then, I found the showCheckboxColumn option in the DataTable widget and applied it with pleasure.
However, as shown in the picture below, the Checkbox was not applied at all, and I can't find the cause.
The DataTable widget I designed is written like the following code:
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.fromLTRB(24, 34, 24, 24),
child: Scrollbar(
trackVisibility: true,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Selected Delete',
),
SingleChildScrollView(
padding: EdgeInsets.only(top: 19),
scrollDirection: Axis.vertical,
child: DataTable(
showCheckboxColumn: true,
headingRowColor: MaterialStateProperty.all(Color(0xFFEEEEEE)),
rows: _getTableDatas(),
columns: _getTableHeaders(),
),
),
],
),
),
),
);
}
Is there any part of this code that I'm wrong about or I'm wrong about the concept of DataTable?
According to the docs,, You need to add showCheckboxColumn property to make the row selectable. Try adding and do let me know.
Related
Can anyone clarify for me what I have shown in the 'image' attached is achievable in flutter? if yes, how? explaining the image is a bit hard.
I am new to flutter and trying to nest some scrollable views inside each other.
at first I tried to achieve this by nesting simple scrollable row and columns inside each other but faced some errors and exceptions (unbound height and width).
I searched and found out it is better to use 'CustomScrollView' for nesting lists in each other. tried it but haven't achieved what I want yet.
Any help/hint on how to achieve this would be much appreciated.
Nested Scroll Views
This is definitely possible, and you could use an approach like below, which is inspired by another question on stack overflow. I recommend reading that for better clarification -- here.
Edit: Wrapping the Row widget in a SingleChildScrollView would make the entire page scrollable.
body: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: ListView.builder(
scrollDirection: Axis.vertical,
itemCount: X,
itemBuilder: (BuildContext context, int index) => ...
),
),
Expanded(
child: ListView.builder(
scrollDirection: Axis.vertical,
itemCount: Y,
itemBuilder: (BuildContext context, int index) => ...
),
),
],
);
If this doesn't help, I'd suggest finding flutter repositories of e.g. Netflix clones or other existing apps known to have scroll views inside a list view.
#bragi, thanks for the answer,
I followed what you suggested and after some trial and error, I finally got it working.
But in terms of efficiency and how the application will respond/render I am not sure if this was the best way to do it:
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
// mainAxisSize: MainAxisSize.min,
children: [
makeColumn(),
makeColumn(),
makeColumn(),
makeColumn(),
makeColumn(),
],
),
),
Widget makeColumn() {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Container(
width: 150,
height: 150,
color: Colors.green,
),
SizedBox(
width: 150,
height: 500,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: [
Container(), ....
For some reason, the Expanded widget did not work so I had to wrap my second column with SizedBox!
I am trying to get the layout as in the gif below but could not get any resource to continue with. There are two rows with multiple columns and is scrollable. How can I achieve such layout?
As your question says, you follow this approach, and it is not containing multiple columns, items are having different width. This snippet will work fine.
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Column(
children: [
Row(
key: const ValueKey("row1"),
children: _items(),
),
Row(
key: const ValueKey("row2"),
children: _items(),
),
],
),
),
You can achieve this by SingleChildScrolView widget with axis : horizontal and that listitem will be created using FilterChip widget.
like this :
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Wrap(
spacing: 10.0,
runSpacing: 5.0,
children: [...generateTags()],
),
),
generateTags(){
return _keywords.map((e) => FilterChip(label : e)).toList();
}
var _keywords =["hello" , "hi" ,"words 1" , "word 2"];
I have a list of days, and a list of opening hours for each day.
I need to make the list of days scrollable, and the list of opening hours expands as necessary (= I don't want the list of opening hours to be scrollable into a defined height container).
How to make the list scrollable ?
Here is what I have so far, a list of days that is not scrollable (and I can't see sunday) :
SingleChildScrollView(
child: ListView.builder(
itemCount: _days.length,
itemBuilder: (context, i) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.all(18.0),
child: Text(_days[i],
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey[700]))),
Container(
decoration: BoxDecoration(color: Colors.white),
child: ListView.builder(
shrinkWrap: true,
itemCount: _daysDispos[i].length,
itemBuilder: (context, j) {
final dispo = _daysDispos[i][j];
return ListTile(
title: Text(dispo.address.line));
}),
)
],
);
})),
EDIT
In the first listView builder, add :
physics: NeverScrollableScrollPhysics()
Solved my issue.
A good solution would be using Expandable package, and add multiple Expandables inside a single ListView.
Another Solution would be replacing the outer ScrollView with one single ListView, whose Childs will be 7 Columns, each column contains a group of opening hours.
You can try CustomScrollView with multiple SliverLists for your purposes instead of using SingleChildScrollView:
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverList(
delegate: SliverChildListDelegate([
Column(
children: <Widget>[
//Widgets you want to use
],
),
]),
),
SliverList(
delegate: SliverChildListDelegate([
Column(
children: <Widget>[
//Widgets you want to use
],
),
]),
),
],
);
}
I have a page with container + listView. Now the listView is scrollable, but I would like the whole page to be scrollable. (so if the user scrolls, the container goes 'away')
Column(
children: <Widget>[
Container(
color: Colors.white.withOpacity(0.95),
width: 400,
height: 400,
child: Text("")),
ListView(
children: posts,
),
],
),
Is this possible, and how can it be achieved?
Thanks!
You can wrap the whole page with a SingleChildScrollView
here is an example:
SingleChildScrollView( // <- added
child: Column(
children: <Widget>[
Container(
color: Colors.white.withOpacity(0.95),
width: 400,
height: 400,
child: Text("")),
ListView(
shrinkWrap: true, // <- added
primary: false, // <- added
children: posts,
),
],
),
);
for more info about see this question
What if you don't use Column and use ListView.builder and
according to indexes you show the widget.
For example on 0 index you show the Container.
This way you don't have to use any different widget for scrolling
and as per your requirement the container will scroll with the list.
This way there is no chance that you will get any overflow error
like you were getting while using Column.
Plus point of ListView.builder is that your posts will be created lazily and that is efficient way of creating ListView in Flutter. No matter how many posts you have your UI will not lag.
This at first may look like a hack but according to your requirement that the container must also be able to get scrolled, this solution makes sense to me because Container can be considered as a first element of the list.
Let me know if it works for you or not.
Following is the working code for your reference:
#override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: posts.length + 1, // +1 because you are showing one extra widget.
itemBuilder: (BuildContext context, int index) {
if (index == 0) {
return Container(
color: Colors.white.withOpacity(0.95),
width: 400,
height: 400,
child: Text(""));
}
int numberOfExtraWidget = 1; // here we have 1 ExtraWidget i.e Container.
index = index - numberOfExtraWidget; // index of actual post.
return posts[index];
},
);
}
I hope this works for you, in case of any doubt please comment.
There are multiple ways you can achieve what you want. The only problem is that if you have large number of posts, listview with children posts, as shrinkWrap is set to true, will take time to calculate its required height, for that it will have to populate all of its children.
First
ListView(
children: <Widget>[
Container(
color: Colors.white.withOpacity(0.95),
width: 400,
height: 400,
child: Text("")),
ListView(
physics: NeverScrollableScrollPhysics(),
primary: false,
shrinkWrap: true,
children: posts,
),
),
],
),
Second
SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
color: Colors.white.withOpacity(0.95),
width: 400,
height: 400,
child: Text("")),
ListView(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
primary: false,
children: posts,
),
],
),
),
use SingleChildScrollView then Container with hard coded container height, then list view builder, that should fix your issue.
I tried the following:
SingleChildScrollView(
child: Container(
height: 1000,
width: 400,
child: ListView(
children: <Widget>[
Container(
color: Colors.white.withOpacity(0.95),
width: 400,
height: 400,
child: Text("")),
ListView(
children: posts,
),
],
),
),
),
This works, but I would like that the container has a dynamic height and width? Is that possible? Thanks!
Sorry bad english.. I want to navigate from one screen to another base on id from gridview items.
when one of the listview item11 is clicked it will be directed to the detail page item11..
So, how do create a detailed page design when one of the ListView's clicks is different.
full my code:
class CategoryScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new SafeArea(
child: new Scaffold(
appBar: new BankAndaAppBar(),
body: new Container(
color: Colors.grey[100],
child: new ListView(
physics: ClampingScrollPhysics(),
children: <Widget>[
new Container(
padding: EdgeInsets.only(left: 12.0, right: 12.0, top: 12.0),
color: Colors.grey[100],
child: new Column(
children: <Widget>[
_bodyGridView(),
],
)),
],
),
),
),
);
}
Widget _bodyGridView() {
return SingleChildScrollView(
child: new Column(
children: <Widget>[
GridView.count(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 3,
children: CATEGORIES_DUMMY_DATA
.map((cat) => ListCategory(cat.id, cat.title, cat.titleDetail, cat.description, cat.image))
.toList(),
),
],
),
);
}
}
I want display detailed information after clicking a gridview item. example : every clicking a item 1 show detail view item=1.
enter image description hereThanks.
As per my understanding, you want to display detailed information after clicking a grid item.
If so, there are many ways to do it.
Pass the data within pages : follow
Create a model class, store the data in memory and display it. follow
If you want to navigate from one screen to another follow