• First of all, recommend two articles, write very detailed, from which you can understand the principle, write very detailed!
    • Meituan technology team Flutter insights
    • The next generation of mobile platform framework -Flutter big Decryption

###App page details

HomePage; There are four nested pages, using TabBarandTabBarView“, like in AndroidFragment Viewpager

  • 1. The first page of the home page uses the interface of Douban film to request data and shows how to use dependencies in engineering and code. See the code below
flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS Style ICONS. Cupertino_icons: ^0.1.0 Fluttertoast: ^2.0.7 #"Packages get" to actively get a dependency dio: ^v1.0.3 # add network dependenciesCopy the code
  • 2. Demonstrate the placement of picture controls
  • 3. Display of comprehensive list
  • 4, the use of other controls Demo

// Create a default TAB controller for the given [child] control. return new DefaultTabController( length: 5, child: new Scaffold( appBar: new AppBar( backgroundColor: Color.black45, // title: titleWidget(), title: new Text(" home ",style: new TextStyle(color: color.white,fontSize: 22.00),), Actions: <Widget>[new IconButton(icon: new icon (icons.add_a_photo), onPressed: () { Navigator .of(context) .push(new MaterialPageRoute(builder: (context) { return new OtherPage(); })); }) ], bottom: New TabBar(isScrollable: true, labelStyle: new TextStyle(fontSize: 22.00,color: Colors. Red), indicatorPadding: EdgeInsets. Zero, labelColor: Colors. White, indicatorWeight: 4.0, unselectedLabelColor: Colors. BlueAccent, Tabs: [New Tab(text: "微 软 件 ",), New Tab(text:" tabbed ",), New Tab(text: "tabbed ",), New Tab(text:" tabbed ",) ,),), body: new TabBarView(children: [new TabOne(), new TabTwo(),new TabThree(),new TabFroth()]),)); ` ` `Copy the code

