Flutter – 刮刮卡查看应用

简介

Flutter 是 Google 推出的全新跨平台移动应用开发框架。它可以让开发者使用一套代码开发出同时运行在 iOS、Android、Web 和桌面端的应用程序。

本文将介绍如何使用 Flutter 开发一款刮刮卡查看应用。

功能

• 生成随机图片
• 刮去覆盖层
• 查看完整图片

实现

本项目使用 flutter 包中的 scratcher 插件实现。

首先，在 pubspec.yaml 中引入 scratcher 包：

dependencies:
  flutter:
    sdk: flutter
  scratcher: ^1.1.2

接着，在 main.dart 中建立一个包含了 Scratcher 组件的页面：

import 'package:flutter/material.dart';
import 'package:scratcher/scratcher.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scratcher Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final scratchKey = GlobalKey<ScratcherState>();
  final prizeImg = 'https://picsum.photos/300/300/?blur'; // 随机生成的图片

  void generateNewImage() => setState(() { prizeImg = 'https://picsum.photos/300/300';});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scratcher Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                generateNewImage();
                scratchKey.currentState.reset();
              },
              child: Text('Generate New Image'),
            ),
            SizedBox(height: 20),
            Scratcher(
              key: scratchKey,
              brushSize: 30,
              threshold: 20,
              color: Colors.black,
              onChange: (value) {},
              onThreshold: () => print('SCRATCHED !'),
              child: Image.network(prizeImg, height: 300, width: 300),
            ),
            SizedBox(height: 20),
            FlatButton(
              onPressed: () {
                if (scratchKey.currentState.status ==
                    ScratchStatus.revealed) {
                  showDialog(
                      context: context,
                      builder: (BuildContext context) {
                        return AlertDialog(
                          title: Text('Prize'),
                          content: Image.network(prizeImg, height: 300, width: 300),
                          actions: <Widget>[
                            FlatButton(
                              child: Text('OK'),
                              onPressed: () {
                                generateNewImage();
                                scratchKey.currentState.reset();
                                Navigator.of(context).pop();
                              },
                            ),
                          ],
                        );
                      });
                } else {
                  showDialog(
                      context: context,
                      builder: (BuildContext context) {
                        return AlertDialog(
                          title: Text('No Reveal'),
                          content: Text('Please scratch the card first !'),
                          actions: <Widget>[
                            FlatButton(
                              child: Text('OK'),
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                            ),
                          ],
                        );
                      });
                }
              },
              child: Text('Check Prize'),
            )
          ],
        ),
      ),
    );
  }
}

该页面含有下列组件：

• 一个可满足用户需求随机生成的“刮卡图片”
• 一个“生成新的图片”按钮
• 一个“查看奖励”按钮

组件解释：

• Scratcher：刮刮卡组件，带有覆盖层，支持用户刮去覆盖层，查看下面的完整图片。
• RaisedButton：生成新的图片的按钮
• FlatButton：查看奖励的按钮

总结

以上就是使用 Flutter 框架开发刮刮卡应用的方法。Flutter 拥有丰富的组件库，项目骨架代码较为简洁，并且开发效率高，是一个很好的跨平台移动应用开发框架。