Flutter量子点效果插件quantum_dots的使用

Flutter量子点效果插件quantum_dots的使用

Quantum-Dots

此设计系统专为Flutter平台设计，并基于Wippy Global产品的设计。

架构

flowchart TB
    subgraph SDK["Quantum-Dots SDK"]
        direction TB
        
        subgraph Foundation["Foundation Layer"]
            direction TB
            Colors["Colors"]:::foundation
            Fonts["Fonts"]:::foundation
            Gradients["Gradients"]:::foundation
            Icons["Icons"]:::foundation
        end

        subgraph Common["Common Widget Layer"]
            direction TB
            Animation["Animation Systems"]:::common
            NetworkImage["Network Image"]:::common
            ButtonGradient["Button Gradient"]:::common
        end

        subgraph Components["Component Categories"]
            direction TB
            
            subgraph Input["Input Components"]
                direction TB
                TextField["TextField"]:::input
                TextArea["TextArea"]:::input
                ChatInput["ChatInput"]:::input
                Dropdown["Dropdown"]:::input
            end

            subgraph Feedback["Feedback Components"]
                direction TB
                Toast["Toast"]:::feedback
                Spinner["Spinner"]:::feedback
                Progress["Progress"]:::feedback
                EmptyStates["Empty States"]:::feedback
            end

            subgraph Layout["Layout Components"]
                direction TB
                Header["Header"]:::layout
                BottomSheet["BottomSheet"]:::layout
                Popup["Popup"]:::layout
            end

            subgraph Interactive["Interactive Components"]
                direction TB
                Buttons["Buttons"]:::interactive
                Chips["Chips"]:::interactive
                Badge["Badge"]:::interactive
                Tooltip["Tooltip"]:::interactive
            end
        end
    end

    %% Relationships
    Foundation --> Common
    Foundation --> Components
    Common --> Components

    %% Styling
    classDef foundation fill:#3498db,stroke:#2980b9,color:white
    classDef common fill:#2ecc71,stroke:#27ae60,color:white
    classDef input fill:#e74c3c,stroke:#c0392b,color:white
    classDef feedback fill:#f1c40f,stroke:#f39c12,color:white
    classDef layout fill:#9b59b6,stroke:#8e44ad,color:white
    classDef interactive fill:#1abc9c,stroke:#16a085,color:white

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用quantum_dots插件：

