In this workshop, we will create a simple mobile app written in Dart with the flutter SDK. Flutter SDK is a tool created by Google that lets us create apps for Android, iOS, Linux, Mac, Windows, Web Platforms and Google Fuchsia from a single code base, that makes it easier for us to develop multi-platform apps easily.
For this workshop, we strongly recommand you to use Android Studio with the integrated Emulator on android API 28.
Before starting, you must complete the steps defined in the SETUP.md file in order for this workshop to go smoothly SETUP.md.
In the page1.dart file, you can see a stateless widget class called TodoList, inside there is a member function called _buildTodo taking a Todo (class in the Todotype.dart file), try to use it to display the _firstTodo task!
Here’s what it should look like once done:
Now that you know how to display one task, why not display an actual list ? Try displaying the _toddItems list of tasks by editing the _buildToDoList member function and putting it to use.
Here’s what it should look like once done:
You may want to use this
Congratulations ! You now know how to display a todo list ! But wouldn’t it be better if we fetched it from an database ?
You can see that we already made the database for you, you just have to use it using the member functions of the db object in the TodoList widget !
Edit the TodoList widget in order to fetch the tasks using the getItem function of the database db and passing the result to the _buildToDoList member function.
/!\ As you can see in the Storage.dart file, the getItem function is asynchronous, you may really want to look at the hint below /!\
Here’s what it should look like once done:
Here’s a little hint
When you are waiting for data from an asynchronous function, it’s better to clearly show to your users that something is loading.
Try to do so using for example a circular loading indicator.
It should look like this when data is loading:
Now we can properly display a Todo list, but we can’t add tasks yet, try adding a button that leads to a page where you can create a new task.
Here’s a simple example of what it could look like:
/!\ For this step, be sure that you have edited your AndroidManifest.xml as stated in the SETUP.md file /!\
In this step we are done with the first page! Open the page2.dart file.
You can see a stateful widget called ImagePage
If you run the app and go to this page, you will see two buttons, when pressed, the “From camera” button will call the _getImageFromCamera method, and the “From gallery” button will call the _getImageFromGallery method. You have to write those two methos (they are very simillar), but you also have to display the image you just picked !
Edit the _ImagePageState class to your heart’s content in order for it to work !
You may want to add another element to the ListView’s child array to display the image For this step, we will use the image_picker package
When an image is selected, your screen should look like this.
Congratulations on finishing the workshop ! Although you have finished the workshop, here’s a little list of some bonuses you could add to your project
Author: LightFox7
Source Code: https://github.com/LightFox7/Flutter_Workshop
#flutter #dart #mobile-apps