Flutter Tutorial - Selectable DataTable & Select Rows

Create a selectable DataTable with Flutter, to select individual rows within your table.
Click here to Subscribe to Johannes Milke: kzbin.info...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/data...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Country Picker Tutorial: • Flutter Tutorial - Sin...
Sortable Data Table Tutorial: • Flutter Tutorial - Sor...
Create Invoice PDF Document Tutorial: • Flutter Tutorial - Cre...
Create PDF Tables & Images Tutorial: • Flutter Tutorial - Cre...
Display Software Licenses Tutorial: • Flutter Tutorial - Lic...
Secure Storage & Data Persistence Tutorial: • Flutter Tutorial - Sec...
Search & Filter ListView Tutorial: • Flutter Tutorial - Sea...
Expandable ListView Tutorial: • Flutter Tutorial - Exp...
Single & Multi Selection ListView Tutorial: • Flutter Tutorial - Sin...
Autofill Services In 5 Minutes Tutorial: • Flutter Tutorial - Aut...
Buttons 2.0 Tutorial: • Flutter Tutorial - New...
Null Safety In 5 Minutes Tutorial: • Flutter Tutorial - Nul...
Migrate App To Null Safety Tutorial: • Flutter Tutorial - Mig...
Deploy Flutter Web App Tutorial: • Flutter Tutorial - Fir...
Search Bar & Search Delegate Tutorial: • Flutter Tutorial - Sea...
App Bar Tutorial: • Flutter Tutorial - App...
TIMELINE
0:00 Introduction Selectable Data Table
0:17 Create Data Table
0:40 Create Table Columns
2:03 Create Table Rows
3:53 Selectable Data Table
5:43 Make Data Table Scrollable
6:48 Change Table Cell Width
7:40 Select All In Data Table
9:18 Submit Selection
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
LEARN MORE
SOURCE CODE | github.com/JohannesMilke
ARTICLES | / johannesmilke
PLAYLISTS
All Flutter Videos | • Flutter Tutorial - Flu...
Widgets - Flutter | • Flutter Tutorial - Flu...
Plugins - Flutter | • Flutter Tutorial - Flu...
Animations - Flutter | • Flutter Tutorial - Tra...
Designs - Flutter | • Flutter Tutorial - Flu...
Firebase - Flutter | • Flutter Tutorial - Pag...
State Management - Flutter | • Flutter Tutorial - Riv...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke

[@HeyFlutter]

This might help you :) 👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com Source Code: github.com/JohannesMilke/datatable_selectable_example Country Picker Tutorial: kzbin.info/www/bejne/bne5nKifrduBfsU Sortable Data Table Tutorial: kzbin.info/www/bejne/iXvbc6x-gdhqaM0 Create Invoice PDF Document Tutorial: kzbin.info/www/bejne/sJCYqZ6eetCWa7s Create PDF Tables & Images Tutorial: kzbin.info/www/bejne/bpuZeH6qpbeepdk Display Software Licenses Tutorial: kzbin.info/www/bejne/b53Vfap_fa5pf6c Secure Storage & Data Persistence Tutorial: kzbin.info/www/bejne/haLLo6uhlMtkiKc Search & Filter ListView Tutorial: kzbin.info/www/bejne/pXe9eqp4qsl8oJI Expandable ListView Tutorial: kzbin.info/www/bejne/iJa4kpKNqJ14qbs Single & Multi Selection ListView Tutorial: kzbin.info/www/bejne/bne5nKifrduBfsU Autofill Services In 5 Minutes Tutorial: kzbin.info/www/bejne/rGm3ZZmkp7Z2nJI Buttons 2.0 Tutorial: kzbin.info/www/bejne/r6XPdX6Ad92KlaM Null Safety In 5 Minutes Tutorial: kzbin.info/www/bejne/h5C6naKDg7CCobc Migrate App To Null Safety Tutorial: kzbin.info/www/bejne/fX3RgqOefc5keLs Deploy Flutter Web App Tutorial: kzbin.info/www/bejne/rnvSaICnqMpsbJI Search Bar & Search Delegate Tutorial: kzbin.info/www/bejne/iJKkdHStq79pZ6c App Bar Tutorial: kzbin.info/www/bejne/mnmld2d_f7-pfs0

[@bernhardriemann5091]

Ihre Videos bringen es auf den Punkt! Sehr schön wie Sie die Dinge herausarbeiten! Viel Erfolg!

[@sergdigital7437]

Thanks for adding awesome content on a daily basis. Great job Sir!

[@draco19905]

Thanks , that's what I was looking for!

[@user-iw2md2gl4q]