import 'package:flutter/material.dart';
import 'package:quantum_dots/qds_badge.dart';
import 'package:quantum_dots/qds_bottom_sheet.dart';
import 'package:quantum_dots/qds_button.dart';
import 'package:quantum_dots/qds_chips.dart';
import 'package:quantum_dots/qds_common_widget.dart';
import 'package:quantum_dots/qds_foundation.dart';
import 'package:quantum_dots/qds_header.dart';
import 'package:quantum_dots/qds_input.dart';
import 'package:quantum_dots/qds_popup.dart';
import 'package:quantum_dots/qds_progress.dart';
import 'package:quantum_dots/qds_spinner.dart';
import 'package:quantum_dots/qds_tooltip.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Quantum Dots DesignSystem',
      home: DesignSystemSamplePage(),
    );
  }
}

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

  List<Widget> _buildAllDesignSystemComponents(BuildContext context) {
    return [
      const SizedBox(height: 50),
      ..._buildImageSlotComponents(),
      ..._buildWippyTooltipComponents(context),
      ..._buildWippyBadge(),
      ..._buildWippyBottomSheetComponents(context),
      ..._buildWippyDropDownComponents(),
      ..._buildWippyHeaderComponents(),
      ..._buildWippyProgressbarComponents(),
      ..._buildWippyToastComponents(context),
      ..._buildWippyPopupComponents(context),
      ..._buildWippyEmptyStatesComponents(context),
      ..._buildWippySpinnerComponents(context),
      ..._buildWippyBoxButtonComponents(),
      ..._buildWippyChipsComponents(),
      ..._buildWippyTextFieldComponents(),
      ..._buildWippyTextAreaComponents(),
      ..._buildWippyChatInputComponents(),
      const SizedBox(height: 50),
    ];
  }

  Widget _buildImageSlotComponents() {
    return SizedBox(
      height: 212,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: [
          ImageSlotComponent(
            slot: PlusSlot(
              emptyIcon: const Icon(
                Icons.add_a_photo,
                color: wippyGray400,
              ),
              slotIcon: const Icon(
                Icons.add,
                color: wippyGray400,
              ),
              slotBadge: const Icon(Icons.first_page),
              onAdd: () {},
            ),
            width: 160,
            height: 212,
          ),
          const SizedBox(width: 12),
          ImageSlotComponent(
            slot: EmptySlot(
              emptyIcon: const Icon(
                Icons.add_a_photo,
                color: wippyGray400,
              ),
              slotIcon: const Icon(
                Icons.add,
                color: wippyPink500,
              ),
              slotBadge: null,
            ),
            width: 160,
            height: 212,
          ),
          const SizedBox(width: 12),
          ImageSlotComponent(
            slot: RemoteFilledSlot(
              url: "https://thumbnews.nateimg.co.kr/view610///news.nateimg.co.kr/orgImg/fn/2023/01/03/202301031328043653_l.jpg",
              slotIcon: const Icon(
                Icons.edit,
                color: wippyPink500,
              ),
              slotBadge: null,
              onClick: () {},
            ),
            width: 160,
            height: 212,
          ),
        ],
      ),
    );
  }

  List<Widget> _buildWippyBadge() {
    return [
      WippyBadge(TextBadge(text: "Text", bgColor: wippyPink500, textColor: wippyWhite)),
      WippyBadge(NBadge(bgColor: wippyPink500, textColor: wippyWhite)),
      WippyBadge(NumberBadge(number: 33, bgColor: wippyPink500, textColor: wippyWhite)),
      WippyBadge(NumberBadge(number: 100, bgColor: wippyPink500, textColor: wippyWhite)),
      WippyBadge(NumberBadge(number: 1, bgColor: wippyPink500, textColor: wippyWhite)),
      WippyBadge(DotBadge(color: wippyPink500)),
    ];
  }

  List<Widget> _buildWippyBottomSheetComponents(BuildContext context) {
    return [
      WippyBoxButton(
        onPressed: () {
          showWippyBottomSheet(
            name: "PickerBottomSheet",
            isDismissible: true,
            context: context,
            buildBottomSheet: (context) {
              return const WippyPickerBottomSheet(
                ctaText: "Select",
                headerUiState: BottomSheetHeaderUiState(
                  title: BottomSheetHeaderTitle(
                    title: "City",
                  ),
                ),
                items: [
                  PickerItem(
                    displayName: "Tokyo",
                  ),
                  PickerItem(
                    displayName: "Minato",
                  ),
                  PickerItem(
                    displayName: "Shinjuku",
                  ),
                  PickerItem(
                    displayName: "Koto",
                  ),
                  PickerItem(
                    displayName: "Taito",
                  ),
                  PickerItem(
                    displayName: "Sumida",
                  ),
                  PickerItem(
                    displayName: "Koto",
                  )
                ],
              );
            },
          );
        },
        initUiState: ButtonUiState(
            buttonColorType: const ButtonColorType.primary(),
            buttonLabelType: const ButtonLabelType.labelOnly(label: 'PickerBottomSheet 띄우기'),
            buttonSizeType: ButtonSizeType.large()),
      ),
    ];
  }

  List<Widget> _buildWippyDropDownComponents() {
    return [
      const Padding(
        padding: EdgeInsets.symmetric(horizontal: 16),
        child: WippySolidDropDown(
          uiState: SolidDropDownUiState(
            label: "Label",
            placeHolder: "Text",
          ),
        ),
      ),
      const SizedBox(height: 16),
      const Padding(
        padding: EdgeInsets.symmetric(horizontal: 16),
        child: WippySolidDropDown(
          uiState: SolidDropDownUiState(
            label: "Label",
            selectedText: "Text",
          ),
        ),
      ),
      const SizedBox(height: 16),
      const Padding(
        padding: EdgeInsets.symmetric(horizontal: 16),
        child: WippyDropDown(
          uiState: DropDownUiState(
            label: "Label",
            placeHolder: "Placeholder",
          ),
        ),
      ),
      const SizedBox(height: 16),
      const Padding(
        padding: EdgeInsets.symmetric(horizontal: 16),
        child: WippyDropDown(
          uiState: DropDownUiState(
            label: "Label",
            selectedText: "Text",
          ),
        ),
      ),
      const SizedBox(height: 16),
      const Padding(
        padding: EdgeInsets.symmetric(horizontal: 16),
        child: WippyDropDown(
          uiState: DropDownUiState(
            label: "Label",
            selectedText: "Disabled",
            enabled: false,
          ),
        ),
      ),
      const SizedBox(height: 16),
    ];
  }

  List<Widget> _buildWippyHeaderComponents() {
    return [
      const WippyHeader(
        uiState: WippyHeaderUiState(
          title: WippyHeaderTitle(text: "Page Title"),
          actions: WippyHeaderActions.singleIconAction(iconAsset: IconPath.iconMessage16),
        ),
      )
    ];
  }

  List<Widget> _buildWippyProgressbarComponents() {
    return [Padding(padding: const EdgeInsets.symmetric(horizontal: 16), child: WippyProgressBar(0.4))];
  }

  List<Widget> _buildWippyToastComponents(BuildContext context) {
    return [
      WippyBoxButton(
        onPressed: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) => const ToastTestScreen()));
        },
        initUiState: ButtonUiState(
            buttonColorType: const ButtonColorType.primary(),
            buttonLabelType: const ButtonLabelType.labelOnly(label: 'Go to Toast Test Page'),
            buttonSizeType: ButtonSizeType.large()),
      )
    ];
  }

  List<Widget> _buildWippyPopupComponents(BuildContext context) {
    return [
      WippyBoxButton(
        onPressed: () {
          showDialog(
              barrierDismissible: false,
              context: context,
              builder: (context) {
                return WippyPopup(
                  uiState: WippyPopupUiState(
                      title: 'Title',
                      description: 'Description',
                      popupButtonType: PopupButtonType.singleButton(
                          label: 'Close',
                          onPressed: () {
                            Navigator.pop(context);
                          })),
                );
              });
        },
        initUiState: ButtonUiState(
            buttonColorType: const ButtonColorType.primary(),
            buttonLabelType: const ButtonLabelType.labelOnly(label: 'Show SingleButton Popup'),
            buttonSizeType: ButtonSizeType.large()),
      ),
      WippyBoxButton(
        onPressed: () {
          showDialog(
              barrierDismissible: false,
              context: context,
              builder: (context) {
                return WippyPopup(
                    uiState: WippyPopupUiState(
                  title: 'Request Friend?',
                  popupButtonType: PopupButtonType.multiButton(
                      leftButtonLabel: 'No',
                      onPressedLeftButton: () {
                        Navigator.pop(context);
                      },
                      rightButtonLabel: 'Yes'),
                ));
              });
        },
        initUiState: ButtonUiState(
            buttonColorType: const ButtonColorType.primary(),
            buttonLabelType: const ButtonLabelType.labelOnly(label: 'Show MultiButton Popup'),
            buttonSizeType: ButtonSizeType.large()),
      )
    ];
  }

  List<Widget> _buildWippyEmptyStatesComponents(BuildContext context) {
    return [
      WippyBoxButton(
        onPressed: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) => const EmptyStatesTestScreen()));
        },
        initUiState: ButtonUiState(
            buttonColorType: const ButtonColorType.primary(),
            buttonLabelType: const ButtonLabelType.labelOnly(label: 'Go to Empty States Page'),
            buttonSizeType: ButtonSizeType.large()),
      )
    ];
  }

  List<Widget> _buildWippySpinnerComponents(BuildContext context) {
    return [
      WippySpinner(),
      WippyBoxButton(
        onPressed: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) => const DimmedLoadingTestScreen()));
        },
        initUiState: ButtonUiState(
            buttonColorType: const ButtonColorType.primary(),
            buttonLabelType: const ButtonLabelType.labelOnly(label: 'Go to Dimmed Loading Page'),
            buttonSizeType: ButtonSizeType.large()),
      )
    ];
  }

  List<Widget> _buildWippyTextAreaComponents() {
    return [
      WippyTextArea(initialData: const TextAreaInitialData(label: "Disable State", state: TextInputState.disable, placeholder: "Hint")),
      WippyTextArea(
          initialData: const TextAreaInitialData(label: "set maxCount", maxCount: 10, helperMessage: "Helper Message", placeholder: "Hint")),
      WippyTextArea(
          initialData: const TextAreaInitialData(
              label: "Error State", errorState: TextInputErrorState.error(errorMessage: "Error Message"), maxCount: 10, placeholder: "Hint")),
    ];
  }

  List<Widget> _buildWippyTextFieldComponents() {
    return [
      WippyTextField(initialData: const TextFieldInitialData(label: "Label", helperMessage: "Helper Message", placeholder: "Hint")),
      WippyTextField(initialData: const TextFieldInitialData(label: "set maxCount", maxCount: 10, placeholder: "Hint")),
      WippyTextField(
          initialData: const TextFieldInitialData(
              label: "Error State", errorState: TextInputErrorState.error(errorMessage: "Error Message"), maxCount: 10, placeholder: "Hint")),
      WippyTextField(initialData: const TextFieldInitialData(label: "Disable State", state: TextInputState.disable, placeholder: "Hint")),
    ];
  }

  List<Widget> _buildWippyChatInputComponents() {
    return [
      ChatInput(
        onUpdatedMessage: (message) {
          debugPrint(message);
        },
        onClickSend: (message) {
          debugPrint(message);
        },
        placeHolder: "Enter Message",
      ),
    ];
  }

  List<Widget> _buildWippyChipsComponents() {
    return [
      WippySingleSelectiveChips(
        onSelected: (_) {},
        chipsUiState: const SingleSelectiveChipsUiState(
          chips: [
            SingleSelectiveChipUiState(
              chipUiProperties: ChipUiProperties(
                label: "Label",
              ),
              isSelected: false,
            ),
          ],
          sizeType: SingleSelectiveChipSizeType.large,
        ),
      ),
      WippySingleSelectiveChips(
        onSelected: (_) {},
        chipsUiState: const SingleSelectiveChipsUiState(
          chips: [
            SingleSelectiveChipUiState(
              chipUiProperties: ChipUiProperties(label: "Male"),
              isSelected: true,
            ),
            SingleSelectiveChipUiState(
              chipUiProperties: ChipUiProperties(label: "Female"),
              isSelected: false,
            ),
          ],
          sizeType: SingleSelectiveChipSizeType.regular,
        ),
      ),
      WippyMultiSelectiveChips(
        onSelected: (_) {},
        chipsUiState: const MultiSelectiveChipsUiState(
          chips: [
            MultiSelectiveChipUiState.normal(
              chipUiProperties: ChipUiProperties(label: "Soccer"),
              isSelected: true,
            ),
            MultiSelectiveChipUiState.normal(
              chipUiProperties: ChipUiProperties(label: "Baseball"),
              isSelected: false,
            ),
            MultiSelectiveChipUiState.normal(
              chipUiProperties: ChipUiProperties(label: "Badminton"),
              isSelected: false,
            ),
          ],
        ),
      ),
    ];
  }

  List<Widget> _buildWippyBoxButtonComponents() {
    return [
      Wrap(
        children: [
          WippyBoxButton(
            onPressed: () {},
            initUiState: ButtonUiState(
                buttonColorType: const ButtonColorType.primary(),
                buttonLabelType: const ButtonLabelType.labelOnly(label: 'Wrap'),
                buttonSizeType: ButtonSizeType.large()),
          )
        ],
      ),
      WippyBoxButton(
        onPressed: () {},
        initUiState: ButtonUiState(
            buttonColorType: const ButtonColorType.primary(),
            buttonLabelType: const ButtonLabelType.labelOnly(label: 'Match'),
            buttonSizeType: ButtonSizeType.large()),
      )
    ];
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Design System App', style: headline20Bold)),
      body: ListView(children: _buildAllDesignSystemComponents(context).intersperse(const SizedBox(height: 10))),
    );
  }
}

