“This is the 7th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

GitHub：https://github.com/baiyuliang/Qrobot_Flutter

Next, we created a Flutter Project:

There are android, ios, lib and other directories in the Flutter project. Many students may have just started their project and rushed to the Android directory to develop the flutter project. In fact, the flutter programming directory is under lib, and all the programming files have a.dart suffix. We can also think of it as android development time. Java and Java directory, can be better understood!

Pubspec. yaml is an important file, which is similar to build.gradle in app directory during Android development. We need to declare it in this file when we reference some third-party tools or plug-ins, as shown below:

Click Pakage Get in the upper right corner to get the package, and then import the package path in the project to use the methods provided in it.

Dart will be available in the lib directory of any new Flutter project. This is the entry to the application, which provides examples. Before we start writing code, it is important to know something about flutter UI.

  • Dart imports, like Java, use the import keyword, which automatically prompts AS when you type import.
  • Like Java, Dart also declares classes with class and extends extends classes.
  • The essence of Java is that everything is an object, the essence of Flutter is that everything is a component, so you will often use widgets when developing Flutter;
  • Widgets can be thought of as views in Android;
  • You can go to the official website to learn more

We often use two classes when laying out the UI of an interface: StatelessWidget and StatefulWidget:

A StatelessWidget represents a static page that is, as we often say, written dead and will not change; The StatefulWidget is dynamic, meaning that the UI responds dynamically to changes in data; The first group class we see in the main application is the StatelessWidget:

void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); }}Copy the code

The Widget returned in the Build method is like a top-level ViewGroup of the entire UI, like a baseboard, and all subsequent components within that group are laid out layer by layer. Plus, the structure looks familiar:

public class MainActivity extends FlutterActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); }}Copy the code

The difference is that android uses XML layout, while Flutter uses code layout. All the components in the UI need to be implemented one by one in code. MaterialApp is a Material style app, which is familiar to android developers. You can check the description on the official website for the properties inside, focusing on the property of home: literally, home, which is the home of this interface. In home, we need to layout bit by bit according to the UI design.

 home: MyHomePage(title: 'Flutter Demo Home Page'),
Copy the code

MyHomePage inherits the StatefulWidget, indicating that the UI is dynamic; We need to know that in Android development, we can directly control the View and change its properties, but not in Flutter. We need to redraw the UI by changing the data. That is, we can only change the data, but not directly control the components. To implement dynamic interfaces, the StatefulWidget and State classes are closely linked:

class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( ), body: Center( )); }}Copy the code

MyHomePage overwrites the createState method to return State (_MyHomePageState). Variables and methods used in this homepage can be declared in the _MyHomePageState class.

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
Copy the code

The real layout starts in the Widget Build (BuildContext Context) method of _MyHomePageState:

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
      ),
      body: Center(

      ));
  }
Copy the code

The Scaffold implements Material style layouts and components. In the layout sense alone, we can still think of it as a ViewGroup. The main properties are as follows:

  • AppBar: Material title bar;
  • Body: The main content of the UI (below the title bar)
  • FloatingActionButton: A function button defined in Material;
  • PersistentFooterButtons: The buttons that are fixed to the bottom display;
  • Drawer: sidebar;
  • BottomNavigationBar: bottomNavigationBar;
  • BackgroundColor: backgroundColor;
  • ResizeToAvoidBottomPadding: control interface content body whether or not to the bottom of the layout to avoid being covered, such as when the keyboard display, to avoid are covered with the keyboard layout content;

Component declarations can be preceded by new, such as: new Text(‘ title ‘), or not, such as: Text(‘ title ‘), so don’t be confused when you see different projects with new or without new. Next, let’s look at some commonly used components:

  • Text: Text;
  • Input field: TextField;
  • List: ListView;
  • Divider: divider;
  • Border: BoxDecoration;
  • Package Container: Container;
  • Horizontal layout container: Row;
  • Vertical layout container: Column;
  • Flexible layout container: Flexible;
  • Image: Image;

And so on… All components have corresponding properties such as margin, padding, width, heigth, etc.

Let’s implement an interface with content at the top and input fields at the bottom:

class _MyHomePageState extends State<MyHomePage> { TextEditingController _textController = new TextEditingController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: New Column(children: <Widget>[new Text("Hello World"), new Divider(height: 1.0), // dividing line new TextField(controller: _textController, decoration: new InputDecoration. Collapsed (hintText: 'please input message),))); }}Copy the code

This is similar to the vertical layout of LinlearLayout. Then we can use Column in flutter. Note that: Column and Row containers can have multiple widgets, which is similar to the View LinearLayout, RelayLayout, etc. The corresponding property is children. Container, Flexible and other containers can only have one component, similar to ScrollView. The corresponding property is Child. The meaning is clear compared to children, while Text, Image and other components are the smallest View in Android.

Also note the way components are written:

Child: component (attribute: xx, attribute: xx,),Copy the code
Children: <Widget>[component (attribute: xx, child: xx,), component (attribute: xx, attribute: xx,),]Copy the code

All attributes and components are separated by commas (,), and pay attention to the hierarchical progression of attributes and components;

TextField requires a controller, TextEditingController, to be declared in the class. Then we can use this object to get the contents of the input field, empty the contents of the input field, and a series of operations.

Run the program with the following effect:

This article describes the Flutrer project structure, layout rules, and the functions and usage of different components. After you have a basic understanding of the development of the Flutter project, the next article will continue to explain how to implement a Flutter version of the chatbot.