Geometric Patterns for Flutter using CustomPainters.

Related tags

Templates dart flutter
Overview

geopattern_flutter

pub package

Flutter Port of jasonlong/geo_pattern

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

Demo

TODO

  • Tesselation
  • Xes
You might also like...

Flutter Viral News App using : Flutter + Rest Api + Bloc / Cubit

Flutter Viral News App using : Flutter + Rest Api + Bloc / Cubit

Intro Viral News App on Flutter. The tech used: Flutter widgets + Flutter Bloc / Cubit + Rest Api Check the screenshot : P.S Make sure to upgrade your

Nov 2, 2022

Stream Chat official Flutter SDK. Build your own chat experience using Dart and Flutter.

Stream Chat official Flutter SDK. Build your own chat experience using Dart and Flutter.

Official Flutter packages for Stream Chat Quick Links Register to get an API key for Stream Chat Flutter Chat SDK Tutorial Chat UI Kit Sample apps Thi

Dec 25, 2022

Flutter jobs borad app created using flutter

Flutter jobs borad app created using flutter

Flutter Jobs App note : the app is not working now because of some changes in the web site and i will work on it soon(∞∞) but you can still benfit fro

Dec 21, 2022

Flutter component concept created with Flutter using Dart programming language, inspired by Gooey Rab Bar.

Flutter component concept created with Flutter using Dart programming language, inspired by Gooey Rab Bar.

Gooey Tab Bar Flutter Flutter component concept created with Flutter using Dart programming language, inspired by Gooey Tab Bar. About This component

Dec 14, 2022

Flutter-clean-architecture - A simple flutter project developed with TDD and using Clean Architecture principles.

Clean Architecture This is a study project to practice TDD and a good approach of Clean Architecture for flutter projects. It is based on Reso Coder s

Jul 21, 2022

HappyNewYearAnimation-using-Flutter - A very delightful Welcome to 2022 with Flutter 🎉🎊🎆

happynewyearapp A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Jan 1, 2022

Flutter-Udemy - - A Udemy clone using Flutter sdk and dart.

Flutter-Udemy - - A Udemy clone using Flutter sdk and dart.

udemy_clone A new Flutter project. Below are some images : Getting Started This project is a starting point for a Flutter application. A few resources

Apr 24, 2022

Flutter-web-portfolio - A Basic web portfolio built using flutter

Flutter-web-portfolio - A Basic web portfolio built using flutter

My Flutter Web Portfolio It is a basic flutter web portfolio. 1. Home To use thi

May 30, 2022

Flutter-NoteBooklyApp - Note and task list app using flutter provider.

notebookly_app Note taking and task app using firebase/provider. Getting Started This project is a starting point for a Flutter application. A few res

Jan 4, 2022
Comments
  • Doesn't seem to work on a small scale

    Doesn't seem to work on a small scale

    I wanted to use this package to create a selection of design for the back on playing cards, although it doesn't seem to scale down very well. Maybe I'm doing something incorrectly?

    Screenshot_2022-02-10-18-13-52-881_com madepurple solitaire

    opened by carman247 0
  • PlusSigns Pattern not working.

    PlusSigns Pattern not working.

    Hi, I am trying to use the plus sign pattern but I am not sure when I am doing wrong but it is not working. Other patterns from your examples seem to work.

    class Background extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return LayoutBuilder(builder: (context, constraints) {
          final pattern = PlusSigns(
            fillColors: [pacificBlue, cobalt, pacificBlue, cobalt, pacificBlue, cobalt, pacificBlue, cobalt],
            nx: 2,
            ny: 4,
            side: 2,
            strokeColor: pacificBlue,
          );
          return CustomPaint(
              size: Size(MediaQuery.of(context).size.width, MediaQuery.of(context).size.height - 471),
              painter: FullPainter(pattern: pattern, background: pacificBlue));
        });
      }
    
    opened by EmmanuelAmodu 0
  • Having a custom widget

    Having a custom widget

    Hello there :)

    First of all, I want to thank you for the great work you're doing. So. I have been playing with the library a little bit and as a beginner with CostumPaint, I have found some difficulties to customize the painter as I need. You see the pattern takes the whole screen.. and I don't know how to make it fit only in a custom widget (in my case a Container with specific width and height).. I have tried to implement (Simple example) you're providing as a child to the container, but still, it takes the whole screen.. I know there's a workaround and I'm here asking for help if possible. Best regards and thank you for sharing this amazing library with the community,

    opened by Y-ndm 1
A movies app made with Flutter focused on solid software structure patterns.

Flutter Movies App An application made with Flutter to practice the principles of Clean Architecture. Even being focused on architecture, the project

Márcio Valim 59 Dec 12, 2022
🌈 Repository for a compass project, basically an App for displaying bank transfers, with API requests, Flag persistence, Infinite Scroll, Error Handling, Unit Tests, Extract Sharing working with SOLID, BLoC and Designer Patterns.

?? Green Bank Aplicação desenvolvida em Flutter com intuito de trabalhar conexão com API, Gerenciamento de estado usando BLoC, Refatoração, Arquitetur

André Guerra Santos 28 Oct 7, 2022
This repository contains Collection of UIs made using Flutter. Original Design of all the UIs were created by someone else. I tried to recreate those UIs using Flutter

Flutter-UIs-Collection This repository contains Collection of UIs made using Flutter. Original Design of all the UIs were created by someone else. I t

Mohak Gupta 45 Nov 26, 2022
Recipes app in flutter using API to get data. Amazing Recipes app UI in Flutter using dart with simple widgets.

Food Recipe App In Flutter Using API'S Recipe App in Flutter Subscribe Our YouTube Channel. Visit Website Demo OutPut Images ## ?? Links Getting Start

Habib ullah 2 Dec 26, 2022
This is the UI of Furniture App made using Flutter SDK. The original design was made by someone else in dribble and I tried to create the screens of that UI using Flutter

Furniture App - Responsive Flutter UI Watch it on YouTube Responsive UI Fetch Data From API Custom Loading Indicator Packages we are using: flutter_sv

null 6 Dec 3, 2022
A News App in Flutter using the newsapi.org API and using Bloc.

flutter_newsapp A News App using API from newsapi.org and using Bloc. Working ⚡ Screenshots =>=> ⚡ video Before Running Replace the <API_KEY> in lib/r

Arunoday kumar 11 Dec 9, 2022
A simple PokeDex App with Modern UI created using Flutter and Dart and using API from PokeApi.

FlutterDex FlutterDex A simple PokeDex App created using Flutter and Dart and using API from PokeApi. UI Design inspired by : Home Screen Pokedex iOS

Ariz Armeidi 39 Jan 1, 2023
A simple flutter application using #clean_architecture to generate random quotes using from #api

flutter_random_quotes_app_wth_clean_architecture A new Flutter project. Getting Started Project Structure ├── assets | ├── images | ├── 1x

Hossam Mohammad 2 Oct 4, 2022
Flutter Github Following Application, Using Flutter Provider and Flutter HTTP to get data from Github API.

Flutter Github Following Application Watch it on Youtube Previous Designs Checkout my Youtube channel Installation Please remember, after cloning this

Mohammad Rahmani 110 Dec 23, 2022
Challenge yourself every weekend with flutter. Join me to implement challenging UI & digital designs using Flutter.

Weekend With Flutter This is my new challenge. Every weekend, I want to implement challenging UI & digital designs using Flutter. you can join me with

Payam Zahedi 16 Feb 24, 2022