Flutter是什麼語言

一、Flutter簡介

Flutter是一種開源框架，由Google編寫，可用於構建高性能、高保真度的移動應用程序，可以同時部署到iOS和Android平台，並且很快將支持Web、Windows和Mac OS等多個平台。Flutter的重點是提供一種快速、流暢、靈活的開發方式，使開發人員能夠創建出漂亮的、高品質的應用程序。

Flutter採用Dart語言編寫，這是一種由谷歌開發的面向對象編程語言，其語法簡單，易於學習，具有快速的開發速度和高效的執行效率，可以為移動應用提供出色的性能和穩定性。

下面是Flutter的Hello World程序，我們可以看到它是一個簡單的有狀態的無名Widget：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World!'),
        ),
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

二、Dart語言簡介

Dart是一種為客戶端和服務器端應用程序設計的面向對象編程語言，由Google主導開發，具有動態類型、類似Java的語法、面向對象的特點和高效的垃圾回收機制。Dart還支持異步編程，這使得它在處理高並發的情況下非常高效。

Dart語言提供了許多內置的數據類型、函數和控制結構，並且可以通過定義類來創建自定義類型。Dart的語法非常靈活，可以通過使用擴展方法和表達式來簡化代碼。Dart程序可以直接運行在虛擬機上，也可以編譯成JavaScript代碼，以便在Web端運行。

下面是Dart語言的示例程序，它可以計算斐波那契數列：

// 斐波那契數列的Dart實現
int fib(int n) {
  if (n == 0) {
    return 0;
  } else if (n == 1) {
    return 1;
  } else {
    return fib(n - 2) + fib(n - 1);
  }
}

void main() {
  for (var i = 0; i < 10; i++) {
    print(fib(i));
  }
}

三、Flutter與React Native的比較

Flutter與React Native都是用於構建跨平台移動應用的框架，它們的目標都是提供一種快速、直觀的方式來構建高性能的應用程序。但是，Flutter與React Native在實現方面存在一些差異：

• Flutter的UI框架是零件框架，而React Native是組件框架。
• Flutter使用Dart語言編寫，而React Native使用JavaScript。
• Flutter的布局和渲染處理是在客戶端進行的，而React Native使用Native橋接器來處理布局和渲染。

下面演示一個簡單的Flutter計數器應用程序，我們可以點擊按鈕來遞增計數器的值：

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,
      ),
      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 {
  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: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

四、Flutter與Native App的比較

Flutter與Native App在實現方面也存在一些差異：

• Flutter的界面都是用自己的UI繪製引擎渲染，而Native App使用的是操作系統提供的UI渲染引擎。
• Flutter的程序代碼在開發階段只需編寫一次，在部署到不同平台時，編譯器會對代碼進行優化，生成適用於不同平台的可執行文件，這樣的話，Flutter程序可以在不同平台上快速部署而不必修改程序代碼。而Native App則需要在不同平台上分別編寫相應的代碼。

下面演示一個在Flutter中使用SQLite數據庫的計數器應用程序，它可以在不同設備上保存計數器的值：

import 'package:flutter/material.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      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 {
  int _counter = 0;

  void _incrementCounter() async {
    final database = openDatabase(
      join(await getDatabasesPath(), 'counter.db'),
      onCreate: (db, version) {
        return db.execute(
          "CREATE TABLE counter(id INTEGER PRIMARY KEY, value INTEGER)",
        );
      },
      version: 1,
    );

    var count = await database.then((db) => db.query('counter'));
    if (count.isEmpty) {
      await database.then((db) => db.insert(
          'counter', {'value': _counter}
      ));
    } else {
      _counter = count[0]['value'];
    }

    setState(() {
      _counter++;
    });

    await database.then((db) => db.update(
        'counter', {'value': _counter},
        where: 'id = ?',
        whereArgs: [1]
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}