What Will I Learn?
- You will learn how to implement and use an SQLite database with SQflite
- You will learn how to properly structure and refactor a flutter applicaiton
- You will learn how to implement the Material Design list guideline specifications
- You will learn how to attach internal state to specific widgets
- You will learn how to use an Expansion Tile Widget
- You will learn how to use Factory keyword in Dart
Requirements
- IDEA intellij or Visual Studio Code with the Dart/Flutter Plugins
- The Dart SDK and the Flutter SDK
- A fair understanding of Mobile development and Imperative or Object Oriented Programming
- Some understanding or knowledge of SQL and relational databases
Difficulty
- Intermediate
Description
In the second part of this tutorial, we build on the application that was built in the first part. We add in a data layer, refactor the user interface and wire up the database to the other pieces of the application. We also refactor the our code by splitting the different elements into multiple folders.
We take the movie view widget and move it into its own file inside of a folder called views. This helps us reorganize the code in a way that is readable. We then refactor this code change the widget type into an expansion tile widget. The expansion tile widget extends the list tile widget with the ability to expand and contract the widget to reveal another widget. In this application, we use this functionality so that we can display the overview text for each of our movies.
We move the star favorite button to the far left of the expansion tile. This helps make the application feel more professional and keeps it inline with the guidelines for the material design list specification. In this way, we can have our primary action on the left and the secondary action on the right.
We then set up our database by creating a new folder and file called database. This file then contains the movie database class. In this class, we have an internal getter method that lets us abstract over top of our database. Then we also add in a factory method which allows the class to dispatch instances of our database as needed. This class also allows us to initialize the SQLite database in a way that is safe. The class also contains various methods which can affect the data of our database.
Finally, we wire up the database to our movie cards so that when a user clicks on the star button, the movie object gets placed into the database. In this way, the user can save the movies they want to watch in the database for use in other parts of the application.
Material Design Guidelines can be found here
The source code for this project can be found here
Video Tutorial
Tutorial Videos
Curriculum
- Dart Flutter Cross Platform Chat Application Tutorial
- Building a Multi-Page Application with Dart's Flutter Mobile Framework
- Making Http requests and Using Json in Dart's Flutter Framework
- Building Dynamic Lists with Streams in Dart's Flutter Framework
- Using GridView, Tabs, and Steppers in Dart's Flutter Framework
- Using Global Keys to get State and Validate Input in Dart's Flutter Framework
- The Basics of Animation with Dart's Flutter Framework
- Advanced Physics Based Animations in Dart's Flutter Framework
- Building a Drag and Drop Application with Dart's Flutter Framework
- Building a Hero Animation and an Application Drawer in Dart's Flutter Framework
- Building a Temperature Conversion Application using Dart's Flutter Framework
- Using Inherited Widgets and Gesture Detectors in Dart's Flutter Framework
- Using Gradients, Fractional Offsets, Page Views and Other Widgets in Dart's Flutter Framework
- Building a Calculator Layout using Dart's Flutter Framework
- Finishing our Calculator Application with Dart's Flutter Framework
- Making use of Shared Preferences, Flex Widgets and Dismissibles with Dart's Flutter framework
- Using the Different Style Widgets and Properties in Dart's Flutter Framework
- Composing Animations and Chaining Animations in Dart's Flutter Framework
- Building a Countdown Timer with a Custom Painter and Animations in Dart's Flutter Framework
- Reading and Writing Data and Files with Path Provider using Dart's Flutter Framework
- Exploring Webviews and the Url Launcher Plugin in Dart's Flutter Framework
Posted on Utopian.io - Rewarding Open Source Contributors