A new Flutter application.
This project is a starting point for a Flutter application.
(+) Add two plugins
(+) one for 'http' and other for getting the 'Device derectories'
-> go to perspec.yaml file
// http: "0.11.3+17" path_provider: ^1.1.0 //
- This is the service url we are going to use
-> //https://jsonplaceholder.typicode.com/posts In this service we have 5000 records or albums
- Create the model class first
(+) We need some plugins.. like those.. :
// //dependencies: // json_annotation:
dev_dependencies: json_model: build_runner: ^1.0.0 json_serializable: ^2.0.0 //
- To auto-generate Json Models, we need to create a folder named 'jsons' in the root of the project
-> We have differentes name as well in that case the folder name should be specied along with the commande in the terminal:
- Create the folder 'jsons' first
(+) Copy the json that we want to create model for... in the file album.json
- Run a command in the terminal to generate the model,
-> The generated models will be inside a folder named 'models' insode the 'lib' folder. let's see how to do it..
(+) The commande : flutter packages pub run json_model
- Now we have the basic model
-> We have a list of Albums, so create another model
(+) Add the albums.json file:
// { "albums": "$[]album" //album is the json file name } //
(+) Then Run the same commande line to get the files : 'albums.dart' and 'albums.g.dart'
- Now we have the both models..
-> Let's start by creating a service to get the form from the Service
(+) Add the Sqflite library to create an offline database..
// sqflite: ^1.1.3 //
(+) Let's write the basic CRUD operations for saving the albums in the Offline Database...
-
Create the class DBHelper.dart
-
Now we will create the service classto get the data from the service.
-> Add the http plugin... // http: "0.11.3+17" //
-
Create the class Services.dart
-
Use these Database functions now to the DB Operations
-> import these : // import 'service/Services.dart'; import 'models/album.dart'; import 'models/albums.dart'; import 'db/DBHelper.dart'; //
- Add the function getPhotos() and the recursive function insert()
(-) Bug : E/flutter ( 1689): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: DatabaseException(UNIQUE constraint failed: albums.id (code 1555)) sql 'INSERT INTO albums (userId, id, title, body) VALUES (NULL, ?, ?, NULL)' args [3, officia porro iure quia iusto qui ipsa ut modi]}
- We will create a GridView to show the Data...
(+) Create the class from each Cell in the GridView
(+) Create the class GridCell.dart
- Edit the GridCell
(+) Fix the Column
(+) Add Two Other buttons for the Delete and the Update
(+) Pass the Update and Delete function as Constructor Parameter in the GridCell.dart
- Go the the Ui (main.dart) and add the GridCell.
FutureBuilder()...
(+) Add the gridview function
(+) Add the Update and Delete function
(+) Add the Refresh the List after the DB Operations
(+) Add Simple Snackbar
- Add the "GlobalKey" to the Scaffold
(-) Bug with the delete function
- We will add a progressbar while inserting the album records
(+) LinearProgressIndicator()
(+) Calculate the percent : (counter / albums.albums.length * 100) / 100;
- the Offline Builder test
![]() |
![]() |
- the Click on the update button
![]() |
![]() |
- the GridView photos
![]() |
![]() |
- the Actions : Update and Delete
![]() |
![]() |