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.3.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

variableTypeusage
verticalIntervalGuideIntervalto specify the vertical guides, null to skip
horizontalIntervalGuideIntervalto specify the horizontal guides, null to skip
keylinesKeyline Listto specify the keylines, empty-array to skip

GuideInterval

variableTypeusage
intervalsintintervals between each guide line
divisionsintdivisions between each interval, if two each interval is split to 2 divisions
intervalDecoratorLineDecoratordecorator for interval lines
divisionDecoratorLineDecoratordecorator for division lines

Keyline

variableTypeusage
xPosdoubleposition at which ketLine is drawn
gravityKeylineGravityspecifies xPos relative to start or end
decoration.lineDecoratorLineDecoratordecorator for keyline
decoration.marginDecoratorBlockLineDecoratordecorator for keyline margin (optional)

LineDecorator

variableTypeusage
widthdoubleline width
colorcolorline color

BlockLineDecorator

variableTypeusage
widthdoubleline width
startColorcolorline gradient along width start color
endColorcolorline gradient along width end color

Mentions

Libraries

design_tools