Part 1. Overview of Basic Demo
I. Introduction
I am writing this series with the aim of providing practical training for beginners to understand and start a Flutter project. The knowledge presented in the articles is fundamental and sufficient for you to get acquainted with the most basic project structure. This will enable newcomers to conceptualize and begin their journey, exploring the foundational aspects of Flutter development.
II. Knowledge and Techniques to be Utilized
1.UI
Widget: In order to design screens for the app, we need to understand the concept of Widgets. Everything we see on the screen, such as text, buttons, input fields, etc., is a Widget. These Widgets can be categorized into different groups.:
- Basic Widgets (Core widgets): Container, Text, Image, Icon, Button, TextField, CheckBox, etc. These are used to display basic content and handle basic interactions.
- Layout Widgets: Row (arranges child widgets horizontally), Column (arranges child widgets vertically), Stack (allows child widgets to overlap), ListView (displays a scrollable list of widgets), GridView, etc. These help you create structured ui and organize components in the most effective way.
- Other Widgets: Scrolling widgets like SingleChildScrollView, interactive widgets like InkWell, and many more.
Assets: Managing resources ensures that the application will have a beautiful UI and full functionality. The most basic elements that we need are fonts in the application and icons.
2.State Management
State refers to the condition of a widget, simply understood as the data associated with screens. These data are essentially the states.
3.Navigation
Navigating to a New Screen + Passing Data
4.Networking
Working with APIs Using the Dio Library
III. Building the Brainstorming IQ Training App
This is a simple app with the main feature of displaying math questions. Users need to find the patterns within the numbers to answer correctly. It's essentially a collection of basic riddles that people can challenge each other with from time to time.
The app consists of several screens as follows:
If you support
me, you can access the link
https://play.google.com/store/apps/details?id=com.cc.mystery.iqtest
to experience it.
IV. Preparation
Environment Setup:
- Code Editor (IDE): Android Studio
- Coding Environment: Flutter 3.10.6