This is the fifth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021.

1. About the Flutter

Flutter is Google’s mobile UI framework for quickly building high-quality native user interfaces on iOS and Android. Flutter can work with existing code. Flutter is being used by more and more developers and organizations around the world, and Flutter is completely free and open source. Flutter achieves excellent rendering performance due to its own rendering engine, which is close to its native implementation.

Quickly create a Flutter project to learn about it.

Dart is equivalent to the entrance of our app. In iOS, Main. m is the entrance of the program

We run the Hello_FLUTTER project on the Android emulator

Run it on the iPhone emulator

Run on the Web

Achieved a code application of three ends, greatly improved efficiency.

2. Custom widgets

Everything in Flutter can be widget like we have in iOS. The main job of a Widget is to implement a build function that builds itself. A widget usually consists of lower-level widgets. The Flutter framework builds these widgets in turn until the lowest child widgets, usually the RenderObject, are built, which calculates and describes the widget’s geometry.

We can click after we modify the content⚡ ️Or shortcut keys on a Maccommand+/. Changes can be quickly viewed, greatly improving our compilation time.

Here the system homepage is a custom widget. We will create our own custom widget

2.1 Status of widgets

These widgets can be stateless statelessWidgets or stateful statefulwidgets, depending on whether your widget needs to manage some state.

  • StatelessWidget: stateless does not change, usually we can use shortcut keysstl

  • StatefulWidget: State can be changed, usually we can use shortcut keysstf

2.2 Customizing Widge

Custom oneThe text textSimilar to what we have in iOS, label, it’s set to text because it’scenterthewidgetSo center it.

We set the text style, font size, color, and bold display. We could also take thisoutFor other widgets to use the same style.

3. MaterialApp

Flutter provides many widgets to help you build applications that follow Material Design. The Material application starts with the MaterialApp Widget, which creates some useful widgets at the root of the application, including a Navigator that manages the widget stack (page routing stack) identified by strings. Navigator allows your application to move smoothly between pages.

3.1 MaterialApp

Let’s start by creating a custom MaterialApp ourselves

We can just use it= >Direct returnrunApp(), the text will display 2 bars, with one abovedebug. inMaterialAppThere is one in this widget by defaultdebugShowCheckedModeBannerThe default is true, so if we set false, it’s gone

3.2 scaffold

Scaffold is normally used with scaffold. Scaffold stands for scaffold

Similar to our iOS navigation controller, the top is the navigation bar, the middle isbodyAnd that’s the content, just to give you a quick overview.

4. ListView

ListView is similar to my tableView in iOS. ListView is a control we use a lot. It’s usually used with an array list.

4.1 Model Array

We define the model Car here and use the attributes name and imageUrlThe final modification, indicating that onlyModify a. We use it when we initializeconst Modify saidA static variable.

Let’s pull out the model and the data and put it into a model model

4.2 a listView

We’re creating oneListViewWidget, whereitemBuilderSimilar to what we have in iOScell, we can also pull it out and return a Text where the Text is the data in our previous CAR_model,item CountThat’s the number of rows.

  • tip

We don’t have to import car_model manuallyIf you don’t want to import a file every time you create a class, you can simply create objects as prompted. Enter the class name and thenAS does not need to be manually imported.If you have a fileThe import was deleted or not importedDirectly to the name of the class that reported the erroroption + EnterGet the import action done.

  • Display images

We use theContainerThat’s equivalent to what we have in iOSviewUsing image to load the network image, we set the background color and inner spacing.

  • Use a combination of

  • Adjust the spacing and add text styles

A simple listView is displayed.