1. Introduction

❝

The address of the project: https://github.com/xfhy/WanAndroid-Flutter

❞

Some time ago, I took some spare time to learn the introduction of Flutter, and planned to write a simple project to practice. To be honest, only by actually writing can I truly feel the charm of Flutter. At the beginning of learning Flutter, it was very uncomfortable to write the layout, with various nesting and annoying. After a bit more writing, it still feels acceptable, and the widgets are still easy to operate.

Flutter is currently the most logical cross-platform solution in my opinion, requiring only Native to provide the canvas and Flutter to draw widgets directly on it. This alone makes Flutter very different from RN. RN also needs JS and Java to do the transfer, so with one more layer, it will definitely be much slower, and you can’t draw by yourself.

As for development and release, it supports JIT and AOT. normal development uses JIT to quickly hot load and transfer code changes to flutter app in time, which can greatly improve development efficiency. See if the UI and logic are correct in a timely manner, unlike native development which requires recompilation and takes a lot of time. Then Flutter uses AOT when releasing packages, running directly to Native(ARM) code efficiently.

There may be times when the Flutter needs to communicate with the native, such as using a camera, when the channel technology is used, but this is at the C++ level and has good performance.

So, learn about Flutter.

2. Download the demo

Download

3. The technical points

  • Package pull-up load, pull-down refresh
  • Dio makes network requests and encapsulates GET and POST
  • To encapsulate the banner
  • Future
  • Route, jump to the interface
  • Event_bus
  • toast
  • SharedPreference
  • .

4. Project screenshots

5. Problems encountered

5.1 Importing third-party Libraries

  1. First go to the official website package search.
  2. Find the plugin, click on the details, switch to Installing TAB, and then introduce the plugin in pubspec.yaml.
  3. On the project console, enter flutter pub get. To introduce tripartite library completion.

5.2 loading

When the page is loading, a Widget is required to hold space; otherwise, an error is reported if the Widget is empty.

5.3 Running on iOS

  1. First you need to install Xcode(7.8G)
  2. Then install Cocoapodssudo gem install cocoapods
  3. Then, under the ios project, executepod installIntroduce those dependencies
  4. Then open the info.plist in the ios project with AS, and click on the top right corner to open it with Xcode.
  5. Edit the Podfile to put the top of thePlatform: ios, '9.0'Comments let go
  6. Run it on the emulator.

5.4 How Can I Quickly Parse JSON

❝

Flutter does not support runtime reflection, so there is no library like Gson that automatically parses JSON to reduce parsing costs. Parsing JSON in Flutter needs to be done completely manually.

❞

To install FlutterJsonBeanFactory on AS, right-click New->JsonToDartBeanAction and enter the file name and JSON data. Automatically generate the bean object and its corresponding parsing code.

The idea is that it generates a JsonConvert, which can then choose which class object to parse based on the runtime type. Then the bean class is declared with JsonConvert mixed in, you can use JsonConvert methods directly, perfect.

5.5 Flutter ScrollView

A ScrollView is a view component with a scroll that itself consists of three parts

  • Scrollable – It listens for various user gestures and implements interaction design for scrolling.
  • Viewport – This visually designs scrolling by displaying only a portion of widgets within the scroll view.
  • Sliders – They are widgets that can be combined to create various scrolling effects, such as lists, grids, and extended titles.

Scroll is an abstract class, usually using CustomScrollView

CustomScrollView(

    shrinkWrap: true.

    / / content

    slivers: <Widget>[

        new SliverPadding(

            padding: const EdgeInsets.all(20.0),

            sliver: new SliverList(

                delegate: new SliverChildListDelegate(

                    <Widget>[

                        const Text('A'),

                        const Text('B'),

                        const Text('C'),

                        const Text('D'),

].

                ),

            ),

        ),

].

)

Copy the code

5.6 Handling Text Overflow

You can put it in a Row or Column, wrapped in Expanded, and then control the number of rows with maxLines and overflow: Textoverflow. ellipsis.

5.7 Let a ListView support pull-down refresh

Very simple, use the official RefreshIndicator, place the ListView as child, and implement a _pullToRefresh dropdown refresh method (do the dropdown refresh logic).

RefreshIndicator(

      child: listView,

      onRefresh: _pullToRefresh,

    );



Future<void> _pullToRefresh() {

    loadData();

    // Feature cannot return null

    return Future(() => LogUtil.d("lalala"));

  }

Copy the code

5.8 Obtaining the Screen width and height

MediaQuery.of(context).size.width,

MediaQuery.of(context).size.height

Copy the code

5.9 Encapsulating the General Title Bar

Title bar, every interface needs, so package one, as needed.

///get generic status bar

static AppBar getCommonAppBar(BuildContext context, String title, {double fontSize, List<Widget> actions}) {

if (title == null) {

  title = "";

}

return AppBar(

  leading: IconButton(

    icon: Icon(

      Icons.arrow_back,

      color: Colors.white,

    ),

    // Click return

    onPressed: () {

      if(context ! =null) {

        Navigator.pop(context);

      }

    },

  ),

  title: Text(

    title,

    style: TextStyle(

      color: Colors.white,

      fontSize: fontSize == null ? 18.0 : fontSize,

    ),

  ),

  // The title bar is centered

  centerTitle: true.

  // The action button on the right

  actions: actions == null ? <Widget>[] : actions,

);

}

Copy the code

5.10 Formatting A String

Dart format String, need to introduce the tripartite library sprintf, use as follows:

sprintf("lg/collect/%s/json"[15615]);

Copy the code

5.11 Obtaining the Android/iOS Local Directory

The third-party library path_Provider needs to be introduced to find common locations on the file system. It supports Android and iOS. Instead of writing native code, this tripartite library encapsulates it for us.

Directory tempDir = await getTemporaryDirectory();

String tempPath = tempDir.path;



Directory appDocDir = await getApplicationDocumentsDirectory();

String appDocPath = appDocDir.path;

Copy the code

5.12 Displaying a Dialog

The following method is under the Material package for dart.

// Display the dialog box

showDialog(

        context: context,

        barrierDismissible: false.

        builder: (_) {

          return SpinKitFadingCircle(

            color: AppColors.colorPrimary,

          );

        });



// Cancel the dialog box

Navigator.of(context).pop();

Copy the code

5.13 Simple way of spacing

You can do this using Padding and margin. There is another way to quickly add Space between columns and rows using a SizedBox, similar to Space on Android

SizedBox(width: 10.0),

Copy the code

5.14 Folding up the Keyboard

Sometimes you need to fold up the soft keyboard when you click certain buttons

FocusScope.of(context).requestFocus(FocusNode());

Copy the code

5.15 Make the ListView item ripple when clicked

Wrap the Item in InkWell