drawably_flutter 0.0.1
drawably_flutter: ^0.0.1 copied to clipboard
Animated hand-drawn Flutter controls and decorations with deterministic seeded sketches.
import 'package:drawably_flutter/drawably_flutter.dart';
import 'package:flutter/material.dart';
void main() => runApp(const ExampleApp());
class ExampleApp extends StatelessWidget {
const ExampleApp({super.key});
@override
Widget build(BuildContext context) =>
const MaterialApp(debugShowCheckedModeBanner: false, home: Showcase());
}
class Showcase extends StatefulWidget {
const Showcase({super.key});
@override
State<Showcase> createState() => _ShowcaseState();
}
class _ShowcaseState extends State<Showcase> {
bool checked = true;
bool toggled = false;
int selected = 1;
@override
Widget build(BuildContext context) => DrawablyTheme(
data: const DrawablyStyle(
strokeColor: Color(0xff173f5f),
fillColor: Color(0xffffd166),
),
child: Scaffold(
// appBar: AppBar(title: const Text('Drawably Flutter')),
body: ListView(
padding: const EdgeInsets.all(24),
children: [
SizedBox(height: 40,),
const Text(
'Hand-drawn controls',
style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
),
const SizedBox(height: 20),
Wrap(
spacing: 16,
runSpacing: 16,
children: [
DrawablyButton(onPressed: () {}, child: const Text('Outline')),
DrawablyButton(
variant: DrawablyButtonVariant.solid,
onPressed: () {},
child: const Text('Solid'),
),
DrawablyButton(
variant: DrawablyButtonVariant.scribble,
onPressed: () {},
child: const Text('Scribble'),
),
],
),
const SizedBox(height: 20),
const DrawablyDivider(),
const SizedBox(height: 12),
Row(
children: [
DrawablyCheckbox(
value: checked,
onChanged: (value) => setState(() => checked = value),
),
const SizedBox(width: 16),
DrawablyRadio(
value: 1,
groupValue: selected,
onChanged: (value) => setState(() => selected = value),
),
const SizedBox(width: 16),
DrawablyRadio(
value: 2,
groupValue: selected,
onChanged: (value) => setState(() => selected = value),
),
const SizedBox(width: 16),
DrawablyToggle(
value: toggled,
onChanged: (value) => setState(() => toggled = value),
),
],
),
const SizedBox(height: 24),
const DrawablyCard(
child: Text('Any Flutter widget can live inside a sketched card.'),
),
const SizedBox(height: 24),
const Wrap(
spacing: 20,
runSpacing: 16,
children: [
DrawablyBadge(child: Text('Outline badge')),
DrawablyBadge(
variant: DrawablyBadgeVariant.scribble,
child: Text('Scribbled'),
),
DrawablyUnderline(child: Text('Underlined text')),
DrawablyHighlight(child: Text('Highlighted text')),
DrawablyCircle(child: Text('Circled text')),
],
),
],
),
),
);
}