Flutter WhatsApp状态编辑插件whatsapp_status_editor的使用

Flutter WhatsApp状态编辑插件whatsapp_status_editor的使用

安装

在你的pubspec.yaml文件中添加whatsapp_status_editor依赖项，然后运行flutter pub get。

dependencies:
  whatsapp_status_editor:

导入

在你的Dart文件中导入该包：

import 'package:whatsapp_status_editor/whatsapp_status_editor.dart';

如何使用

以下是一个简单的示例，展示如何使用whatsapp_status_editor插件来编辑WhatsApp状态。

await Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const StatusEditor(),
  ),
).then((res) async {
  print(res);
  if (res != null) {
    print(res);
    filePath = res;
    setState(() {});
  }
});

预览

以下是使用插件编辑后的状态预览图：

示例代码

下面是完整的示例代码，展示了如何在Flutter应用中集成并使用whatsapp_status_editor插件。

import 'package:flutter/material.dart';
import 'dart:io';
import 'package:whatsapp_status_editor/whatsapp_status_editor.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Packages Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const StatusEditorPackage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class StatusEditorPackage extends StatefulWidget {
  const StatusEditorPackage({super.key});

  [@override](/user/override)
  State<StatusEditorPackage> createState() => _SatusyEditorPackageState();
}

class _SatusyEditorPackageState extends State<StatusEditorPackage> {
  bool isThumbnail = true;
  File filePath = File("");

  [@override](/user/override)
  Widget build(BuildContext context) {
    var theme = Theme.of(context);

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        centerTitle: true,
        title: const Text(
          "故事编辑器",
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Center(
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 0.0),
                  child: Material(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(22.0)),
                    color: Colors.blue,
                    clipBehavior: Clip.antiAlias, // 添加此属性
                    child: MaterialButton(
                      minWidth: 200.0,
                      height: 45,
                      color: Colors.blue,
                      child: const Text('故事编辑器',
                          style:
                              TextStyle(fontSize: 16.0, color: Colors.white)),
                      onPressed: () async {
                        await Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => const StatusEditor(),
                          ),
                        ).then((res) async {
                          print(res);
                          if (res != null) {
                            print(res);
                            filePath = res;
                            setState(() {});
                          }
                        });
                      },
                    ),
                  ),
                ),
              ),
              const SizedBox(
                height: 20,
              ),
              if (filePath.path != '')
                Center(
                  child: SizedBox(
                    width: 300,
                    height: 300,
                    child: Image.file(
                      File(
                        filePath.path,
                      ),
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}