Flutter Basics

Keywords: Android Mobile Vue

The first time I came into contact with Flutter was on mooc.com. I saw Flutter in Android course. At that time, I thought what kind of grammar it was, and I could write mobile terminal. Later, I saw the introduction of nuggets and knew that saltfish was developed with Flutter. I felt it was very powerful. I found this course again on mooc.com and bought it.
After a few days of my own research, the idea that everything is a component is a bit muddled. It's a bit confusing to put patterns and logical data together. Not as simple as vue.

I. components

1. Basic components:

  • Container
  • Row
  • Column
  • Image
  • Text
  • Icon
  • RaiseButton
  • Scaffold
  • Appbar
  • FlutterLogo
  • Placeholder

II. Material Components Widgets

2.1 App structure and navigation

 Scaffold  //The basic realization of Material Design layout structure. This class provides an API for displaying drawer s, snapbars, and bottom sheet s.
 Appbar   //A Material Design application bar that consists of toolbars and other possible widget s, such as TabBar and FlexibleSpaceBar.
 BottomNavigationBar  //The bottom navigation bar makes it easy to switch between tabs and navigate to the top-level view.
 TabBar  //A Material Design widget that displays horizontal tabs.
 TabBarView  //Displays a page view corresponding to the currently selected tab. Usually used with TabBar.
 MaterialApp  //A convenient widget, which encapsulates some widgets needed by the application to implement Material Design
 WidgetsApp  //A convenient class that encapsulates some of the widget s that an application usually needs.
 Drawer  //Slide horizontally from the Scaffold edge to display the Material Design panel for navigation links in the application.

2.2 button

  RaisedButton   //Button in Material Design, a raised material rectangle button
  FloatingActionButton   //A circular icon button that hovers over the content to show the main actions in the application. FloatingActionButton is usually used for the Scaffold.floatingActionButton field
  FlatButton  //A flat Material button
  IconButton  //A Material icon button, when clicked, there will be a water wave animation
  PopupMenuButton   //When the menu is hidden, click or call onSelected to display a pop-up menu list
  ButtonBar  //Button groups arranged horizontally

2.3 input box and selection box

TextField   //Text input box
Checkbox   //Check box to allow the user to select multiple options from a group.
Radio	  //A radio box that allows the user to select an option from a group.
Switch   //On/off for switching a single state
Slider  //Slider, which allows the user to select from a series of values by sliding the slider.
Date & Time Pickers    //Date & time selector

2.4 dialog, Alert, Panel

SimpleDialog  //Simple dialog box to display additional prompts or actions
AlertDialog  //A dialogue payment that will interrupt the user's operation, which needs to be confirmed by the user
BottomSheet //BottomSheet is a list that slides from the bottom of the screen (to show more content). You can call showBottomSheet() or showmodal BottomSheet to pop up
ExpansionPanel  //A lightweight message prompt with optional actions is displayed at the bottom of the screen.

2.5 information display


2.6 layout


The above content and pictures have all been screenshots of the official website page, and so many components have been written. First of all, I have a general understanding. In the past two days, I have followed the video tutorial, knocked out the basic four components, and figured out the writing method of fluent. But it's still covered. The state of being able to finish at a glance.

Posted by djwinder on Sat, 09 Nov 2019 06:57:23 -0800