trapezoid 1.0.1
trapezoid: ^1.0.1 copied to clipboard
A customizable trapezoid/trapezium for Android, iOS, WEB, Linux, Mac and Windows.
trapezoid #
A customizable trapeze with texts, icons and divided into touchable parts. It's better than image because every part of the trapezoid is clickable. Works on Android, iOS, Web, Windows, Linux and Mac.
Installation #
Add trapezoid: ^1.0.1
in your pubspec.yaml
dependencies. And import it:
import 'package:trapezoid/trapezoid.dart';
copied to clipboard
How to use #
Simply create a Trapezoid
widget and pass the required params:
Trapezoid(
firstButtonAction: () => 0,
afterLastTrapeze: Padding(
padding: const EdgeInsets.only(left: 3),
child: Container(
width: 90,
height: 20,
decoration: const BoxDecoration(color: Color.fromRGBO(156, 17, 6, 1)),
),
),
firstDecoration: const BoxDecoration(color: Color.fromRGBO(248, 151, 0, 1)),
secondDecoration: const BoxDecoration(color: Color.fromRGBO(246, 103, 16, 1)),
thirdDecoration: const BoxDecoration(color: Color.fromRGBO(237, 36, 23, 1)),
fourDecoration: const BoxDecoration(color: Color.fromRGBO(156, 17, 6, 1)),
childOneFirstTrapeze: const Text('1First', style: TextStyle(fontWeight: FontWeight.bold)),
childOneSecondTrapeze: const Text('1Second'),
childOneThirdTrapeze: const Text('1Third'),
childTwoFirstTrapeze: const Text('2First', style: TextStyle(fontWeight: FontWeight.bold)),
childTwoSecondTrapeze: Text('2Second', style: TextStyle(color: Colors.purple[900])),
childTwoThirdTrapeze: const Text('2Third'),
childThreeFirstTrapeze: const Text('3First', style: TextStyle(fontWeight: FontWeight.bold)),
childThreeSecondTrapeze: const Text('3Second'),
childThreeThirdTrapeze: const Text('3Third'),
childFourFirstTrapeze: const Text('4First', style: TextStyle(fontWeight: FontWeight.bold)),
childFourSecondTrapeze: const Text('4Second', style: TextStyle(color: Colors.amber)),
childFourThirdTrapeze: const Text('4Third'),
firstIcon: const Positioned(
top: 7,
left: 20,
child: Icon(Icons.add_shopping_cart_sharp, color: Colors.deepPurpleAccent),
),
thirdIcon: const Positioned(top: 7, right: 20, child: Icon(Icons.add_chart, color: Colors.white70)),
secondIcon:
const Positioned(top: 14, right: 20, child: Icon(Icons.stacked_line_chart_outlined, color: Colors.white)),
)
copied to clipboard
For a more detail example please take a look at the example
folder.
Example #
Trapezoid:
|
- #
If something is missing, feel free to open a ticket or contribute!