Flutter : เครื่องมือสร้าง Mobile App

 Flutter สร้างขึ้นโดย google เพื่อใช้เป็นเครื่องมือในการพัฒนา Mobile App (Android + IOS)

เริ่มต้นใช้งาน :
ติดตั้งสิ่งจำเป็น

1. sudo apt install adb git curl

Android Studio
1.Download Android Studio (https://developer.android.com/studio)
2.แตกไฟล์แล้วเรียก run ไฟล์ android-studio/bin/studio.sh
3.เรียกเมนู SDK Manager มาเพื่อ download SDK version ที่ต้องการ

VS Code
4.Download และติดตั้ง Visual Studio Code (https://code.visualstudio.com/)
5.ติดตั้ง Extension ที่จำเป็น เช่น Flutter, Dart ฯลฯ (Search หา Nextflow Flutter Extension Pack จะมีรวมมาให้เลย)

Flutter
6.Download และติดตั้ง Flutter (https://flutter.dev/docs/get-started/install/linux)
7.ตั้งค่า PATH
7.1 ชั่วคราว :

1. export PATH="$PATH:`pwd`/flutter/bin"

7.2 ถาวร : เพิ่มไปที่ .bashrc

1. export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"

8.ตรวจสอบความพร้อม

1. flutter doctor

9.เปิด VS Code กด CTRL+SHIFT+P เพื่อเรียกช่อง command
10.พิมพ์ flutter: new project เพื่อสร้าง app เริ่มต้น

1. import 'package:flutter/material.dart';
2.  
3. void main() {
4.   runApp(MyApp());
5. }
6.  
7. class MyApp extends StatelessWidget {
8.   @override
9.   Widget build(BuildContext context) {
10.     return MaterialApp(
11.       title: 'Flutter Demo',
12.       theme: ThemeData(
13.         primarySwatch: Colors.blue,
14.         visualDensity: VisualDensity.adaptivePlatformDensity,
15.       ),
16.       home: MyHomePage(title: 'Flutter Demo Home Page'),
17.     );
18.   }
19. }
20.  
21. class MyHomePage extends StatefulWidget {
22.   MyHomePage({Key key, this.title}) : super(key: key);
23.   final String title;
24.   @override
25.   _MyHomePageState createState() => _MyHomePageState();
26. }
27.  
28. class _MyHomePageState extends State<MyHomePage> {
29.   int _counter = 0;
30.   void _incrementCounter() {
31.     setState(() {
32.       _counter++;
33.     });
34.   }
35.  
36.   @override
37.   Widget build(BuildContext context) {
38.     return Scaffold(
39.       appBar: AppBar(
40.         title: Text(widget.title),
41.       ),
42.       body: Center(
43.         child: Column(
44.           mainAxisAlignment: MainAxisAlignment.center,
45.           children: <Widget>[
46.             Text(
47.               'You have pushed the button this many times:',
48.             ),
49.             Text(
50.               '$_counter',
51.               style: Theme.of(context).textTheme.headline4,
52.             ),
53.           ],
54.         ),
55.       ),
56.       floatingActionButton: FloatingActionButton(
57.         onPressed: _incrementCounter,
58.         tooltip: 'Increment',
59.         child: Icon(Icons.add),
60.       ), // This trailing comma makes auto-formatting nicer for build methods.
61.     );
62.   }
63. }
64.  

11.ลักษณะการทำงาน คือ
11.1 function main เรียกใช้ MyApp ซึ่งเป็นหน้าหลักที่ไม่เก็บค่า (StateLess)
11.2 MyApp มี 2 ส่วน คือ 1.title เป็นส่วนที่มองไม่เห็นจะเห็นเฉพาะตอนเรียกดู app list 2. home ซึ่งเรียกหน้า MyHomepage มาแสดงผลอีกที
11.3 MyHomepage เป็นส่วนที่มีการแสดงผลและเก็บค่า (StateFull) มี 2 ส่วนคือ 1.title แบบเดียวกับ MyApp 2.ส่วนแสดงผล ซึ่งประกอบไปด้วย appBar กับ body

เพิ่มเติม :
1.เปลี่ยนชื่อ App, Package ที่ไฟล์ AndroidManifest.xml และ build.gradle (ต้องเปลี่ยนโครงสร้าง directory ให้เหมือน package ด้วย)
2.package ช่วยสร้าง icon : https://pub.dev/packages/flutter_launcher_icons
3.สร้างไฟล์สำหรับติดตั้งด้วยคำสั่ง flutter build apk