shadcn_flutter 0.0.54

Beautifully designed components from Shadcn/UI is now available for Flutter

example/lib/main.dart

import 'package:flutter/services.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(
      const SystemUiOverlayStyle(systemNavigationBarColor: Colors.transparent));
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ShadcnApp(
      title: 'My App',
      home: const CounterPage(),
      theme: ThemeData(
        colorScheme: LegacyColorSchemes.darkZinc(),
        radius: 0.7,
      ),
    );
  }
}

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  CounterPageState createState() => CounterPageState();
}

class CounterPageState extends State<CounterPage> {
  int _counter = 0;

  Key? _selected = const ValueKey(0);

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  NavigationItem _buildButton(String label, IconData icon, Key key) {
    return NavigationItem(
      key: key,
      label: Text(label),
      child: Icon(icon),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      headers: [
        AppBar(
          title: const Text('Counter App'),
          subtitle: const Text('A simple counter app'),
          leading: [
            OverlayAnchor(
              anchor: #menuDrawer,
              child: GhostButton(
                onPressed: () {
                  showOverlay(
                    context,
                    DrawerConfiguration(
                      anchor: LinkedAnchor(#menuDrawer),
                      position: OverlayPosition.left,
                    ),
                    builder: (context) {
                      return Container(
                        alignment: Alignment.center,
                        constraints: const BoxConstraints(
                          maxWidth: 300,
                        ),
                        child: const Text('Drawer'),
                      );
                    },
                  );
                },
                density: ButtonDensity.icon,
                child: const Icon(LucideIcons.menu),
              ),
            ),
          ],
          trailing: [
            OverlayAnchor(
              anchor: #searchSheet,
              child: GhostButton(
                density: ButtonDensity.icon,
                onPressed: () {
                  showOverlay(
                    context,
                    SheetConfiguration(
                      anchor: LinkedAnchor(#searchSheet),
                      position: OverlayPosition.right,
                    ),
                    builder: (context) {
                      return Container(
                        alignment: Alignment.center,
                        constraints: const BoxConstraints(
                          maxWidth: 200,
                        ),
                        child: const Text('Sheet'),
                      );
                    },
                  );
                },
                child: const Icon(LucideIcons.search),
              ),
            ),
          ],
        ),
        const Divider(),
      ],
      footers: [
        const Divider(),
        NavigationBar(
          onSelected: (key) {
            setState(() {
              _selected = key;
            });
          },
          selectedKey: _selected,
          children: [
            _buildButton('Home', LucideIcons.house, const ValueKey(0)),
            _buildButton('Explore', LucideIcons.compass, const ValueKey(1)),
            _buildButton('Library', LucideIcons.library, const ValueKey(2)),
          ],
        ),
      ],
      child: Padding(
        padding: const EdgeInsets.all(32.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'You have pushed the button this many times:',
                textAlign: TextAlign.center,
              ).p(),
              Text(
                '$_counter',
              ).h1(),
              PrimaryButton(
                onPressed: _incrementCounter,
                density: ButtonDensity.icon,
                child: const Icon(LucideIcons.plus),
              ).p(),
            ],
          ),
        ),
      ),
    );
  }
}