List<Widget> _buildWippyTooltipComponents(BuildContext context) {
  return [
    TooltipComponent(
      uiState: TooltipUiState(
        message: "Tooltip Message",
        arrowPosition: TooltipArrowPosition.leftTop,
        textColor: wippyWhite,
        backgroundColor: wippyGray800,
        arrowOffset: 30,
        visible: true,
      ),
      onClickTooltip: () {},
    ),
    TooltipComponent(
      uiState: TooltipUiState(
        message: "Tooltip Message",
        arrowPosition: TooltipArrowPosition.leftTop,
        textColor: wippyWhite,
        backgroundColor: wippyGray800,
        arrowOffset: 30,
        visible: false,
      ),
      onClickTooltip: () {},
    ),
  ];
}

extension ListExtensions<T> on List<T> {
  List<T> intersperse(T element) {
    if (isEmpty) {
      return [];
    }

    List<T> result = [];
    for (int i = 0; i < length; i++) {
      result.add(this[i]);
      if (i < length - 1) {
        result.add(element);
      }
    }
    return result;
  }
}

更多关于Flutter量子点效果插件quantum_dots的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter量子点效果插件quantum_dots的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter中使用quantum_dots插件来创建量子点效果的代码示例。请注意，quantum_dots插件可能是一个虚构的插件名称，用于演示目的。在实际应用中，你可能需要查找一个具体的、实现了量子点效果的Flutter插件，或者自己实现这样的效果。不过，我会根据假设的插件API给出一个示例代码。

