Flutter小部件库插件weirdgets的使用

Flutter小部件库插件weirdgets的使用

简介

weirdgets 是一个由 XPEHO Mobile 提供的Flutter小部件库，包含了一些非常规的小部件（widgets），旨在为开发者提供一些有趣且独特的UI组件。这些小部件不仅增加了应用程序的趣味性，还可能为某些特定需求提供解决方案。

可用的weirdgets

1. Diagonal

如果你厌倦了总是用行和列来组织你的小部件，试试 Diagonal 吧！它以一种新的、有趣的方式展示一个小部件列表。

[@override](/user/override)
Widget build(BuildContext context) {
    return Diagonal(
        children: [
            // 在这里添加你想要显示的小部件
        ],
        // 选择四个方向之一 (bottomRight, bottomLeft, topLeft, topRight)
        direction: DiagonalDirection.bottomRight,
    );
}

2. Multiggle

两个位置不够用？好消息！我们为你创建了一个 Multiggle，它是一个具有多个位置的切换器。

class MyWidget extends StatelessWidget {
    // 创建一个控制器来控制 Multiggle
    final MultiggleController _multiggleController = MultiggleController();

    [@override](/user/override)
    Widget build(BuildContext context) {
        return Multiggle(
            // 添加控制器
            controller: _multiggleController,
            // 指定 Multiggle 应该提供的位置数量
            count: 42,
            // 0 是第一个位置
            initialPosition: 0,
            // 位置改变时的回调
            onPositionChanged: (position) {
                // 处理位置变化
            },
            // 主题颜色
            backgroundColor: Colors.greenAccent,
            borderColor: Colors.white,
            indicatorColor: Colors.green,
        );
    }

    void _changePosition(int newPosition) {
        // 通过代码设置位置
        _multiggleController.setPosition(newPosition);
    }
}

3. Troggle

有时候我们想说“也许”而不是“是”或“否”。这就是为什么我们创建了 Troggle，它是一个具有第三个位置的切换器，可以选择“是”、“否”和“也许”。

[@override](/user/override)
Widget build(BuildContext context) {
    return Troggle(
        width: 42,
        height: 42,
        quarterTurns: 1,
        onPositionChanged: (trogglePosition) {
            // 处理位置变化
        },
    );
}

4. JaimPaMaggle

厌倦了摆姿势拍照？只需添加这个小部件，咔嚓一声，一张照片就出现了！享受更好的自拍吧！

[@override](/user/override)
Widget build(BuildContext context) {
    return JaimPaMaggle(
        label: 'Cheeeeeese',
        // 如果设备有多个摄像头，显示摄像头选择
        showCameraSelection: true,
    );
}

5. RevertedTextField

考虑到无障碍性，我们为从右到左书写的人们创建了 RevertedTextField。即使你使用镜像字母表，也应该能够创建Flutter应用。

[@override](/user/override)
Widget build(BuildContext context) {
    return RevertedTexfield();
}

6. UpsideDownTextField

为了照顾在南半球倒着工作的开发者朋友们，我们创建了 UpsideDownTextField，这样你可以写字而不会感到脖子疼痛或斜颈。

[@override](/user/override)
Widget build(BuildContext context) {
    return UpsideDownTexfield();
}

7. RadioButton

好消息，Flutter社区！我们终于修复了 RadioButton 小部件。现在它可以播放广播了！

[@override](/user/override)
Widget build(BuildContext context) {
    return RadioButton(
        radios: {
            "MyFMradio": "http://radioURL",
            "MyAMradio": "https://radioURL",
            "MyOtherRadio": "http://radioURL",
        },
    );
}

8. ValidationsButton

担心误点击？使用 ValidationsButton！这个小部件提供了多次确认，防止用户做出不明确的选择。

[@override](/user/override)
Widget build(BuildContext context) {
    return ValidationsButton(
        validationMessages: const [
            "确认",
            "这是误点击吗？",
            "你确定吗？",
            "你应该再考虑一下",
            "不，拜托不要这样做",
            "好的，但也许你应该再考虑一下",
            "如果你确认，取消将不可用",
            "再来一次",
            "已经很接近了",
            "最后一次机会！",
        ],
        onValidation: () {
            // 确保用户确实确认了他的选择
        },
    );
}

