max_ui_v1 1.1.0 
max_ui_v1: ^1.1.0 copied to clipboard
!!Only basic widgets available. Nothing special in this update, wait for the update version: 1.5.0!! This package is under development and currently includes only basic Material Design-like widgets: A [...]
import 'package:flutter/material.dart';
import 'package:max_ui_v1/max_ui_v1.dart';
void main() {
MaxUIColors.configure(primary: const Color(0xFF009688));
runApp(const MyApp());
}
/// Example application demonstrating all Max UI components
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Max UI V1 Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.teal,
brightness: Brightness.light,
),
scaffoldBackgroundColor: Colors.white,
useMaterial3: true,
),
darkTheme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.teal,
brightness: Brightness.dark,
),
scaffoldBackgroundColor: Colors.white,
useMaterial3: true,
),
home: const ComponentTestHome(),
);
}
}
/// Home screen with buttons to test each widget
class ComponentTestHome extends StatefulWidget {
const ComponentTestHome({super.key});
@override
State<ComponentTestHome> createState() => _ComponentTestHomeState();
}
class _ComponentTestHomeState extends State<ComponentTestHome> {
String? _selectedOption;
String? _dropdownFieldValue;
final List<String> _options = [
'Option 1',
'Option 2',
'Option 3',
'Option 4',
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: MaxUIAppBar(
title: 'Max UI V1 - Component Tests',
actions: [
IconButton(
icon: const Icon(Icons.info_outline),
onPressed: () {
MaxUISnackbar.info(
context: context,
message: 'Max UI V1 - Press buttons to test components',
);
},
),
],
titleColor: Colors.white,
backgroundColor: Colors.teal,
showShadow: true,
),
body: ListView(
padding: const EdgeInsets.all(16),
children: [
// Title
Text(
'Widget Tests',
style: Theme.of(
context,
).textTheme.headlineSmall?.copyWith(fontWeight: FontWeight.bold),
),
const SizedBox(height: 20),
// 1. AppBar Demo
_buildSectionTitle(context, '1. Custom AppBar'),
_buildButton('Show AppBar Example', () => _showAppBarDemo()),
const SizedBox(height: 20),
// 2. Snackbar Demo
_buildSectionTitle(context, '2. Snackbar Variants'),
Wrap(
spacing: 8,
runSpacing: 8,
children: [
_buildButton('Success', () {
MaxUISnackbar.success(
context: context,
message: 'Success! Operation completed.',
);
}),
_buildButton('Error', () {
MaxUISnackbar.error(
context: context,
message: 'Error! Something went wrong.',
);
}),
_buildButton('Warning', () {
MaxUISnackbar.warning(
context: context,
message: 'Warning! Please be careful.',
);
}),
_buildButton('Info', () {
MaxUISnackbar.info(
context: context,
message: 'Info! Here is some information.',
);
}),
],
),
const SizedBox(height: 20),
// 3. Dropdown Demo
_buildSectionTitle(context, '3. Dropdown Component'),
MaxUIDropdown<String>(
items: _options,
value: _selectedOption,
hint: 'Select an option',
onChanged: (value) {
setState(() {
_selectedOption = value;
});
MaxUISnackbar.info(
context: context,
message: 'You selected: $value',
);
},
showBorder: true,
borderRadius: 12,
),
const SizedBox(height: 20),
// 4. Container Components
_buildSectionTitle(context, '4. Container Variants'),
_buildButton('Show Container Example', () {
_showContainerDemo();
}),
const SizedBox(height: 20),
// 5. Cards
_buildSectionTitle(context, '5. Card Component'),
MaxUICard(
elevation: 2,
onTap: () {
MaxUISnackbar.info(
context: context,
message: 'Card tapped! This has ripple effect.',
);
},
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Interactive Card',
style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
const Text(
'Tap me to see action! This card has ripple effect on tap.',
style: TextStyle(color: Colors.grey),
),
],
),
),
),
const SizedBox(height: 20),
// 6. Gradient Container
_buildSectionTitle(context, '6. Gradient Container'),
MaxUIGradientContainer(
gradient: LinearGradient(
colors: [
Theme.of(context).primaryColor,
Theme.of(context).primaryColor.withValues(alpha: 0.6),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
child: const Center(
child: Padding(
padding: EdgeInsets.all(24),
child: Column(
children: [
Text(
'Gradient Background',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
SizedBox(height: 8),
Text(
'Beautiful gradient styling',
style: TextStyle(color: Colors.white70, fontSize: 12),
),
],
),
),
),
),
const SizedBox(height: 20),
// 7. Bottom Sheet
_buildSectionTitle(context, '7. Bottom Sheet'),
Wrap(
spacing: 8,
children: [
_buildButton('Show Bottom Sheet', () {
_showBottomSheetDemo();
}),
_buildButton('Image Picker', () {
_showImagePickerDemo();
}),
],
),
const SizedBox(height: 20),
// 8. Text Field
_buildSectionTitle(context, '8. Text Field'),
const MaxUITextField(
label: 'Full name',
hint: 'Enter your name',
),
const SizedBox(height: 20),
// 9. Dropdown Field
_buildSectionTitle(context, '9. Dropdown Field'),
MaxUIDropdownField(
label: 'Category',
hint: 'Select category',
value: _dropdownFieldValue,
items: _options,
onChanged: (value) {
setState(() => _dropdownFieldValue = value);
},
),
const SizedBox(height: 20),
// 10. Bottom Nav
_buildSectionTitle(context, '10. Bottom Navigation'),
_buildButton('Open Bottom Nav Demo', () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => const _BottomNavDemo()),
);
}),
const SizedBox(height: 40),
],
),
);
}
/// Build section title
Widget _buildSectionTitle(BuildContext context, String title) {
return Padding(
padding: const EdgeInsets.only(bottom: 12),
child: Text(
title,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w600,
color: Theme.of(context).primaryColor,
),
),
);
}
/// Build action button
Widget _buildButton(String label, VoidCallback onPressed) {
return ElevatedButton(
onPressed: onPressed,
style: ElevatedButton.styleFrom(
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Colors.white,
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
),
child: Text(label),
);
}
/// Show AppBar demo
void _showAppBarDemo() {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: const Text('AppBar Example'),
content: const SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'The app bar at the top is a MaxUIAppBar with:',
style: TextStyle(fontWeight: FontWeight.w600),
),
SizedBox(height: 12),
Text(
'Custom title\nAction buttons\nTheme colors\nShadow support',
),
],
),
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('Close'),
),
],
),
);
}
/// Show container demo
void _showContainerDemo() {
showDialog(
context: context,
builder: (context) => Dialog(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Container Variants',
style: Theme.of(
context,
).textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w600),
),
const SizedBox(height: 20),
MaxUIContainer(
backgroundColor: Colors.white,
borderColor: Theme.of(context).primaryColor,
showShadow: true,
child: const Padding(
padding: EdgeInsets.all(16),
child: Text(
'MaxUIContainer with border and shadow',
style: TextStyle(fontWeight: FontWeight.w600),
),
),
),
const SizedBox(height: 16),
MaxUIGradientContainer(
gradient: const LinearGradient(
colors: [Colors.blue, Colors.purple],
),
child: const Center(
child: Text(
'Gradient Container',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
),
),
),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () => Navigator.pop(context),
child: const Text('Close'),
),
],
),
),
),
),
);
}
/// Show bottom sheet demo
void _showBottomSheetDemo() {
MaxUIBottomSheet.show(
context: context,
title: 'Bottom Sheet Options',
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ListTile(
leading: const Icon(Icons.settings),
title: const Text('Settings'),
onTap: () {
Navigator.pop(context);
MaxUISnackbar.info(
context: context,
message: 'Settings selected',
);
},
),
ListTile(
leading: const Icon(Icons.help),
title: const Text('Help'),
onTap: () {
Navigator.pop(context);
MaxUISnackbar.info(context: context, message: 'Help selected');
},
),
ListTile(
leading: const Icon(Icons.logout),
title: const Text('About'),
onTap: () {
Navigator.pop(context);
MaxUISnackbar.info(context: context, message: 'About selected');
},
),
],
),
);
}
/// Show image picker demo
void _showImagePickerDemo() {
MaxUIImagePickerSheet.show(
context: context,
onSourceSelected: (source) {
final message = source == ImagePickerSource.camera
? 'Camera selected'
: 'Gallery selected';
MaxUISnackbar.info(context: context, message: message);
},
);
}
}
class _BottomNavDemo extends StatefulWidget {
const _BottomNavDemo();
@override
State<_BottomNavDemo> createState() => _BottomNavDemoState();
}
class _BottomNavDemoState extends State<_BottomNavDemo> {
int _index = 0;
static const _destinations = [
MaxUIBottomNavDestination(icon: Icons.home_outlined, label: 'Home'),
MaxUIBottomNavDestination(icon: Icons.note_add_outlined, label: 'Add Report'),
MaxUIBottomNavDestination(icon: Icons.description_outlined, label: 'My Reports'),
MaxUIBottomNavDestination(icon: Icons.person_outline, label: 'Profile'),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Bottom Nav Demo')),
body: Center(
child: Text(
_destinations[_index].label,
style: Theme.of(context).textTheme.headlineSmall,
),
),
bottomNavigationBar: MaxUIBottomNavBar(
currentIndex: _index,
onTap: (i) => setState(() => _index = i),
destinations: _destinations,
),
);
}
}Metadata
1
likes
145
points
10
downloads
Documentation
Publisher
unverified uploader
Weekly Downloads
Metadata
!!Only basic widgets available. Nothing special in this update, wait for the update version: 1.5.0!! This package is under development and currently includes only basic Material Design-like widgets: AppBar, Snackbar, TextField, Dropdown, BottomNav, Container, BottomSheet, and Image Picker. Glassmorphism support has just started, and Android Liquid Glass implementation is planned at a minimum processing level — keep this package under observation for updates.
Repository (GitHub)
View/report issues
Topics
#flutter #ui #widget #material-design #components
License
MIT (license)