geometric pattern flutter
geometric patterns for flutter using custompainters.
simple example
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));
});
}
}
creates
patterns are fully customizable, for example a pattern created as
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)));
renders
each pattern has an associated size
. the fillpainter
class implements custompainter
such that the pattern is repetitively painted across the entire width and height of the canvas. however, each pattern
has a paint(canvas, offset)
method that can be used to paint on its own.
there is an example for using a pattern as a background for sliverappbar
in example/appbar.dart
todo
- tesselation
- xes
Comments are closed.