How to Add a Ribbon Decoration to a Widget in Flutter

A ribbon decoration is a type of decoration that is floating above a container that shows an emphasized label. In design, ribbons are often used as header graphics, and they can also be used as borders, dividers, and background elements.

There are several benefits to using ribbon decorations in your app design. Ribbons are a great way to add a touch of elegance and visual interest, and they can help to emphasize important information or callouts. They can also be used to create an overall feeling of polish and professionalism.

You can use any of the following 2 packages to add ribbon to a widget.

ribbon_widget

Ribbon(
    title: '',
    titleStyle: const TextStyle(color: Colors.white, fontSize: 12),
    color: Colors.purple,
    location: RibbonLocation.topStart,
    farLength: 15,
    nearLength: 0,
    child: TextButton(
      onPressed: () {
       
      },
      child: Text("${index + 1}"),      
    ),
  )

super_banners

CornerBanner(
  bannerPosition: CornerBannerPosition.topLeft,
  bannerColor: Colors.blue,
  child: Text("New"),
);

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close