trapezoid 1.0.1 copy "trapezoid: ^1.0.1" to clipboard
trapezoid: ^1.0.1 copied to clipboard

A customizable trapezoid/trapezium for Android, iOS, WEB, Linux, Mac and Windows.

trapezoid #

pub package

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!

6
likes
150
points
33
downloads

Publisher

verified publisherdiogoroos.com

Weekly Downloads

2024.08.14 - 2025.02.26

A customizable trapezoid/trapezium for Android, iOS, WEB, Linux, Mac and Windows.

Repository (GitHub)

Documentation

API reference

License

Apache-2.0 (license)

Dependencies

flutter

More

Packages that depend on trapezoid