geopattern_flutter

使用 CustomPainters 为 Flutter 创建的几何图案。

geopattern_flutterv

geopattern_fluttervs

简单示例

import 'dart:convert';

import 'package:crypto/crypto.dart';
import 'package:flutter/material.dart';
import 'package:geopattern_flutter/geopattern_flutter.dart';
import 'package:geopattern_flutter/patterns/mosaic_squares.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final hash = sha1.convert(utf8.encode("flutter")).toString();
    return LayoutBuilder(builder: (context, constraints) {
      final pattern = MosaicSquares.fromHash(hash);
      return CustomPaint(
          size: Size(constraints.maxWidth, constraints.maxHeight),
          painter: FullPainter(pattern: pattern, background: Colors.blueGrey));
    });
  }
}

创建

simple

模式完全可定制，例如，作为创建的模式

final pattern = ConcentricCircles(
  radius: 40,
  strokeWidth: 8,
  nx: 6,
  ny: 6,
  strokeColors: List.generate(
      36,
      (int i) => Color.fromARGB(
          10 + (gen.nextDouble() * 100).round(),
          50 + gen.nextInt(2) * 150,
          50 + gen.nextInt(2) * 150,
          50 + gen.nextInt(2) * 150)),
  fillColors: List.generate(
      36,
      (int i) => Color.fromARGB(
          10 + (gen.nextDouble() * 100).round(),
          50 + gen.nextInt(2) * 150,
          50 + gen.nextInt(2) * 150,
          50 + gen.nextInt(2) * 150)));

渲染

overlapping_circles

每个模式都有一个相关的size。 FillPainter 类实现了 CustomPainter，以便模式在画布的整个宽度和高度上重复绘制。但是，每个 Pattern 都有一个 paint(Canvas, Offset) 方法，可用于单独绘制。

在 example/appbar.dart 中有一个示例，用于将模式作为 SliverAppBar 的背景使用

演示

待办事项

  • 泰瑟尔化
  • Xes

GitHub

https://github.com/suyash/geopattern