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开发，提高开发效率。