Amazing. Thank you!

[@marco_di]

A brilliant tutorial !!!!!!!!!!!!! Thanks a lot for this :D

[@mbagozpel]

Thanks for this, it saved me a lot

[@johnpeter122]

Thanks .. awesome tutorial

[@arnaudduquenoy2061]

You are so good ! Wish you 1000000 subscribers. Even if the videos are short we can figure out how to structure a flutter app as you often include MODEL / DATA / APPLICATION folders in your tutos 👍

[@haroldpepete]

great video, when you have enough time please make a video about edition on this widget, it'll be great

[@progegypt]

The Best

[@fahrulrozi3668]

thank you sir for the knowledge

[@HeyFlutter]

You’re most welcome, Fahrul Rozi! 🙂

[@eNONO-ot4zh]

Helpfull

[@berkaykurkcu]

Hey Johannes! Is it possible to delete elements containing in DataTable interactively like a delete button next to it? edit: Well I managed to do it. Easy as hell, idk why I haven't tried it before writing a comment here. If someone has the same problem, there you go. You just add another DataCell() at the bottom and add a DataColumn(label: Text("Delete")), to your DataColumns. I added an IconButton inside the DataCell i added for deletion and implemented like that.

[@kareemobaid6618]

your way of coding is super wonderful

[@HeyFlutter]

Thank you, kareem obaid! 🙂

[@MrGreyManta]

Thanks for you're explanation great work as always I have one question : how do you delete a selected row/rows in the button onPressed() method

[@HeyFlutter]

Thank you, tahiri amine!😊, You just need to remove the selected values from list or database from wherever you are and after that just reload the datatable

[@miladhesami6630]

Thank you, please make sure provide your course on udemy 🌹

[@stanislavfedorenko8062]

cool video, thanks. Can you make a tutorial how to add new rows to a table from another screen wich is a form with textfields?

[@HeyFlutter]

Thank you, Stanislav Fedorenko! Check out this video about dataTable: kzbin.info/www/bejne/epy9dGylZ8uUqpY&ab_channel=JohannesMilke

[@aminuazeez938]

Sir,if i click on one row, it select all the entire row. i dont know where am getting this error

[@gnrslashsp6501]

Interesting way of doing, thanks! I have two questions: 1. How can you fix the header to not scroll with the table contents? 2. Is it possible to have something that allow users to change column width dragging column bounds?

[@HeyFlutter]

Thank you, †GnR† SlashSP! 🙂 Both of these are not supported with the DataTable at the moment. A) Make add these issues here: github.com/flutter/flutter/issues B) Data Table With FixedHeader: pub.dev/packages/table_sticky_headers

[@aminuolamideazeez370]

Nice video. i really enjoy it. sir, what of the one without API. im confused

[@aminuolamideazeez370]

@@HeyFlutter I want to fetch my data locally without fetching all the names of the country from Api

[@HeyFlutter]

Thank you, Aminu Olamide Azeez! 🙂. I didn't get your answer. Can you please explain it a little bit?

[@oliverpaul3432]

Can you make videos about flutter different architectures and implementation in projects. The current trend is riverpod.

[@HeyFlutter]

Thank you, Oliver! 🙂 Check out my tutorials about state management here: 1. Riverpod Basics Providers Tutorial: kzbin.info/www/bejne/bnmWk6qurdGUars 2. Riverpod Basics Notifiers Tutorial: kzbin.info/www/bejne/rHWQemR3h66ApM0 3. Riverpod Basics Modifiers Tutorial: kzbin.info/www/bejne/bZmVc6WqgJ11psk 4. Riverpod & Calculator UI Tutorial: kzbin.info/www/bejne/bJrWiGVsmZ6Hn6c 5. Provider Tutorial: kzbin.info/www/bejne/mZ3XdKOOjptjic0 6. Provider & Firebase Tutorial: kzbin.info/www/bejne/e4eVdayogLSkqLs

[@janammaharjan2699]

hello Johannes i got an error ... that is while populating UI in flutter web with data of only 300 rows the app gets very very slow and seems like crashing .. there is no issue while using the web app in iphone or mobile device the problem is in flutter web while running in local host desktop. what can be solution please help.

[@janammaharjan2699]

@@HeyFlutter the error message 'The provided ScrollController is currently attached to more than one ScrollPosition.'

[@janammaharjan2699]

Hey Johannes I am facing Cors error while running the flutter web in windows, that the images are displayed while running the website from ios device but images are not displayed while running from windows.. how can i solve the problem please help.

[@janammaharjan2699]

@@HeyFlutter Thank you the error have been resolved.

