crossbuild_custom_widgets 0.0.1
crossbuild_custom_widgets: ^0.0.1 copied to clipboard
A comprehensive, theme-aware collection of production-ready, highly customizable Flutter UI widgets: buttons, text fields, dropdowns, dialogs, shimmer, loaders, empty/error states, cards, tiles, avata [...]
example/lib/main.dart
import 'package:flutter/material.dart';
import 'screens/buttons_example.dart';
import 'screens/inputs_example.dart';
import 'screens/dropdown_example.dart';
import 'screens/dialogs_example.dart';
import 'screens/loading_example.dart';
import 'screens/states_example.dart';
import 'screens/cards_example.dart';
import 'screens/images_example.dart';
void main() {
runApp(const CBExampleApp());
}
/// Root of the example app. Notice that none of the CB widgets shown in
/// the demo screens hardcode any colors of their own — everything comes
/// from the [ThemeData] configured here. Toggle light/dark from the app
/// bar to see the widgets adapt automatically.
class CBExampleApp extends StatefulWidget {
const CBExampleApp({super.key});
@override
State<CBExampleApp> createState() => _CBExampleAppState();
}
class _CBExampleAppState extends State<CBExampleApp> {
ThemeMode _mode = ThemeMode.light;
void _toggleTheme() {
setState(() {
_mode = _mode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'CrossBuild Custom Widgets',
debugShowCheckedModeBanner: false,
themeMode: _mode,
theme: ThemeData(
useMaterial3: true,
colorSchemeSeed: Colors.indigo,
brightness: Brightness.light,
),
darkTheme: ThemeData(
useMaterial3: true,
colorSchemeSeed: Colors.indigo,
brightness: Brightness.dark,
),
home: HomeScreen(onToggleTheme: _toggleTheme, mode: _mode),
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key, required this.onToggleTheme, required this.mode});
final VoidCallback onToggleTheme;
final ThemeMode mode;
@override
Widget build(BuildContext context) {
final destinations = <_Destination>[
_Destination('Buttons', Icons.smart_button_outlined, const ButtonsExampleScreen()),
_Destination('Inputs', Icons.text_fields_outlined, const InputsExampleScreen()),
_Destination('Dropdown', Icons.arrow_drop_down_circle_outlined, const DropdownExampleScreen()),
_Destination('Dialogs', Icons.chat_bubble_outline, const DialogsExampleScreen()),
_Destination('Loading', Icons.hourglass_empty, const LoadingExampleScreen()),
_Destination('States', Icons.inbox_outlined, const StatesExampleScreen()),
_Destination('Cards & Tiles', Icons.dashboard_outlined, const CardsExampleScreen()),
_Destination('Images & Avatars', Icons.image_outlined, const ImagesExampleScreen()),
];
return Scaffold(
appBar: AppBar(
title: const Text('CrossBuild Custom Widgets'),
actions: [
IconButton(
tooltip: 'Toggle theme',
icon: Icon(mode == ThemeMode.light ? Icons.dark_mode_outlined : Icons.light_mode_outlined),
onPressed: onToggleTheme,
),
],
),
body: ListView.separated(
padding: const EdgeInsets.all(16),
itemCount: destinations.length,
separatorBuilder: (_, __) => const SizedBox(height: 8),
itemBuilder: (context, index) {
final d = destinations[index];
return Card(
child: ListTile(
leading: Icon(d.icon),
title: Text(d.title),
trailing: const Icon(Icons.chevron_right),
onTap: () => Navigator.of(context).push(
MaterialPageRoute(builder: (_) => d.screen),
),
),
);
},
),
);
}
}
class _Destination {
_Destination(this.title, this.icon, this.screen);
final String title;
final IconData icon;
final Widget screen;
}