Flutter: 10個必學的元件範例
前置作業: 更新dart版號: (因為default hello world 是2.7.0會導致錯誤)
To fix these errors, you will need to enable null safety. Open pubspec.yaml file in your project. You will find following setting in that file.
environment: sdk: ">=2.7.0 <3.0.0"
In Dart language documentation, you will find statement Sound null safety is available in Dart 2.12 and Flutter 2. You can change setting in pubspec.yaml file to use Dart 2.12 and not 2.7. Following is updated file.
environment:
sdk: ">=2.12.0 <3.0.0"
來開始寫幾個必須要做的範例:
----
1. BottomNavigationBar
link: https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html
額外要知道list的取值方法: _widgetOptions.elementAt(_selectedIndex).
2. Flutter Barcode Scanner
https://googleflutter.com/flutter-barcode-scanner/
error: unknown error type 'ScanResult' is not a subtype of type 'String' in typecast Scan.solution://scan barcode asynchronously
Future barcodeScanning() async {
try {
ScanResult barcode = await BarcodeScanner.scan();
setState(() {
process_barcode(barcode);
});
} on PlatformException catch (e) {
if (e.code == BarcodeScanner.cameraAccessDenied) {
setState(() {
this.barcode = 'No camera permission!';
});
} else {
setState(() => this.barcode = 'Unknown error: $e');
}
} on FormatException {
setState(() => this.barcode = 'Nothing captured.');
} catch (e) {
setState(() => this.barcode = 'Unknown error: $e');
}
}
//--
void process_barcode(ScanResult barcode) {
if (barcode != null) {
if (barcode.rawContent != null) {
this.barcode = barcode.rawContent;
}
}
}
上面的範例也可掃描QR Code.
3. route: Navigate to a new screen.
In Flutter, the Navigator manages a stack containing the app's routes. Pushing a route onto the Navigator's stack updates the display to that route. Popping a route from the Navigator's stack returns the display to the previous route.
https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2#5
4.Create a download button
https://flutter.dev/docs/cookbook/effects/download-button
學習如何build listview.,
Define a new stateful widget.
and Display the progress and a stop button while downloading.
這個難度較高,先試著做出來,細節再慢慢了解.
5 .Create an infinite scrolling ListView
https://flutter.dev/docs/get-started/codelab
https://github.com/flutter/samples/tree/master/infinite_list
主要是關於ListView.builder 的使用. 很基礎,但一定要會.
6. PhotoView : Flutter Photo View
https://pub.dev/packages/photo_view
https://resocoder.com/2019/05/04/flutter-photo-view-gallery-resize-rotate-image-carousel/
很重要.image元件的使用.
7. futures, async, await (Fetch data from the internet)
這真的超重要的.非同步處理,在手機上需要透過這個處理網路的需求.
https://flutter.dev/docs/cookbook/networking/fetch-data
Future<Album> fetchAlbum() async { final response = await http .get(Uri.parse('https://jsonplaceholder.typicode.com/albums/1')); if (response.statusCode == 200) { // If the server did return a 200 OK response, // then parse the JSON. return Album.fromJson(jsonDecode(response.body)); } else { // If the server did not return a 200 OK response, // then throw an exception. throw Exception('Failed to load album'); } }
----
8.Isolate. (獨立的執行緒,避免在UI thread執行煩重的工作.)
void createComputeFunction() async {
String answer;
answer = await compute(sayHelloFromCompute, 'Hello');
print("Answer from compute: $answer");
}
static String sayHelloFromCompute(String string) {
return string;
}parsing json in a background isolate using compute.
https://flutter.dev/docs/cookbook/networking/background-parsing#1-add-the-http-package
---
9. Cloud Function: CRUD (Create, Read, Update, Delete)
https://medium.com/@jackwong_60367/cloud-function-flutter-128b8c3695b4
----
10. cookbook: https://flutter.dev/docs/cookbook
留言
張貼留言