As a Web front-end developer, I get tired of writing too much HTML/JS/CSS, and I always want to do something in my spare time. We all have a dream to do APP. You might have searched: I have also used ionic uniApp and other frameworks to package apps. Although there are various problems, it is still a good idea to use apps for multiple platforms at one time. Many companies have to use this development method to save development costs. So it is necessary to master one or two ways to develop app quickly as a web front-end technology.

Why did I choose to learn a FLUTTER unrelated to HTML?

I think this may be a trend, there will be a variety of terminal devices in the future, not limited to mobile phones, computers. May, as a normal user, you no longer need to mobile phones, computers, also can get information at any time, that is to say as long as it is able to display something flutter objects can be used, such as your cup, tea table, kitchen burning gas, fixed display devices such as refrigerators, mirror, also bearing the future of the new system or watches any mobile device, believe that Google’s vision.

First use of flutter

Dart instead of XXX. Vue, the file name should be XXX. Vue. Material \MaterialApp Is Scaffold and Stack related? When is scaffolding available? When do I use Stack? The vocabulary of these components is quite large. Students who are not good at English, like me, can understand the meaning of Chinese to better understand its role. In many cases, for a new language, it is not difficult to learn and use, but obscure English that stops us. How to solve the confusion: the first official document, the second Baidu, as for the learning exchange group had better not ask, use their own familiar way to get understandable answers.

layout

Through layout we can gradually understand widgets, flutter everything is a component and everything is an object. Everything you see in your app can be used as a component Widget (buttons, input fields, cards, lists, layouts, animations, etc.) that can be combined into a variety of components you need from different widgets. On the whole, the layout of flutter is more formal and restrictive. It is not as free as HTML/CSS, but the effects that HTML can display can be expressed by flutter. Ex. :

A red box centers the child element image to show contrast 

  html:
    <div style="text-align:center; display:inline-block; width:100px; height:100px; color:red">
      <img src="xxx" style="width:50px;"/> </div> flutter: The Container (alignment: alignment. Center, color: Colors. Red, width: 100.0, height: 100.0, child: new Image (Image: new NetworkImage('xxx'),width:50)
        )Copy the code

html:
<div style="width:100px; height:100px; color:red"> 
 <img src="xxx" style="display:block; margin:25px auto; width:50px;"> < / div > flutter: Container (alignment: alignment. Center, color: Colors. Red, width: 100.0, height: 100.0, center (child: new Image(image: new NetworkImage('xxx'),width:50)
   )
)Copy the code


Three “hello” in a horizontal layout 

html:
<ul class="width:500px; display:flex; justify-content:space-between;"> 
  <li style="background:red; text-align:center;"> 
     <span style="color:white; font-weight:bold;"<span style= "max-width: 100%; clear: both"background:green; text-align:left;"< p style= "max-width: 100%; clear: both; min-height: 1em"background:blue; text-align:right;"> hello < / li > < / ul > flutter: Container (width: 500, child: Row (mainAxisAlignment: mainAxisAlignment spaceBetween, children: <Widget>[ Container(color:Colors.red, child:Text('hello',
                      textAlign: TextAlign.center,
                      TextStyle(color:Colors.white,fontWeight:FontWeight.bold)
                         )
                 ),
        Container(color:Colors.red,child:Text('hello',textAlign: TextAlign.left,)),
        Container(color:Colors.red,child:Text('hello',textAlign: TextAlign.right,)) 
      ]
 )
)Copy the code


Third-party plug-ins

If you want to quickly implement some functions, you must use some third-party plug-in packages, such as NPM installation dependency packages

The pubspec.yaml command in the flutter project flutter get



The package.json command NPM install in the vue projectCopy the code




Preliminary completed presentation

Github.com/nullno/flut…





Android download address



Nullno. Making. IO/flutter – vmu…