drawably_flutter 0.0.1 copy "drawably_flutter: ^0.0.1" to clipboard
drawably_flutter: ^0.0.1 copied to clipboard

Animated hand-drawn Flutter controls and decorations with deterministic seeded sketches.

example/lib/main.dart

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')),
            ],
          ),
        ],
      ),
    ),
  );
}
1
likes
160
points
128
downloads

Documentation

API reference

Publisher

unverified uploader

Weekly Downloads

Animated hand-drawn Flutter controls and decorations with deterministic seeded sketches.

Repository (GitHub)
View/report issues

Topics

#animation #custom-painter #hand-drawn #ui #widget

License

MIT (license)

Dependencies

flutter

More

Packages that depend on drawably_flutter