Flutter分形图形生成插件flutter_fractal的使用

Flutter分形图形生成插件flutter_fractal的使用

flutter_fractal 是一个用于创建分形艺术的 Flutter 插件，支持多种绘制类型，如海龟图形和数学方法。它可以帮助你为你的应用添加炫酷的艺术效果。

你可以使用此插件来为你的应用创建许多炫酷的艺术作品，例如加载指示器、进度指示器、启动屏幕、按钮效果等。

如何创建自己的艺术作品

定义如何绘制

void _drawing(TurtleGraphicsPainter painter, Canvas canvas, Size size) {
  // 从任意点开始。
  painter.moveToPoint(size.center(Offset.zero));
  // 开始以一定角度旋转，也可以使用 setAngle 方法。
  painter.turnRight(angle);
  // 使用 painter 绘制一些东西。查看 TurtleGraphicsCollection。
  painter.drawSpiralByRadius(
    alpha: alpha,
    radius: spiralRadius,
    count: circleCount,
    deltaRadius: deltaSpiralRadius,
    deltaAlpha: deltaAlpha,
    drawDot: (canvas, size) {
      // 绘制一个点。
      painter.drawPoint(
          canvas, Paint()..color = Colors.white, painter.currentPoint, 1);
    },
    canvas: canvas,
    size: size,
  );
}

[@override](/user/override)
Widget build(BuildContext context) {
  return CustomPaint(
    size: Size(w,h),
    painter: TurtleGraphicsPainter(
      onDrawing: _drawing,
    ),
  );
}

在 widgets 文件夹中查找更多

• ChakraLoadingIndicator
• SlinkyLoadingIndicator

开发环境

[✓] Flutter (Channel stable, 3.0.1, on macOS 12.3.1 21E258 darwin-x64, locale en-VN)
    • Flutter version 3.0.1 at ~/fvm/versions/stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fb57da5f94 (5 days ago), 2022-05-19 15:50:29 -0700
    • Engine revision caaafc5604
    • Dart version 2.17.1
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at ~/Library/Android/sdk
    • Platform android-31, build-tools 30.0.3
    • ANDROID_HOME = ~/Library/Android/sdk
    • ANDROID_SDK_ROOT = ~/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] VS Code (version 1.67.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.40.0

示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_fractal 插件创建分形图形。

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

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Romantic Developer',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool isLoading = true;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(kToolbarHeight),
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: RomanticColor.rainbowColorList(20),
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
            ),
          ),
          child: AppBar(
            backgroundColor: Colors.transparent,
            title: Text('Romantic Developer'),
          ),
        ),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Center(
            child: Text(
              'ChakraLoadingIndicator',
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
          ),
          ChakraLoadingIndicator(),
          Center(
            child: Text(
              'SlinkyLoadingIndicator',
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
          ),
          SlinkyLoadingIndicator(),
        ],
      ),
    );
  }
}