[@reemalrossais9363]

Thank you so much!! how do we link this with firebase?

[@HeyFlutter]

Thank You Reem AlRossais! Follow this link: medium.com/47billion/how-to-use-firebase-with-flutter-e4a47a7470ce I hope you will get your answer 🙂

[@taimoorsaleem5897]

Hi Johannes! I'm following your tutorial everything is working fine i want to add new Row by clicking on add button Can you please guide me how can i do this ?

[@taimoorsaleem5897]

@@HeyFlutter Thank you 🙂

[@HeyFlutter]

Thank You Taimoor Saleem! Follow this link: stackoverflow.com/questions/63610347/flutter-datatable-select-row I hope you will get your answer 🙂

[@ganyamanish]

Hi Johannes, there is something happening with your code, if you select all the rows and then u want to unselect some, the row gets deleted from the datatable, I don't know if this behavior is on purpose. how can I prevent this?

[@HeyFlutter]

Thank You Nestor Ariza! Follow this link: stackoverflow.com/questions/63610347/flutter-datatable-select-row I hope you will get your answer 🙂

[@user-co5ud4fp2k]

i want to make still the checkBox. is it possible? checkBox should not be scroll.

[@HeyFlutter]

Thank You উচিত কথা! Follow this link: stackoverflow.com/questions/66777119/flutter-checkboxlisttile-loses-checked-state-when-scroll I hope you will get your answer 🙂

[@janammaharjan2699]

Hey Johannes I got with an error while implementing data table in flutter web that it is not scrolling horizontally. It works fine for android device and ios device but does not scrolls in web in windows. please help. Regards Janam

[@janammaharjan2699]

@@HeyFlutter Thank you so much for the reply. There is no error message but still while building flutter WEB the table don't scroll horizontally in windows.......but does scrolls in android, device, ios device and Mac.

[@MoisesConejo]

2:53 why here you declare an final var and then use as a parameter only one time? is not more clean to just put the string direcly in the function?

[@HeyFlutter]

Thank You Moises Conejo! Follow this link: medium.com/@Anil_Sharma/different-between-const-and-final-keyword-in-dart-language-flutter-3e8afec6c371 I hope you will get your answer 🙂

[@arunchetan6943]

bro i have one doubt, how to add integer value in this field ? if I'm try to add pincode it show one error "the argument type int can't assign to the parameter type String.

[@arunchetan6943]

@@HeyFlutter thank you so much bro it worked ❣️😍 by the way keep posting more videos in flutter... ❤🤗

[@HeyFlutter]

Hello, Arun Chetan! Follow this link: stackoverflow.com/questions/55995791/how-can-i-resolve-the-argument-type-string-cant-be-assigned-to-the-parameter, I hope it will solve your problem. Thank You 🙂

[@aminuazeez938]

sir, i have been trying to modify this tutorial. i want all the row selected by my user to show inside another table as preview instead of showing the snackback with only the country. sir,help me. i am a beginner

[@HeyFlutter]

Thank You Aminu Azeez! Follow this link: material.io/components/data-tables/flutter I hope you will get your answer 🙂

[@xuankhanhhoang6999]

how to change color checkbox, please help me...

[@HeyFlutter]

Thanks, Xuân Khánh Hoàng! 🙂 Learn more about checkboxes here: kzbin.info/www/bejne/bXzEhmeporebpKM

[@AkashdeepSingh-my9rr]

Hi... Can you tell how to add serial number to datatable?

[@HeyFlutter]

Thanks, Akashdeep! 🙂Simply add to your data model class a field id and set a unique Id for each object which you then display later in your table

[@shahidmasoud2270]

Bro u there in instagram or telegram I have doubts I am one of ur subscriber

[@sanjibdutta9270]

Can we make the header fixed, while scrolling..

[@qwikshop5499]

You can use silverapp bar widget for that purpose ig

[@HeyFlutter]

Thank you, Sanjib! 🙂 Therefore you could use another package to have a fixed header until Flutter supports it with DataTable: pub.dev/packages/table_sticky_headers

[@androider5830]

Hey man Crete a new tutorial with filter by price and rating

[@HeyFlutter]

Thank you, Androider! 🙂 Simply check out my tutorial about Filtering ListViews it works quite similar: kzbin.info/www/bejne/pXe9eqp4qsl8oJI You can also learn more about filtering here with an autocomplete field: kzbin.info/www/bejne/r5O5YpR_rrB5e5I

[@alokgupta2397]

how to create Admin panel with firebase in flutter?

[@alokgupta2397]

@@HeyFlutter Make it your top priority Johannes, I am waiting for it😃