FlutterStack詳解

Flutter是一款由Google開發的UI工具包，可以創建高性能、高保真度的移動應用程序。當然，Flutter也有自己的社區生態，FlutterStack就是其中之一。本文將從不同的方面對FlutterStack做詳細的闡述。

一、點擊穿透

點擊穿透指的是用戶在點擊了一個可交互的widget但其下方還有一個位於相同位置並且可交互的widget，此時會出現優先響應下層widget的現象。在Flutter開發中，為了解決這個問題，我們可以使用IgnorePointer或AbsorbPointer widget。IgnorePointer會忽略所有的用戶事件，AbsorbPointer會攔截所有的用戶事件。

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 下方widget
        Positioned(
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          child: GestureDetector(
            onTap: () {
              print("click bottom widget");
            },
          ),
        ),
        // 上方widget
        Positioned(
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          child: IgnorePointer(
            child: GestureDetector(
              onTap: () {
                print("click top widget");
              },
            ),
          ),
        ),
      ],
    );
  }

二、路由傳參

在Flutter中，路由管理是非常重要的，通過路由可以實現頁面之間的跳轉。在路由的跳轉過程中需要傳遞參數，這時可以使用FlutterStack庫中的ArgumentWidget和ArgumentExtractor。ArgumentWidget用來傳遞參數，ArgumentExtractor用來提取參數。例如：

  class SecondPage extends StatelessWidget with ArgumentWidget {
    final String name;

    SecondPage(this.name);

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("SecondPage"),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () {
              Navigator.pop(context, "Hello, $name!");
            },
            child: Text("返回並傳遞參數"),
          ),
        ),
      );
    }

    @override
    Map argument() {
      return {"name": name};
    }
  }

  class FirstPage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("FirstPage"),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () async {
              final result = await Navigator.push(context, MaterialPageRoute(builder: (ctx) => SecondPage("FlutterStack")));
              print(result);
              final argument = ArgumentExtractor.extract(result);
              print(argument["name"]);
            },
            child: Text("跳轉到SecondPage"),
          ),
        ),
      );
    }
  }

三、網絡請求

FlutterStack中提供了一個便捷的網絡請求工具類，可以方便的進行網絡請求。例如：

  static Future get(String url, {Map params, Map headers}) async {
    var client = new http.Client();
    try {
      var response = await client.get(_buildUrl(url, params), headers: headers);
      return _handleResponse(response);
    } catch (e) {
      return {"code": -1, "msg": e.toString()};
    } finally {
      client.close();
    }
  }

  static Future post(String url, {Map params, Map headers}) async {
    var client = new http.Client();
    try {
      var response = await client.post(url, body: params, headers: headers);
      return _handleResponse(response);
    } catch (e) {
      return {"code": -1, "msg": e.toString()};
    } finally {
      client.close();
    }
  }

使用方法也非常簡單：

  void _getData() async {
    final result = await HttpManager.get("https://www.baidu.com");
    print(result);
  }

四、國際化

在開發中，有時需要我們的應用支持多語言，FlutterStack提供了一個簡單易用的國際化工具。通過以下步驟，可以在應用中實現多語言：

1. 在pubspec.yaml文件中添加依賴項：

  dependencies:
    flutter_localizations:
      sdk: flutter

2. 在main函數中添加如下代碼：

  void main() {
    runApp(
      MaterialApp(
        localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          FallbackCupertinoLocalisationsDelegate(),
        ],
        supportedLocales: [const Locale('en', ''), const Locale('zh', '')],
        home: MyApp(),
      ),
    );
  }

3. 在lib目錄下創建一個l10n目錄，用於存放多語言文件，例如lib/l10n/messages_en.dart和lib/l10n/messages_zh.dart。

4. 在消息文件中添加多語言翻譯：

  class Messages {
    static const String appTitle = "FlutterStack";
    static const String welcomeMessage = "Welcome";
    static const String language = "Language";
    static const String english = "English";
    static const String chinese = "中文";

    static String localeMessage(String language) {
      return "你選擇了${language}";
    }
  }

5. 在需要使用的widget中使用FlutterStack提供的TranslationWidget，例如：

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(Messages.appTitle),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(Messages.welcomeMessage),
            SizedBox(height: 20),
            TranslationWidget(
              builder: (BuildContext context, String value) {
                return Text(value);
              },
              translation: Messages.language,
            ),
            SizedBox(height: 20),
            TranslationWidget(
              builder: (BuildContext context, String value) {
                return Text(value);
              },
              translation: Messages.localeMessage("FlutterStack"),
            ),
          ],
        ),
      );
    }
  }

五、動畫效果

Flutter的動畫效果非常豐富，通過FlutterStack中提供的AnimatedWidget和AnimationController可以實現各種複雜的動畫效果。例如：

  class AnimatedLogo extends AnimatedWidget {
    AnimatedLogo({Key key, Animation animation}) : super(key: key, listenable: animation);

    @override
    Widget build(BuildContext context) {
      final Animation animation = listenable;
      return Center(
        child: Container(
          margin: EdgeInsets.symmetric(vertical: 10),
          height: animation.value,
          width: animation.value,
          child: FlutterLogo(),
        ),
      );
    }
  }

  class LogoApp extends StatefulWidget {
    @override
    _LogoAppState createState() => _LogoAppState();
  }

  class _LogoAppState extends State with TickerProviderStateMixin {
    AnimationController controller;
    Animation animation;

    @override
    void initState() {
      super.initState();
      controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
      animation = Tween(begin: 0.0, end: 200.0).animate(controller);
      controller.forward();
    }

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("AnimatedLogo"),
        ),
        body: AnimatedLogo(
          animation: animation,
        ),
      );
    }

    @override
    void dispose() {
      controller.dispose();
      super.dispose();
    }
  }

六、總結

本文從多個方面對FlutterStack做了詳細的闡述，包括點擊穿透、路由傳參、網絡請求、國際化以及動畫效果等。通過對FlutterStack的了解，可以更加方便地進行Flutter開發，提高開發效率。