首先，确保你已经在pubspec.yaml文件中添加了quantum_dots插件的依赖项（注意：这只是一个假设的依赖项）：

dependencies:
  flutter:
    sdk: flutter
  quantum_dots: ^1.0.0  # 假设的版本号

然后，运行flutter pub get来安装依赖项。

接下来，在你的Flutter应用中使用这个插件。以下是一个简单的示例，展示如何在Flutter应用中应用量子点效果：

import 'package:flutter/material.dart';
import 'package:quantum_dots/quantum_dots.dart';  // 导入假设的插件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Quantum Dots Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: QuantumDotsScreen(),
    );
  }
}

class QuantumDotsScreen extends StatefulWidget {
  @override
  _QuantumDotsScreenState createState() => _QuantumDotsScreenState();
}

class _QuantumDotsScreenState extends State<QuantumDotsScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Quantum Dots Effect'),
      ),
      body: Center(
        child: QuantumDotsWidget(
          // 假设的插件属性
          dotColor: Colors.red,
          dotSize: 20.0,
          animationDuration: Duration(seconds: 2),
        ),
      ),
    );
  }
}

// 假设的 QuantumDotsWidget，用于展示量子点效果
class QuantumDotsWidget extends StatefulWidget {
  final Color dotColor;
  final double dotSize;
  final Duration animationDuration;

