design_tools 0.2.0

Package brings the design tools to your flutter app. It supports grid-lines and key-lines

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(),
  )
)

Design Tools for widget

Wrap your Widget in DesignTools widget

import 'package:design_tools/design_tools.dart';

DesignTools(
  child : MyWidget(),
)

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

• @mitesh77 for wonderful UI templates Flutter UI Templates
• @aloisdeniel for Flutter Device Preview : motivation for this library