Flutter สร้างขึ้นโดย google เพื่อใช้เป็นเครื่องมือในการพัฒนา Mobile App (Android + IOS)
เริ่มต้นใช้งาน :
ติดตั้งสิ่งจำเป็น
- sudo apt install adb git curl
1.Download Android Studio (
https://developer.android.com/studio)
2.แตกไฟล์แล้วเรียก run ไฟล์ android-studio/bin/studio.sh
3.เรียกเมนู SDK Manager มาเพื่อ download SDK version ที่ต้องการ
VS Code4.Download และติดตั้ง Visual Studio Code (
https://code.visualstudio.com/)
5.ติดตั้ง Extension ที่จำเป็น เช่น Flutter, Dart ฯลฯ (Search หา Nextflow Flutter Extension Pack จะมีรวมมาให้เลย)
Flutter6.Download และติดตั้ง Flutter (
https://flutter.dev/docs/get-started/install/linux)
7.ตั้งค่า PATH
7.1 ชั่วคราว :
- export PATH="$PATH:`pwd`/flutter/bin"
7.2 ถาวร : เพิ่มไปที่ .bashrc
- export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"
8.ตรวจสอบความพร้อม
9.เปิด VS Code กด CTRL+SHIFT+P เพื่อเรียกช่อง command
10.พิมพ์ flutter: new project เพื่อสร้าง app เริ่มต้น
- import 'package:flutter/material.dart';
-
- void main() {
- runApp(MyApp());
- }
-
- class MyApp extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- title: 'Flutter Demo',
- theme: ThemeData(
- primarySwatch: Colors.blue,
- visualDensity: VisualDensity.adaptivePlatformDensity,
- ),
- home: MyHomePage(title: 'Flutter Demo Home Page'),
- );
- }
- }
-
- class MyHomePage extends StatefulWidget {
- MyHomePage({Key key, this.title}) : super(key: key);
- final String title;
- @override
- _MyHomePageState createState() => _MyHomePageState();
- }
-
- class _MyHomePageState extends State<MyHomePage> {
- int _counter = 0;
- void _incrementCounter() {
- setState(() {
- _counter++;
- });
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- appBar: AppBar(
- title: Text(widget.title),
- ),
- body: Center(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: <Widget>[
- Text(
- 'You have pushed the button this many times:',
- ),
- Text(
- '$_counter',
- style: Theme.of(context).textTheme.headline4,
- ),
- ],
- ),
- ),
- floatingActionButton: FloatingActionButton(
- onPressed: _incrementCounter,
- tooltip: 'Increment',
- child: Icon(Icons.add),
- ), // This trailing comma makes auto-formatting nicer for build methods.
- );
- }
- }
-
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