9. FirstAprilFish

愚人节快乐！正如一些线索所暗示的那样，这个库确实是一个玩笑。但我们还是为你创建了一个最后一个 FirstAprilFish 小部件，如果你想拍照时带上一条四月鱼，那就享受吧！

[@override](/user/override)
Widget build(BuildContext context) {
    return FirstAprilFish(
        label: 'FirstAprilFish',
        showCameraSelection: true,
    );
}

安全要求

iOS & macOS 安全要求

默认情况下，iOS 和 macOS 不能加载 HTTP URL。要避免此限制，必须编辑 .plist 文件并添加以下内容：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

macOS 外发连接

默认情况下，Flutter macOS 应用程序不允许外发连接，因此无法播放来自互联网的音频流。要解决此问题，需在 macOS 应用程序的 .entitlements 文件中添加以下内容：

<key>com.apple.security.network.client</key>
<true/>

Android 安全要求

默认情况下，Android 不能加载 HTTP URL。要避免此限制，必须在 android/app/src/main/AndroidManifest.xml 文件中添加以下内容：

<uses-permission android:name="android.permission.INTERNET" />
<application
    android:usesCleartextTraffic="true">
</application>

完整示例Demo

以下是一个完整的示例应用，展示了如何使用 weirdgets 中的部分小部件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Weirdgets Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Weirdgets Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final MultiggleController _multiggleController = MultiggleController();

  void _changeMultigglePosition(int newPosition) {
    _multiggleController.setPosition(newPosition);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // Diagonal
            Diagonal(
              children: [
                Container(
                  color: Colors.red,
                  height: 100,
                  child: Center(child: Text('Item 1')),
                ),
                Container(
                  color: Colors.green,
                  height: 100,
                  child: Center(child: Text('Item 2')),
                ),
                Container(
                  color: Colors.blue,
                  height: 100,
                  child: Center(child: Text('Item 3')),
                ),
              ],
              direction: DiagonalDirection.bottomRight,
            ),
            SizedBox(height: 20),
            // Multiggle
            Multiggle(
              controller: _multiggleController,
              count: 5,
              initialPosition: 0,
              onPositionChanged: (position) {
                print('Multiggle position changed to $position');
              },
              backgroundColor: Colors.greenAccent,
              borderColor: Colors.white,
              indicatorColor: Colors.green,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _changeMultigglePosition(3),
              child: Text('Set Multiggle Position to 3'),
            ),
            SizedBox(height: 20),
            // Troggle
            Troggle(
              width: 100,
              height: 50,
              quarterTurns: 1,
              onPositionChanged: (position) {
                print('Troggle position changed to $position');
              },
            ),
            SizedBox(height: 20),
            // JaimPaMaggle
            JaimPaMaggle(
              label: 'Cheeeeeese',
              showCameraSelection: true,
            ),
            SizedBox(height: 20),
            // RevertedTextField
            RevertedTexfield(),
            SizedBox(height: 20),
            // UpsideDownTextField
            UpsideDownTexfield(),
            SizedBox(height: 20),
            // RadioButton
            RadioButton(
              radios: {
                "MyFMradio": "http://radioURL",
                "MyAMradio": "https://radioURL",
                "MyOtherRadio": "http://radioURL",
              },
            ),
            SizedBox(height: 20),
            // ValidationsButton
            ValidationsButton(
              validationMessages: const [
                "确认",
                "这是误点击吗？",
                "你确定吗？",
                "你应该再考虑一下",
                "不，拜托不要这样做",
                "好的，但也许你应该再考虑一下",
                "如果你确认，取消将不可用",
                "再来一次",
                "已经很接近了",
                "最后一次机会！",
              ],
              onValidation: () {
                print('User confirmed the action');
              },
            ),
            SizedBox(height: 20),
            // FirstAprilFish
            FirstAprilFish(
              label: 'FirstAprilFish',
              showCameraSelection: true,
            ),
          ],
        ),
      ),
    );
  }
}