Design Tools logo

Pub.dev Badge Lint Badge MIT License Badge Flutter Platform Badge

Main Features

  • Gridlines
  • Keylines

Quickstart

Add Design Tools to flutter project dependency

dependencies:
  design_tools: ^0.2.0

Design Tools for App

Wrap App in DesignTools widget

import 'package:design_tools/design_tools.dart';

void main() => runApp(
  DesignTools(
    child : MyApp(),
  )
)

Image showing App Keylines and GuideLines

Design Tools for widget

Wrap your Widget in DesignTools widget

import 'package:design_tools/design_tools.dart';

DesignTools(
  child : MyWidget(),
)

Image showing Widget Keylines

Customisations

DesignTools

variable Type usage
verticalInterval GuideInterval to specify the vertical guides, null to skip
horizontalInterval GuideInterval to specify the horizontal guides, null to skip
keylines Keyline List to specify the keylines, empty-array to skip

GuideInterval

variable Type usage
intervals int intervals between each guide line
divisions int divisions between each interval, if two each interval is split to 2 divisions
intervalDecorator LineDecorator decorator for interval lines
divisionDecorator LineDecorator decorator for division lines

Keyline

variable Type usage
xPos double position at which ketLine is drawn
gravity KeylineGravity specifies xPos relative to start or end
decoration.lineDecorator LineDecorator decorator for keyline
decoration.marginDecorator BlockLineDecorator decorator for keyline margin (optional)

LineDecorator

variable Type usage
width double line width
color color line color

BlockLineDecorator

variable Type usage
width double line width
startColor color line gradient along width start color
endColor color line gradient along width end color

Mentions

Libraries

design_tools