search

CampusEatsUofT / .github

A README repository of Campus Eats
0 stars 0 forks source link

Flutter Tutorial #1

Open Yuanxyyds opened 6 months ago

Yuanxyyds commented 6 months ago

What is Flutter?

Flutter is an open-source UI software development toolkit created by Google. It is used to build natively compiled applications for mobile, web, and desktop from a single codebase. Flutter allows developers to use a single programming language (Dart) to create high-performance, visually appealing, and interactive user interfaces across multiple platforms. It employs a reactive framework, a rich set of pre-designed widgets, and a hot reload feature for rapid development, making it efficient for building cross-platform applications with a consistent user experience.

Install Flutter

  1. First, download Flutter through this link Installing Instruction on Mac, on Windows
  2. Download Android Studio (Recommended) and an android emulator. We are building our app on android emulators now for developing and testing
  3. Run flutter doctor to test if flutter is being properly set up.

Get Started

  1. Follow this codelab to build your first app. It takes you through the flutter setup and some basics of flutter. (make sure we are using Android Studio, not VS code since it has more support to android app)
  2. Watch this youtube playlist series which demos the most common used concepts that you need to know with flutter. Make sure to glimpse all and carefully understand the following:
    • #4 Follow this video to create a new flutter app inside your android studio
    • #7 A crucial element in Flutter development is the widget, which serves as the foundation for constructing various UI components within your app. Widgets form a hierarchical structure, where each widget typically possesses a parent and one or more children. These widgets encapsulate one another to create intricate user interfaces. This video focuses on exploring one of the two fundamental widget types: the stateless widget.
    • #10 Containers and Padding: these are two important built-in widgets in flutter, used almost anywhere.
    • #11 Rows: A widget that can have multiple children widgets and place them in a row
    • #12 Column: A widget that can have multiple children widgets and place them in a column
    • #14 Expanded: This widget is really important to understand, it will use the maximum possible space for its child. For example, if you have a dynamic-sized widget (i.e. ListView), without specifying their width/height constraints, there will be an rendering error. To give them a size, we usually pass them as a child to SizedBox (with specific height and width), or Expanded (uses maximum possible space).
    • #16 The second widget types: stateful widget. Stateful widgets are interactive widgets, for example, you have a number on a button, each press on this button will increase the number shown on this button by 1. In this case, you will save this number state inside of this widget and then call setState method to request an update of UI based on the current state. Most custom widgets are stateful widgets thus this is really important to understand
    • #20 Custom Widgets: To avoid code re-using, we should extract common-used widgets out in another file.
    • #24 Widget Lifecycle/State Management: State Manage is the main problem you will face in your flutter app development. There are multiple state management technique in flutter such as Provider, Blok, GetX... In this video, it will introduce the default state management methods by stateful widgets. In our project, we will use these default method a lot, plus Provider (in future video)
    • #26 Use Open-source Package: We will use a lot open-source packages created by others, those packages can be founded at https://pub.dev/. This video demos how to import those packages.
  3. Now, you should understand most basic components of flutter! Now, we will introduce a new state management tool we are using, Provider!
    • Follow this play list to learn what are provider
    • Basically, using a provider can separate your business logic (backend functions), state management from your UI. Your UI is listening to some providers and these providers will "notify" those UI listener to rebuild the UI when necessary.

Get into Project

Now, it's time to clone our project and start reading some project codes

  1. git clone https://github.com/CampusEatsUofT/CampusEatsUser.git into your laptop and open it with Android Studio
  2. Run flutter pub get to get required dependency.
  3. Try to build and start the app
  4. Create and Login with an account, find Edit Profile screen, and read the corresponding code in screen/edit_profile_screen.dart, (partial of)provider/user_provider.dart to see if you understand how it works.

Next Steps

  1. Now, you are good to write some front-end codes in flutter! Make sure you are following our Github Development flow and Naming Strategy
  2. The main backend we are using is Firebase, here is a tutorial of how to use firebase. Firebase Tutorial