This folder allows you to quickly find what you need to learn about Flutter!!

🎅 create a Flutter project 🎅

Here we create the Flutter project using the Android Studio installed Flutter plugin

Android Studio main screen -> Create Flutter Project

Note: 👆 the four functions in the screenshot above

  • Flutter Application: Create aFlutterApplication engineering
  • Flutter plugin: This is for givingAndroid 和 iOSUse when providing plug-in applications (exposed excuses)
  • Flutter Package: Create aThe Dart componentsRelease topubTo provide easy development of some third party libraries
  • Flutter Module: Generally used for mixed development, embedded intoAndroid 和 iOSWork in progress!

Once created, we can run Flutter for the first time to feel the Flutter classic default page

🎅 the declaration of Flutter is 🎅

  • Imperative programming: Tell the “machine” how to do things so that whatever you want it to do will happen.
  • Declarative programming: Tell the machine what you want and let the machine figure out how to do it.

Maybe you can’t figure out what imperative programming is and what declarative programming is by using a view UI as 🌰, okay

First let’s look at a representative of imperative programming: object-c

    UIView *view = [[UIView alloc] init];
    view.frame   = self.view.bounds;
    view.backgroundColor = [UIColor orangeColor];
Copy the code

We tell the machine: The layout of the view is self.view. The background color of the bounds view is orangeColor and if you need to change the view, you usually need to use the selector findViewById or something like that to get the instance view and ownership of the ViewB, And call the associated modified method (and implicitly invalidate it).

   view.backgroundColor = [UIColor blueColor];
Copy the code

Since the actual source of the UI may have a longer lifetime than the instance View itself, you may also need to copy this configuration in the view constructor

In the declarative style, the view configuration (such as the Widget of the Flutter) is immutable; it is simply a lightweight “blueprint”. To change the UI, the widget triggers a rebuild on itself (the most common method in Flutter is to call setState() on the StatefulWidgets component) and constructs a new widget subtree.

// Declarative style
return ViewB(
  color: red,
  child: ViewC(...),
)
Copy the code

It is clear that the two modes focus on completely different points! If there is not quite understand, might as well see twice will have a feeling!!

🎅 Preliminary experience of Flutter Project 🎅

With some understanding of the declarative syntax above, let’s start playing around with the code. First of all, you may understand the code, but only at a cursory level. Now let’s learn, bit by bit! First kill the entire program some code, leave 👇

Let’s start writing a simple code

🎄① Experience the Flutter text component 🎄

#import 
      
import 'package:flutter/material.dart';

// The main function the program runs (entry 0)
void main() {
  UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate Class]));
  // Because the world of Flutter is full of parts
  // Here we simply use Center to write a text
  runApp(Center(
      child: Text(
    'Study harmoniously without being impatient'./ / text
    textDirection: TextDirection.ltr, // Alignment
    style: TextStyle(
      fontSize: 40.0.// Font size
      color: Colors.red, // Red font
      fontWeight: FontWeight.w400, // The size of the font)))); }Copy the code

Doesn’t it feel refreshing that the code of Flutter itself is relatively easy? After all, don’t you find that the syntax structure of Flutter tends to be larger and more unified?

🎄② Experience the Flutter navigation bar 🎄

class KCBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold( / / nav
        appBar: AppBar( / / the navigation bar
          title: Text('KCFlutterBar',style: TextStyle(color: Colors.white),), ), body: KCWidget(), floatingActionButton: FloatingActionButton(), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling, ), theme: ThemeData( primaryColor: Colors.orange ), ); }}Copy the code

Let’s have a look at the effect of the display, or relatively OK!

You’re smart enough to know that as you write, the code is still a little bit awkward. Here I recommend you a few shortcut keys, convenient for you to quickly beautiful programming

  • Command + o: Global search
  • command + option + l: Formatting code
  • command + l: Comment code
  • command + -: Collapses and expands code
  • command + [: code return
  • command + ]: Code forward
  • cmd + C / cmd + delete: delete rows
  • ctr + alt + I: Auto indent alignment
  • opt + sft + up/down: Moves the code up and down
  • ctrl + tab: Switch files
  • shift + command + enter: automatically add semicolon at the end of line, if automatically add “(){}”
  • cmd + N: Quickly generate getters/setters, constructors, toString() methods, etc
  • cmd + J: Quickly generate template code blocks, such as if,while,return
  • opt + cmd + TSurround with…… Surround with…… Catch,while, etc
  • opt + ctr + o: Deletes unused import files
  • option + enter: Automatically imports the packages used
  • stless: Create a newStatelessWidget
  • stful: Create a newStatefulWidget

🎄③ The flutter listView page is 🎄

class KCListView extends StatelessWidget {

  Widget _itemForRow(BuildContext context, int index) {
    return Container(
      color: Colors.white,
      margin: EdgeInsets.fromLTRB(10.10.10.10),
      child: Column(
        children: <Widget>[
          Image.network(carDatas[index].imageUrl),
          SizedBox(height: 10),
          Text(
            carDatas[index].name,
            style: TextStyle(
                fontSize: 18.0,
                fontWeight: FontWeight.w800,
                fontStyle: FontStyle.values[1]),
          ),
          SizedBox(height: 10),,),); }@override
  Widget build(BuildContext context) {
    returnListView.builder( itemBuilder: _itemForRow, itemCount: carDatas.length, ); }}Copy the code

Load the list structure using the navigation style to load the data. If you follow along, you can easily feel the power of declarative syntax. It’s easy to write an application if you know how to write it with a previous understanding of UI layout (⚠️ flexible box layout, Flex ⚠️)

If you also tap into the code, you can go to github: Flutter column code, where the whole column code is kept up to date. If you like, please like 👍

🎅 4. Conclusion 🎅

This article about the initial experience of Flutter may be because you are just a little Flutter white feeling is not strong, but it doesn’t matter how much you tap on Flutter, the more you really tap on this thing, the more you will feel, the better to tap muscle memory! The simplicity of the Flutter code is strong. You’ll grow to love tapping the Flutter code!

Come on! Let’s tap Flutter together: Github: Flutter column code

We will dive into Flutter details at the beginning of our next article! Don’t get lost

Dry goods address: like can be a key three