SimilarWordsPage is the process of clicking a button, then requesting a web page refresh.

  • 1, useTextFieldEquivalent to androidEdittext, but there are some changes in getting the value 
    New Expanded(Child: new TextField(// Autofocus: false, controller: _textController, decoration: New InputDecoration. Collapsed (hintText: "to please enter a search term," hintStyle: new TextStyle (color: Colors. Red)),),Copy the code
  • 2. How to exit the page Navigator.of(context).pop();
  • 3. How to use itToastHere I am using a tripartite dependency! The underlying principle is the use of reflection, the specific implementation of the method, interested students can see String res = await _channel.invokeMethod('showToast', params); 
    Fluttertoa.showtoast (MSG: "enter empty, please re-enter ", timeInSecForIos: 1, bgcolor: "# e74C3C ", textcolor: '# FFFFFF ');Copy the code
    • 4, the use of a frame Button, see the implementation of the code.
    • 5. The specific page is as follows

  • 6. The code is as follows
import 'dart:convert'; import 'dart:io'; import 'package:flutter/material.dart'; import 'package:flutter_app/bean/DataBean.dart'; import 'package:fluttertoast/fluttertoast.dart'; class SimilarWordsPage extends StatefulWidget { @override State<StatefulWidget> createState() { return new SimilarWordsPageState(); } } class SimilarWordsPageState extends State<SimilarWordsPage> { List<DataBean> datas = []; static int i=0; final TextEditingController _textController = new TextEditingController(); @override Widget build(BuildContext context) { return new Scaffold( appBar: findAppBar(), backgroundColor: Colors.black12, body: findBody(), ); } findBody() { return new Container( child: new Scaffold( body: new ListView.builder( itemCount: datas.length, itemBuilder: (BuildContext context, int position) { i=position; return getRow(position); },),)); } Widget findAppBar() { return new AppBar( title: new Container( child: new Row( children: <Widget>[ new Container( child: new FlatButton.icon( onPressed: Navigation.of (context).pop();}, icon: new icon (Icons. Close, color: colors.white30), label: New Text(""),), width: 60.0,), new Expanded(Child: new TextField(// Autofocus: false, controller: _textController, decoration: new InputDecoration. Collapsed (hintText: "please enter to find word", hintStyle: new TextStyle (color: // New GestureDetector(child: new Icon(Icons. Find_in_page),onTap: (){print("dd");}) new IconButton(icon: new icon (Icons. Find_in_page), onPressed: () { print(_textController.text); if (_textController.text.isEmpty) { Fluttertoast.showToast( msg: "TimeInSecForIos: 1, bgcolor: "# e74C3c ", textcolor: '#ffffff'); } else { FocusNode focusNode = new FocusNode(); FocusScope.of(context).requestFocus(new FocusNode()); Textcontroller. text, timeInSecForIos: 1, bgcolor: "#e74c3c", textcolor: '#ffffff'); getApiData(_textController.text); focusNode.unfocus(); } }) ], ), decoration: New BoxDecoration(borderRadius: const borderRadius. All (const radio.circular (4.0)), color: color.white10),); } Widget getRow(int I) {return new Padding(Padding: new EdgeInsets. All (10.0), // child: new Text("Row ${datas[i].key}",style: new TextStyle(color: Colors.orange,fontSize: Child: new Column(children: <Widget>[new Padding(Padding: New EdgeInsets. FromLTRB (0.0, 5.0, 0.0, 5.0), child: new Row(children: <Widget>[new Expanded(child: new OutlineButton( borderSide:new BorderSide(color: Theme.of(context).primaryColor), child: New Text(' entry = '+ i.tostring (),style: new TextStyle(color: Theme. Of (context).primarycolor),), onPressed: (){},)),],),), new Container(child: new Text(" 内 容 词 : "+ datas[I].key, style: new TextStyle(color: color: new TextStyle) Colors. Purple, fontSize: 12.00),), padding: new EdgeInsets. All (10.0),), new Container(child: New Text(" + datas[I]. Message, style: new TextStyle(color: color.cyan, fontSize: 15.00)), padding: New EdgeInsets. All (10.0),)],),); } @override void initState() { super.initState(); / / / http://dict-mobile.iciba.com/interface/index.php?c=word&m=getsuggest&nums=10&client=6&is_need_mean=1&word=sm/network request // The address of my Api is getApiData("sm"); } // the network request void getApiData(String tag) async {// Note that the package import is 'dart: IO '; var httpClient = new HttpClient(); var url = "http://dict-mobile.iciba.com/interface/index.php?c=word&m=getsuggest&nums=20&client=6&is_need_mean=1&word=" +  tag; var request = await httpClient.getUrl(Uri.parse(url)); var response = await request.close(); if (response.statusCode == HttpStatus.OK) { var jsonData = await response.transform(utf8.decoder).join(); setState(() { datas = DataBean.decodeData(jsonData); }); for (int i = 0; i < datas.length; i++) { print(datas[i].key); print(datas[i].message); }}}}Copy the code

The official Demo

About me

Some of the summary

  • widget The equivalent of View.WidgetInstance exists only between each frame, and between each frameFlutterWill actively create oneWidgetThe tree is used for rendering the next frame.
  • Android 中 ViewIt’s variable inFlutterIn theWidgetIs immutable. This property allowsFlutterIn theWidgetBecome very lightweight
  • aWidget It changes, so it’s stateful. But if you have a childWidgetIt’s stateful, but the fatherWidgetIs the immutable word fatherWidgetIt can also beStatelessWidget .
  • TatelessWidget andStatefulWidgetThe core content is the same, they are all reconstructed in every frame, the difference is StatefulWidgetThere is aStateObject, which can beStatefulWidgetStore data between frames.
  • Flutter 中UIThe layout is through in dartBuild in fileWidgetTree to achieve.
  • inAndroid In the useLinearLayoutPosition your parts vertically or horizontally. inFlutter In, you can use RoworColumnTo achieve the same effect.
  • inFlutterThe simplest way is to use ListView. in Flutter,ListViewboth ScrollViewagainAndroidIn the ListView.
  • Through the use of Column.Row 和 StackEtc.WidgetA combination ofRelativeLayoutThe effect of
  • FlutterIn, there are two ways to add a touch listener
  • ifWidgetEvent detection is supported, so you can pass a function to it and process it. For example,RaisedButtonThere is a onPressedparameter
  • ifWidget If event detection is not supported, theWidgetThe packing toGestureDetector , and passes the function toonTapParameters.
  • GestureDetectorWe can listen for a wide range of gestures
  • Make the most of your applicationMaterial Style component words can be put into the top componentsMaterialApp As an entry point to the application.MaterialApp As a more convenient component, the packaging is implemented in many waysMaterialThe components required for the style (e.gScaffold ).MaterialApp Is in theWidgetsAppOn the basis of the implementation
  • Flutter Packages are not automatically imported
  • Column Equivalent to relative layout RowLinear layout
  • Data structure presentation on the home page
  • HttpClientThe imported package isioThe inside of the
  • DEBUGInformal bags are much biggerBuilt build \ app \ outputs \ apk \ debug \ app - debug apk (31.9 MB).And formal package talent8.4 M.
  • To solve theBugIt was too painful.Flutter useideIt’s too painful
  • Visualize the overall structure of the layout in your head
  • Shut down the system’s own firewall, restart OK because of the need to travel, is to use the notebook development, lead to their notebook firewall has not been closed, really helpless, solve the firewall.
  • Mediaquery.of (context).sie.width / 1/4 of the screen
  • MaterialAppwithDebugThe tag

Thanks for the following information to help me

  • Android Developer Reference
  • Api interface query synonyms
  • Api interface douban movies
  • Packaging process

Ask for praise or ask for starsFlutterApp