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
- First go to the official website package search.
- Find the plugin, click on the details, switch to Installing TAB, and then introduce the plugin in pubspec.yaml.
- 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
- First you need to install Xcode(7.8G)
- Then install Cocoapods
sudo gem install cocoapods - Then, under the ios project, execute
pod installIntroduce those dependencies - Then open the info.plist in the ios project with AS, and click on the top right corner to open it with Xcode.
- Edit the Podfile to put the top of the
Platform: ios, '9.0'Comments let go - 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 code5.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 code5.8 Obtaining the Screen width and height
MediaQuery.of(context).size.width,
MediaQuery.of(context).size.height
Copy the code5.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 code5.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 code5.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 code5.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 code5.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 code5.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 code5.15 Make the ListView item ripple when clicked
Wrap the Item in InkWell