corner_ribbon 0.0.1
corner_ribbon: ^0.0.1 copied to clipboard
A customizable Flutter widget to add corner ribbons with text overlays to any widget.
import 'package:corner_ribbon/corner_ribbon.dart';
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
title: 'Corner Ribbon Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
),
);
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text('Corner Ribbon Demo'),
),
body: Container(
padding: const EdgeInsets.all(8.0),
width: double.maxFinite,
height: double.maxFinite,
child: SingleChildScrollView(
child: Wrap(
alignment: WrapAlignment.center,
runSpacing: 16,
spacing: 16,
children: [
for (final position in RibbonPosition.values)
Container(
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.width * 0.8,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
),
clipBehavior: Clip.hardEdge,
child: CornerRibbon(
ribbonColor: Colors.orange,
text: 'Best Seller !!',
position: position,
textStyle: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 26,
),
child: Image.asset('assets/shoes.png'),
),
),
],
),
),
),
);
}
}