  QuantumDotsWidget({
    required this.dotColor,
    required this.dotSize,
    required this.animationDuration,
  });

  @override
  _QuantumDotsWidgetState createState() => _QuantumDotsWidgetState();
}

class _QuantumDotsWidgetState extends State<QuantumDotsWidget> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: widget.animationDuration,
      vsync: this,
    )..repeat(reverse: true);

    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
  }

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

  @override
  Widget build(BuildContext context) {
    // 假设的 QuantumDotsEffect 用于应用量子点效果
    // 这里只是一个占位符，实际使用中应该根据插件的API来实现
    return AnimatedBuilder(
      animation: _animation,
      child: Container(),
      builder: (context, child) {
        return QuantumDotsEffect(
          color: widget.dotColor,
          size: widget.dotSize,
          // 可能还需要其他参数来配置动画效果
          // 例如：progress: _animation.value,
        );
      },
    );
  }
}

// 假设的 QuantumDotsEffect 组件
// 在实际使用中，这个组件应该由 quantum_dots 插件提供
class QuantumDotsEffect extends StatelessWidget {
  final Color color;
  final double size;
  // 可能还需要其他参数，例如动画进度等

  QuantumDotsEffect({
    required this.color,
    required this.size,
    // 其他参数...
  });

  @override
  Widget build(BuildContext context) {
    // 这里只是示例代码，实际量子点效果的实现需要依赖插件的具体API
    return CustomPaint(
      painter: QuantumDotsPainter(color: color, size: size),
      size: Size.infinite,
    );
  }
}

// 假设的 QuantumDotsPainter 用于绘制量子点效果
class QuantumDotsPainter extends CustomPainter {
  final Color color;
  final double size;

  QuantumDotsPainter({required this.color, required this.size});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = color
      ..style = PaintingStyle.fill;

    // 简单的示例：在画布上绘制一些随机位置的点
    final random = Random();
    for (int i = 0; i < 100; i++) {
      final dotX = random.nextDouble() * size.width;
      final dotY = random.nextDouble() * size.height;
      canvas.drawCircle(Offset(dotX, dotY), size.width / 100 * this.size, paint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false; // 在这个示例中，我们不需要重绘
  }
}

请注意，上述代码中的QuantumDotsWidget、QuantumDotsEffect和QuantumDotsPainter都是基于假设的API创建的占位符。在实际使用中，你需要根据quantum_dots插件（如果存在的话）的具体API来实现这些组件。如果这样的插件不存在，你可能需要自己实现量子点效果，或者使用其他现有的动画和绘图技术来模拟这种效果。

回到顶部