Flutter H5: 全平台開發再進化

一、簡介

Flutter是由Google開發的跨平台移動應用開發框架，出現於2017年。它的獨特之處在於使用Dart語言開發，通過自帶渲染引擎來繪製UI，省去了原生移動應用開發中常見的布局與樣式適配問題，使開發變得簡單、快速、與原生無異。不過早期Flutter只適用於iOS和Android兩個操作系統，而不支持Web端和桌面端應用開發。隨著Flutter的不斷升級完善，Flutter H5(end-to-end web support)便也應運而生。

Flutter H5是Flutter在目前最新的v2.5.0版本中加入的，其目標是讓Flutter在桌面端和Web平台開發方面的表現持平於其在移動設備上的表現，使得開發者可以輕鬆地跨多個平台構建應用。本文將從性能、組件、開發體驗、Flutter for Web、Flutter for desktop以及案例實戰等多個方面對Flutter H5進行詳細闡述。

二、性能

性能一直是Flutter的優點之一，Flutter H5也不例外。Flutter在移動應用上的表現十分出色，而對於Web應用來講也同樣如此。Flutter的動畫非常流暢，且渲染性能高於React Native，尤其是在Android系統上。在Web平台上Flutter的渲染性能也十分優秀，無論是在載入或者渲染時都能保持流暢。這些得益於Flutter獨特的架構，即將widget作為事件重建的單元，一旦事件發生，就會重建widget樹來避免DOM操作，因此Flutter在處理動畫性能上和其他網頁技術相比是優秀的。

下面是一個簡單的Flutter H5動畫例子：

import 'package:flutter_web/material.dart';

class MyAnimation extends StatefulWidget {
  @override
  _MyAnimationState createState() => _MyAnimationState();
}

class _MyAnimationState extends State
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation _animation;

  @override
  void initState() {
    _controller =
        AnimationController(duration: Duration(seconds: 2), vsync: this);
    _animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    _controller.forward();
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Transform.rotate(
          angle: _animation.value * 2 * 3.14,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
        );
      },
    );
  }
}

三、組件

Flutter H5可以在移動端和Web平台共享相同的組件，減少了在不同平台上重新編寫UI的工作量。Flutter的組件系統是其成功的關鍵，Flutter組件是由一系列基礎組件衍生而來，大到頁面布局，小到按鈕等視圖元件，數量龐大且常維護，幾乎覆蓋所有的開發需求，且維護方便、耗時少。

下面是一個簡單的Flutter H5組件的例子：

import 'package:flutter_web/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text(
          'Hello, World!',
          style: TextStyle(
            fontSize: 24.0,
            fontWeight: FontWeight.bold,
            color: Colors.blue,
          ),
        ),
        SizedBox(height: 20.0),
        RaisedButton(
          onPressed: () {},
          child: Text('Click Me'),
        ),
      ],
    );
  }
}

四、開發體驗

Flutter H5和Flutter for mobile有類似的開發體驗。Flutter框架的命令行工具包包括了很多有用的命令，如創建項目，運行應用程序等等。這些工具可以提高開發效率並加速迭代。此外Flutter和Dart的調試工具使得代碼調試和性能優化更容易和快速。

五、Flutter for Web

Flutter for Web是Flutter在Web端的一個重要組成部分。它使用dart: html來訪問DOM和瀏覽器API。Flutter for Web雖然還處於預覽階段，但已經可以使用穩定的API來實現功能強大的Web應用。

下面是一個簡單的Flutter for Web的例子：

import 'package:flutter_web/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter for Web',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter for Web'),
        ),
        body: Center(
          child: Text(
            'Hello, World!',
            style: TextStyle(fontSize: 24.0),
          ),
        ),
      ),
    );
  }
}

六、Flutter for desktop

Flutter for desktop是Flutter在桌面端的一個實驗性的開發項目。Flutter for desktop提供了一個高性能的跨平台UI框架，可以用來構建高質量的桌面應用程序。Flutter for desktop支持Windows、macOS、Linux和ChromeOS平台以及多屏幕和解析度，且可以與主流的桌面技術（如OpenGL）進行集成。

下面是一個簡單的Flutter for desktop的例子：

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/foundation.dart' as foundation;
import 'package:flutter/gestures.dart' as gestures;

bool _debugMouseTrackerCreated = false;

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter for desktop',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new MyListView(),
    );
  }
}

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        return new ListTile(
          title: new Text('Title $index'),
          subtitle: new Text('Subtitle $index'),
          onTap: () => print('Tile $index tapped!'),
        );
      },
    );
  }
}

void main() {
  foundation.debugPaintSizeEnabled = true;
  runApp(new MyApp());
}

七、案例實戰

下面是一個用Flutter H5實現的簡單的電商網站的例子。

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart' as foundation;
import 'dart:math';
import 'dart:html' as html;

void main() {
  foundation.debugPaintSizeEnabled = false;
  runApp(EcommerceApp());
}

class EcommerceApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'E-Commerce',
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Welcome to E-Commerce',
              style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 40),
            RaisedButton(
              onPressed: () {
                html.window.location.href = 'https://www.your-ecommerce-site.com';
              },
              child: Text('Go to E-commerce site'),
            ),
          ],
        ),
      ),
    );
  }
}

結論

Flutter H5是一個功能強大、性能卓越的跨平台應用開發框架。它可以幫助開發者構建無縫體驗的應用程序，並節省時間和資金成本。Flutter H5可以使得開發者輕鬆地構建應用程序，無論是在移動端、桌面端還是Web平台上，同時又保持了良好的性能和可擴展性。相信未來Flutter H5會越來越完善，開發者們也可以嘗試在未來的項目中使用Flutter H5來實現跨平台應用開發。

原創文章，作者：WTOXO，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/369500.html