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執行煩重的工作.)

Each Isolate is single-threaded and can only manage the memory and EventLoop allocated for it. 
 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

上面提到的幾個程式都只是片段,一個好的flutter app工程師需要把cookbook中所有範例都做過一遍,並且要理解其中原理.

學習一個新的語言本來就不是"一蹴可幾"之事.
尤其Flutter本身就很難,除了你要有dart的基礎外,當你做每個flutter範例時,會感到困難重重,是很正常的事.不要隨便就放棄了.
試著把每一個範例都做熟,慢慢的你就會發現,看code越來越看得懂了.












留言

這個網誌中的熱門文章

最爛的銀行服務-玉山銀行

更改google drive預設存放目錄位置Change Google Drive Default Folder Location in Windows

ios app 上架時app icon要注意事項

SMR疊瓦式hdd致命缺陷被解決????!!!

Admob的 app-ads.txt終於成功動作了

Mark App Design Apps - Terms and Privacy Policy (服務條款,隱私權政策)

Gmail 永久刪除大型電子郵件

Android studio gradle error: Duplicate class com.google.protobuf...

來談談admob廣告政策違規的不好體驗

app bundle and bundletool. 關於aab安裝問題