https://github.com/suyash/geopattern
geometric patterns for flutter
https://github.com/suyash/geopattern
dart flutter
Last synced: about 1 month ago
JSON representation
geometric patterns for flutter
- Host: GitHub
- URL: https://github.com/suyash/geopattern
- Owner: suyash
- License: mit
- Created: 2019-06-24T16:33:12.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-06-08T19:53:26.000Z (almost 4 years ago)
- Last Synced: 2025-03-25T01:43:50.392Z (about 2 months ago)
- Topics: dart, flutter
- Language: Dart
- Homepage: https://pub.dev/packages/geopattern_flutter
- Size: 2.68 MB
- Stars: 29
- Watchers: 2
- Forks: 10
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# geopattern_flutter
[](https://pub.dartlang.org/packages/geopattern_flutter)
> Flutter Port of [jasonlong/geo_pattern](https://github.com/jasonlong/geo_pattern)
Geometric Patterns for Flutter using `CustomPainter`s.
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
## Simple Example
```dart
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
```dart
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`
[Demo](https://i.imgur.com/iPj0sMo.mp4)
### TODO
- Tesselation
- Xes