diff --git a/example/assets/RobotoMono-Regular.ttf b/example/assets/RobotoMono-Regular.ttf new file mode 100644 index 00000000..6df2b253 Binary files /dev/null and b/example/assets/RobotoMono-Regular.ttf differ diff --git a/example/assets/code_snippets/accordion.md b/example/assets/code_snippets/accordion.md index e5bc83bd..eea4d005 100644 --- a/example/assets/code_snippets/accordion.md +++ b/example/assets/code_snippets/accordion.md @@ -3,59 +3,59 @@ import 'package:moon_design/moon_design.dart'; enum AccordionItems { first, second } -class Accordion extends StatefulWidget { - const Accordion({super.key}); +class Accordion extends StatefulWidget { + const Accordion({super.key}); - @override - State createState() => _AccordionState(); + @override + State createState() => _AccordionState(); } class _AccordionState extends State { - AccordionItems? _currentlyOpenAccordionItem = AccordionItems.first; + AccordionItems? _currentlyOpenAccordionItem = AccordionItems.first; - @override - Widget build(BuildContext context) { - const String contentText = - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, " - "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, " - "quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."; + @override + Widget build(BuildContext context) { + const String contentText = + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, " + "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, " + "quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."; - return Column( - children: [ - MoonAccordion( - // identityValue and groupIdentityValue can be used to control the - // auto collapse behaviour of the accordion. - identityValue: AccordionItems.first, - groupIdentityValue: _currentlyOpenAccordionItem, - accordionSize: MoonAccordionSize.sm, - childrenPadding: const EdgeInsets.all(12), - onExpansionChanged: (AccordionItems? value) => setState( - () => _currentlyOpenAccordionItem = value, - ), - leading: const Icon(MoonIcons.other_frame_24_light), - title: const Text("Grouped MoonAccordion item #1"), - children: const [ - Text(contentText), - ], - ), - MoonAccordion( - // identityValue and groupIdentityValue can be used to control the - // auto collapse behaviour of the accordion. - identityValue: AccordionItems.second, - groupIdentityValue: _currentlyOpenAccordionItem, - accordionSize: MoonAccordionSize.sm, - hasContentOutside: true, - childrenPadding: const EdgeInsets.all(12), - onExpansionChanged: (AccordionItems? value) => setState( - () => _currentlyOpenAccordionItem = value, - ), - leading: const Icon(MoonIcons.other_frame_24_light), - title: const Text("Grouped MoonAccordion item #2"), - children: const [ - Text(contentText), - ], - ), - ], - ); - } + return Column( + children: [ + MoonAccordion( + // identityValue and groupIdentityValue can be used to control the + // auto collapse behaviour of the accordion. + identityValue: AccordionItems.first, + groupIdentityValue: _currentlyOpenAccordionItem, + accordionSize: MoonAccordionSize.sm, + childrenPadding: const EdgeInsets.all(12), + onExpansionChanged: (AccordionItems? value) => setState( + () => _currentlyOpenAccordionItem = value, + ), + leading: const Icon(MoonIcons.other_frame_24_light), + title: const Text("Grouped MoonAccordion item #1"), + children: const [ + Text(contentText), + ], + ), + MoonAccordion( + // identityValue and groupIdentityValue can be used to control the + // auto collapse behaviour of the accordion. + identityValue: AccordionItems.second, + groupIdentityValue: _currentlyOpenAccordionItem, + accordionSize: MoonAccordionSize.sm, + hasContentOutside: true, + childrenPadding: const EdgeInsets.all(12), + onExpansionChanged: (AccordionItems? value) => setState( + () => _currentlyOpenAccordionItem = value, + ), + leading: const Icon(MoonIcons.other_frame_24_light), + title: const Text("Grouped MoonAccordion item #2"), + children: const [ + Text(contentText), + ], + ), + ], + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/alert.md b/example/assets/code_snippets/alert.md index a14aaa16..ba4f8961 100644 --- a/example/assets/code_snippets/alert.md +++ b/example/assets/code_snippets/alert.md @@ -2,38 +2,54 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Alert extends StatelessWidget { - const Alert({super.key}); + const Alert({super.key}); - @override - Widget build(BuildContext context) { - return Column( - children: [ - MoonAlert( - show: true, - leading: const Icon(MoonIcons.other_frame_24_light), - title: const Text("Base MoonAlert"), - trailing: MoonButton.icon( - buttonSize: MoonButtonSize.xs, - onTap: () => {}, - icon: const Icon(MoonIcons.controls_close_24_light), - ), - body: const Text("Here goes MoonAlert body"), - ), - MoonFilledAlert( - show: true, - color: context.moonColors!.chichi, - onTrailingTap: () => {}, - leading: const Icon(MoonIcons.notifications_alert_24_light), - title: const Text("Filled error MoonAlert"), - ), - MoonOutlinedAlert( - show: true, - color: context.moonColors!.roshi, - onTrailingTap: () => {}, - leading: const Icon(MoonIcons.generic_check_rounded_24_light), - title: const Text("Outlined success MoonAlert"), - ), - ], - ); - } + @override + Widget build(BuildContext context) { + return Column( + children: [ + MoonAlert( + show: true, + leading: const Icon(MoonIcons.other_frame_24_light), + title: const Text("Base MoonAlert"), + trailing: MoonButton.icon( + buttonSize: MoonButtonSize.xs, + onTap: () => {}, + icon: const Icon(MoonIcons.controls_close_24_light), + ), + body: const Text("Here goes MoonAlert body"), + ), + MoonAlert.filled( + show: true, + color: context.moonColors!.chichi, + backgroundColor: context.moonColors!.chichi10, + leading: const Icon(MoonIcons.notifications_alert_24_light), + title: const Text("Filled error MoonAlert"), + trailing: MoonButton.icon( + buttonSize: MoonButtonSize.xs, + onTap: () {}, + icon: Icon( + MoonIcons.controls_close_small_24_light, + color: context.moonColors!.chichi, + ), + ), + ), + MoonAlert.outlined( + show: true, + color: context.moonColors!.roshi, + borderColor: context.moonColors!.roshi, + leading: const Icon(MoonIcons.generic_check_rounded_24_light), + title: const Text("Outlined success MoonAlert"), + trailing: MoonButton.icon( + buttonSize: MoonButtonSize.xs, + onTap: () {}, + icon: Icon( + MoonIcons.controls_close_small_24_light, + color: context.moonColors!.roshi, + ), + ), + ), + ], + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/auth_code.md b/example/assets/code_snippets/auth_code.md index 0f9789d0..0489211d 100644 --- a/example/assets/code_snippets/auth_code.md +++ b/example/assets/code_snippets/auth_code.md @@ -4,52 +4,52 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class AuthCode extends StatefulWidget { - const AuthCode({super.key}); + const AuthCode({super.key}); - @override - State createState() => _AuthCodeState(); + @override + State createState() => _AuthCodeState(); } class _AuthCodeState extends State { - late StreamController _errorStreamController; - - @override - void initState() { - super.initState(); - - _errorStreamController = StreamController(); - } - - @override - void dispose() { - _errorStreamController.close(); - - super.dispose(); - } - - @override - Widget build(BuildContext context) { - return SizedBox( - height: 95, // To avoid widget jumping with error text, use a fixed-height wrapper. - child: MoonAuthCode( - errorStreamController: _errorStreamController, - onCompleted: (String pin) { - if (pin != '123456') { - _errorStreamController.add(ErrorAnimationType.shake); - } - }, - validator: (String? pin) => pin?.length == 6 && pin != '123456' - ? 'Invalid authentication code. Please try again.' - : null, - errorBuilder: (BuildContext context, String? errorText) { - return Align( - child: Padding( - padding: const EdgeInsets.only(top: 8), - child: Text(errorText ?? ''), - ), - ); - }, + late StreamController _errorStreamController; + + @override + void initState() { + super.initState(); + + _errorStreamController = StreamController(); + } + + @override + void dispose() { + _errorStreamController.close(); + + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return SizedBox( + height: 95, // To avoid widget jumping with error text, use a fixed-height wrapper. + child: MoonAuthCode( + errorStreamController: _errorStreamController, + onCompleted: (String pin) { + if (pin != '123456') { + _errorStreamController.add(ErrorAnimationType.shake); + } + }, + validator: (String? pin) => pin?.length == 6 && pin != '123456' + ? 'Invalid authentication code. Please try again.' + : null, + errorBuilder: (BuildContext context, String? errorText) { + return Align( + child: Padding( + padding: const EdgeInsets.only(top: 8), + child: Text(errorText ?? ''), ), - ); - } + ); + }, + ), + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/avatar.md b/example/assets/code_snippets/avatar.md index a94fa4dd..226df2f7 100644 --- a/example/assets/code_snippets/avatar.md +++ b/example/assets/code_snippets/avatar.md @@ -1,15 +1,15 @@ -import 'package:flutter/material.dart'; +import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; -class Avatar extends StatelessWidget { - const Avatar({super.key}); +class Avatar extends StatelessWidget { + const Avatar({super.key}); - @override - Widget build(BuildContext context) { - return const MoonAvatar( - avatarSize: MoonAvatarSize.sm, - showBadge: true, - content: Text('MD'), - ); - } + @override + Widget build(BuildContext context) { + return const MoonAvatar( + avatarSize: MoonAvatarSize.sm, + showBadge: true, + content: Text('MD'), + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/bottom_sheet.md b/example/assets/code_snippets/bottom_sheet.md index 0f327c0b..6d2d54d5 100644 --- a/example/assets/code_snippets/bottom_sheet.md +++ b/example/assets/code_snippets/bottom_sheet.md @@ -2,44 +2,44 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class BottomSheet extends StatelessWidget { - const BottomSheet({super.key}); + const BottomSheet({super.key}); - @override - Widget build(BuildContext context) { - Future bottomSheetBuilder(BuildContext context) { - return showMoonModalBottomSheet( - context: context, - enableDrag: true, - height: MediaQuery.of(context).size.height * 0.7, - builder: (BuildContext context) => Column( - children: [ - // Drag handle for the bottom sheet - Container( - height: 4, - width: 40, - margin: const EdgeInsets.symmetric(vertical: 8), - decoration: ShapeDecoration( - color: context.moonColors!.beerus, - shape: MoonSquircleBorder( - borderRadius: BorderRadius.circular(16).squircleBorderRadius(context), - ), - ), - ), - const Expanded( - child: Align( - child: Text('MoonBottomSheet example'), - ), - ), - ], + @override + Widget build(BuildContext context) { + Future bottomSheetBuilder(BuildContext context) { + return showMoonModalBottomSheet( + context: context, + enableDrag: true, + height: MediaQuery.of(context).size.height * 0.7, + builder: (BuildContext context) => Column( + children: [ + // Drag handle for the bottom sheet + Container( + height: 4, + width: 40, + margin: const EdgeInsets.symmetric(vertical: 8), + decoration: ShapeDecoration( + color: context.moonColors!.beerus, + shape: MoonSquircleBorder( + borderRadius: BorderRadius.circular(16).squircleBorderRadius(context), ), - ); - } - - return Center( - child: MoonFilledButton( - onTap: () => bottomSheetBuilder(context), - label: const Text("Tap me"), + ), + ), + const Expanded( + child: Align( + child: Text('MoonBottomSheet example'), + ), ), - ); + ], + ), + ); } + + return Center( + child: MoonFilledButton( + onTap: () => bottomSheetBuilder(context), + label: const Text("Tap me"), + ), + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/button.md b/example/assets/code_snippets/button.md index b84ffa48..c58b5839 100644 --- a/example/assets/code_snippets/button.md +++ b/example/assets/code_snippets/button.md @@ -2,46 +2,46 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Button extends StatelessWidget { - const Button({super.key}); + const Button({super.key}); - @override - Widget build(BuildContext context) { - return Column( - children: [ - MoonButton( - buttonSize: MoonButtonSize.sm, - onTap: () {}, - leading: const Icon(MoonIcons.other_frame_24_light), - label: const Text('MoonButton'), - trailing: const Icon(MoonIcons.other_frame_24_light), - ), - MoonButton.icon( - buttonSize: MoonButtonSize.sm, - onTap: () {}, - icon: const Icon(MoonIcons.other_frame_24_light), - ), - MoonFilledButton( - buttonSize: MoonButtonSize.sm, - onTap: () {}, - leading: const Icon(MoonIcons.other_frame_24_light), - label: const Text("MoonFilledButton"), - trailing: const Icon(MoonIcons.other_frame_24_light), - ), - MoonOutlinedButton( - buttonSize: MoonButtonSize.sm, - onTap: () {}, - leading: const Icon(MoonIcons.other_frame_24_light), - label: const Text("MoonOutlinedButton"), - trailing: const Icon(MoonIcons.other_frame_24_light), - ), - MoonTextButton( - buttonSize: MoonButtonSize.sm, - onTap: () {}, - leading: const Icon(MoonIcons.other_frame_24_light), - label: const Text("MoonTextButton"), - trailing: const Icon(MoonIcons.other_frame_24_light), - ), - ], - ); - } + @override + Widget build(BuildContext context) { + return Column( + children: [ + MoonButton( + buttonSize: MoonButtonSize.sm, + onTap: () {}, + leading: const Icon(MoonIcons.other_frame_24_light), + label: const Text('MoonButton'), + trailing: const Icon(MoonIcons.other_frame_24_light), + ), + MoonButton.icon( + buttonSize: MoonButtonSize.sm, + onTap: () {}, + icon: const Icon(MoonIcons.other_frame_24_light), + ), + MoonFilledButton( + buttonSize: MoonButtonSize.sm, + onTap: () {}, + leading: const Icon(MoonIcons.other_frame_24_light), + label: const Text("MoonFilledButton"), + trailing: const Icon(MoonIcons.other_frame_24_light), + ), + MoonOutlinedButton( + buttonSize: MoonButtonSize.sm, + onTap: () {}, + leading: const Icon(MoonIcons.other_frame_24_light), + label: const Text("MoonOutlinedButton"), + trailing: const Icon(MoonIcons.other_frame_24_light), + ), + MoonTextButton( + buttonSize: MoonButtonSize.sm, + onTap: () {}, + leading: const Icon(MoonIcons.other_frame_24_light), + label: const Text("MoonTextButton"), + trailing: const Icon(MoonIcons.other_frame_24_light), + ), + ], + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/carousel.md b/example/assets/code_snippets/carousel.md index c9c0378d..be65888c 100644 --- a/example/assets/code_snippets/carousel.md +++ b/example/assets/code_snippets/carousel.md @@ -2,29 +2,29 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Carousel extends StatelessWidget { - const Carousel({super.key}); + const Carousel({super.key}); - @override - Widget build(BuildContext context) { - return OverflowBox( - maxWidth: MediaQuery.of(context).size.width, - minHeight: 110, - maxHeight: 110, - child: MoonCarousel( - itemCount: 10, - itemExtent: 110, - itemBuilder: (BuildContext context, int itemIndex, int _) => Container( - decoration: ShapeDecoration( - color: context.moonColors!.goku, - shape: MoonSquircleBorder( - borderRadius: BorderRadius.circular(12).squircleBorderRadius(context), - ), - ), - child: Center( - child: Text("${itemIndex + 1}"), - ), - ), + @override + Widget build(BuildContext context) { + return OverflowBox( + maxWidth: MediaQuery.of(context).size.width, + minHeight: 110, + maxHeight: 110, + child: MoonCarousel( + itemCount: 10, + itemExtent: 110, + itemBuilder: (BuildContext context, int itemIndex, int _) => Container( + decoration: ShapeDecoration( + color: context.moonColors!.goku, + shape: MoonSquircleBorder( + borderRadius: BorderRadius.circular(12).squircleBorderRadius(context), ), - ); - } + ), + child: Center( + child: Text("${itemIndex + 1}"), + ), + ), + ), + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/checkbox.md b/example/assets/code_snippets/checkbox.md index 62b326b1..9f784d1b 100644 --- a/example/assets/code_snippets/checkbox.md +++ b/example/assets/code_snippets/checkbox.md @@ -2,31 +2,31 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Checkbox extends StatefulWidget { - const Checkbox({super.key}); + const Checkbox({super.key}); - @override - State createState() => _CheckboxState(); + @override + State createState() => _CheckboxState(); } class _CheckboxState extends State { - bool? checkboxValue = false; - bool? checkboxWithLabelValue = false; + bool? checkboxValue = false; + bool? checkboxWithLabelValue = false; - @override - Widget build(BuildContext context) { - return Column( - children: [ - MoonCheckbox( - value: checkboxValue, - onChanged: (bool? newValue) => setState(() => checkboxValue = newValue), - ), - MoonCheckbox.withLabel( - context, - value: checkboxWithLabelValue, - label: "MoonCheckbox with label", - onChanged: (bool? newValue) => setState(() => checkboxWithLabelValue = newValue), - ), - ], - ); - } + @override + Widget build(BuildContext context) { + return Column( + children: [ + MoonCheckbox( + value: checkboxValue, + onChanged: (bool? newValue) => setState(() => checkboxValue = newValue), + ), + MoonCheckbox.withLabel( + context, + value: checkboxWithLabelValue, + label: "MoonCheckbox with label", + onChanged: (bool? newValue) => setState(() => checkboxWithLabelValue = newValue), + ), + ], + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/chip.md b/example/assets/code_snippets/chip.md index 375c14f6..6d714b0a 100644 --- a/example/assets/code_snippets/chip.md +++ b/example/assets/code_snippets/chip.md @@ -2,25 +2,25 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Chip extends StatelessWidget { - const Chip({super.key}); + const Chip({super.key}); - @override - Widget build(BuildContext context) { - return const Column( - children: [ - MoonChip( - chipSize: MoonChipSize.sm, - leading: Icon(MoonIcons.other_frame_24_light), - label: Text('MoonChip'), - trailing: Icon(MoonIcons.other_frame_24_light), - ), - MoonChip.text( - chipSize: MoonChipSize.sm, - leading: Icon(MoonIcons.other_frame_24_light), - label: Text('MoonChip with text'), - trailing: Icon(MoonIcons.other_frame_24_light), - ), - ], - ); - } + @override + Widget build(BuildContext context) { + return const Column( + children: [ + MoonChip( + chipSize: MoonChipSize.sm, + leading: Icon(MoonIcons.other_frame_24_light), + label: Text('MoonChip'), + trailing: Icon(MoonIcons.other_frame_24_light), + ), + MoonChip.text( + chipSize: MoonChipSize.sm, + leading: Icon(MoonIcons.other_frame_24_light), + label: Text('MoonChip with text'), + trailing: Icon(MoonIcons.other_frame_24_light), + ), + ], + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/circular_loader.md b/example/assets/code_snippets/circular_loader.md index 8e73b7d8..1628be35 100644 --- a/example/assets/code_snippets/circular_loader.md +++ b/example/assets/code_snippets/circular_loader.md @@ -2,12 +2,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class CircularLoader extends StatelessWidget { - const CircularLoader({super.key}); + const CircularLoader({super.key}); - @override - Widget build(BuildContext context) { - return const MoonCircularLoader( - circularLoaderSize: MoonCircularLoaderSize.sm, - ); - } + @override + Widget build(BuildContext context) { + return const MoonCircularLoader( + circularLoaderSize: MoonCircularLoaderSize.sm, + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/circular_progress.md b/example/assets/code_snippets/circular_progress.md index b551c12a..daba5d1a 100644 --- a/example/assets/code_snippets/circular_progress.md +++ b/example/assets/code_snippets/circular_progress.md @@ -2,14 +2,14 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class CircularProgress extends StatelessWidget { - const CircularProgress({super.key}); + const CircularProgress({super.key}); - @override - Widget build(BuildContext context) { - return const MoonCircularProgress( - value: 0.75, - circularProgressSize: MoonCircularProgressSize.sm, - ); - } + @override + Widget build(BuildContext context) { + return const MoonCircularProgress( + value: 0.75, + circularProgressSize: MoonCircularProgressSize.sm, + ); + } } diff --git a/example/assets/code_snippets/dot_indicator.md b/example/assets/code_snippets/dot_indicator.md index 6778ef34..d10fcc80 100644 --- a/example/assets/code_snippets/dot_indicator.md +++ b/example/assets/code_snippets/dot_indicator.md @@ -2,13 +2,13 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class DotIndicator extends StatelessWidget { - const DotIndicator({super.key}); + const DotIndicator({super.key}); - @override - Widget build(BuildContext context) { - return const MoonDotIndicator( - dotCount: 4, - selectedDot: 2, - ); - } + @override + Widget build(BuildContext context) { + return const MoonDotIndicator( + dotCount: 4, + selectedDot: 2, + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/drawer.md b/example/assets/code_snippets/drawer.md index 1c52609e..c967fe05 100644 --- a/example/assets/code_snippets/drawer.md +++ b/example/assets/code_snippets/drawer.md @@ -2,31 +2,31 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Drawer extends StatelessWidget { - const Drawer({super.key}); + const Drawer({super.key}); - @override - Widget build(BuildContext context) { - return OverflowBox( - maxHeight: MediaQuery.of(context).size.height, - maxWidth: MediaQuery.of(context).size.width, - child: Scaffold( - drawer: MoonDrawer( - width: MediaQuery.of(context).size.width * 0.4, - child: const Align( - child: Text("MoonDrawer"), - ), - ), - body: Builder( - builder: (BuildContext context) { - return Center( - child: MoonFilledButton( - label: const Text("Open drawer"), - onTap: () => Scaffold.of(context).openDrawer(), - ), - ); - }, - ), - ), - ); - } + @override + Widget build(BuildContext context) { + return OverflowBox( + maxHeight: MediaQuery.of(context).size.height, + maxWidth: MediaQuery.of(context).size.width, + child: Scaffold( + drawer: MoonDrawer( + width: MediaQuery.of(context).size.width * 0.4, + child: const Align( + child: Text("MoonDrawer"), + ), + ), + body: Builder( + builder: (BuildContext context) { + return Center( + child: MoonFilledButton( + onTap: () => Scaffold.of(context).openDrawer(), + label: const Text("Open drawer"), + ), + ); + }, + ), + ), + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/dropdown.md b/example/assets/code_snippets/dropdown.md index 90202254..5c2029e9 100644 --- a/example/assets/code_snippets/dropdown.md +++ b/example/assets/code_snippets/dropdown.md @@ -4,163 +4,161 @@ import 'package:moon_design/moon_design.dart'; const String _groupId = "dropdown"; class Dropdown extends StatefulWidget { - const Dropdown({super.key}); + const Dropdown({super.key}); - @override - State createState() => _DropdownState(); + @override + State createState() => _DropdownState(); } class _DropdownState extends State { - final Map _availableChoices = { - "Choice #1": false, - "Choice #2": false, - }; + final Map _availableChoices = { + "Choice #1": false, + "Choice #2": false, + }; - bool _showChoices = false; - bool _showMenu = false; - bool _showMenuInner = false; - Color? _buttonColor; - String _buttonName = "Piccolo"; + bool _showChoices = false; + bool _showMenu = false; + bool _showMenuInner = false; + Color? _buttonColor; + String _buttonName = "Piccolo"; - @override - Widget build(BuildContext context) { - return Column( + @override + Widget build(BuildContext context) { + return Column( + children: [ + //Dropdown with multiple choices + MoonDropdown( + show: _showChoices, + constrainWidthToChild: true, + contentPadding: const EdgeInsets.symmetric(horizontal: 16), + onTapOutside: () => setState(() => _showChoices = false), + content: Column( children: [ - //Dropdown with multiple choices - MoonDropdown( - show: _showChoices, - constrainWidthToChild: true, - contentPadding: const EdgeInsets.symmetric(horizontal: 16), - onTapOutside: () => setState(() => _showChoices = false), - content: Column( - children: [ - MoonCheckbox.withLabel( - context, - value: _availableChoices["Choice #1"], - label: "Choice #1", - onChanged: (bool? isSelected) => setState( - () => _availableChoices["Choice #1"] = isSelected!, - ), - ), - MoonCheckbox.withLabel( - context, - value: _availableChoices["Choice #2"], - label: "Choice #2", - onChanged: (bool? isSelected) => setState( - () => _availableChoices["Choice #2"] = isSelected!, - ), - ), - ], - ), - child: MoonTextInput( - mouseCursor: MouseCursor.defer, - readOnly: true, - width: 250, - hintText: "Choose an option", - onTap: () => setState(() => _showChoices = !_showChoices), - leading: _availableChoices.values.any((element) => element == true) - ? Center( - child: GestureDetector( - onTap: () => setState( - () => _availableChoices.updateAll((key, value) => false), - ), - child: MoonTag( - tagSize: MoonTagSize.xs, - label: Text( - "${_availableChoices.values.where((element) => element == true).length}", - ), - trailing: const Icon(MoonIcons.controls_close_small_16_light), - ), - ), - ) - : null, - trailing: Center( - child: AnimatedRotation( - duration: const Duration(milliseconds: 200), - turns: _showChoices ? -0.5 : 0, - child: const Icon(MoonIcons.controls_chevron_down_small_16_light), - ), - ), - ), + MoonCheckbox.withLabel( + context, + value: _availableChoices["Choice #1"], + label: "Choice #1", + onChanged: (bool? isSelected) => setState( + () => _availableChoices["Choice #1"] = isSelected!, + ), + ), + MoonCheckbox.withLabel( + context, + value: _availableChoices["Choice #2"], + label: "Choice #2", + onChanged: (bool? isSelected) => setState( + () => _availableChoices["Choice #2"] = isSelected!, ), + ), + ], + ), + child: MoonTextInput( + mouseCursor: MouseCursor.defer, + readOnly: true, + width: 250, + hintText: "Choose an option", + onTap: () => setState(() => _showChoices = !_showChoices), + leading: _availableChoices.values.any((element) => element == true) + ? Center( + child: GestureDetector( + onTap: () => setState(() => _availableChoices.updateAll((key, value) => false)), + child: MoonTag( + tagSize: MoonTagSize.xs, + label: Text( + "${_availableChoices.values.where((element) => element == true).length}", + ), + trailing: const Icon(MoonIcons.controls_close_small_16_light), + ), + ), + ) + : null, + trailing: Center( + child: AnimatedRotation( + duration: const Duration(milliseconds: 200), + turns: _showChoices ? -0.5 : 0, + child: const Icon(MoonIcons.controls_chevron_down_small_16_light), + ), + ), + ), + ), - // Dropdown as menu - MoonDropdown( - show: _showMenu, - groupId: _groupId, - constrainWidthToChild: true, - onTapOutside: () => setState(() { + // Dropdown as menu + MoonDropdown( + show: _showMenu, + groupId: _groupId, + constrainWidthToChild: true, + onTapOutside: () => setState(() { + _showMenu = false; + _showMenuInner = false; + }), + content: Column( + children: [ + MoonMenuItem( + onTap: () => setState(() { + _showMenu = false; + _buttonName = "Piccolo"; + _buttonColor = context.moonColors!.piccolo; + }), + title: const Text("Piccolo"), + ), + MoonDropdown( + show: _showMenuInner, + groupId: _groupId, + constrainWidthToChild: true, + followerAnchor: Alignment.topLeft, + targetAnchor: Alignment.topRight, + offset: const Offset(8, 0), + content: Column( + children: [ + MoonMenuItem( + onTap: () => setState(() { _showMenu = false; _showMenuInner = false; - }), - content: Column( - children: [ - MoonMenuItem( - onTap: () => setState(() { - _showMenu = false; - _buttonName = "Piccolo"; - _buttonColor = context.moonColors!.piccolo; - }), - title: const Text("Piccolo"), - ), - MoonDropdown( - show: _showMenuInner, - groupId: _groupId, - constrainWidthToChild: true, - followerAnchor: Alignment.topLeft, - targetAnchor: Alignment.topRight, - offset: const Offset(8, 0), - content: Column( - children: [ - MoonMenuItem( - onTap: () => setState(() { - _showMenu = false; - _showMenuInner = false; - _buttonName = "Roshi"; - _buttonColor = context.moonColors!.roshi; - }), - title: const Text("Roshi"), - ), - MoonMenuItem( - onTap: () => setState(() { - _showMenu = false; - _showMenuInner = false; - _buttonName = "Roshi60"; - _buttonColor = context.moonColors!.roshi60; - }), - title: const Text("Roshi60"), - ), - MoonMenuItem( - onTap: () => setState(() { - _showMenu = false; - _showMenuInner = false; - _buttonName = "Roshi10"; - _buttonColor = context.moonColors!.roshi10; - }), - title: const Text("Roshi10"), - ), - ], - ), - child: MoonMenuItem( - backgroundColor: _showMenuInner ? context.moonColors!.heles : null, - onTap: () => setState(() => _showMenuInner = !_showMenuInner), - title: const Text("Roshi"), - trailing: const Icon( - MoonIcons.controls_chevron_right_16_light, - size: 16, - ), - ), - ), - ], + _buttonName = "Roshi"; + _buttonColor = context.moonColors!.roshi; + }), + title: const Text("Roshi"), ), - child: MoonFilledButton( - width: 120, - backgroundColor: _buttonColor, - onTap: () => setState(() => _showMenu = !_showMenu), - label: Text(_buttonName), + MoonMenuItem( + onTap: () => setState(() { + _showMenu = false; + _showMenuInner = false; + _buttonName = "Roshi60"; + _buttonColor = context.moonColors!.roshi60; + }), + title: const Text("Roshi60"), + ), + MoonMenuItem( + onTap: () => setState(() { + _showMenu = false; + _showMenuInner = false; + _buttonName = "Roshi10"; + _buttonColor = context.moonColors!.roshi10; + }), + title: const Text("Roshi10"), ), + ], + ), + child: MoonMenuItem( + backgroundColor: _showMenuInner ? context.moonColors!.heles : null, + onTap: () => setState(() => _showMenuInner = !_showMenuInner), + title: const Text("Roshi"), + trailing: const Icon( + MoonIcons.controls_chevron_right_16_light, + size: 16, + ), ), + ), ], - ); - } + ), + child: MoonFilledButton( + width: 120, + backgroundColor: _buttonColor, + onTap: () => setState(() => _showMenu = !_showMenu), + label: Text(_buttonName), + ), + ), + ], + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/icons.md b/example/assets/code_snippets/icons.md index 7b52ac80..05068ecc 100644 --- a/example/assets/code_snippets/icons.md +++ b/example/assets/code_snippets/icons.md @@ -2,10 +2,10 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Icons extends StatelessWidget { - const Icons({super.key}); + const Icons({super.key}); - @override - Widget build(BuildContext context) { - return const Icon(MoonIcons.other_frame_24_light); - } + @override + Widget build(BuildContext context) { + return const Icon(MoonIcons.other_frame_24_light); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/linear_loader.md b/example/assets/code_snippets/linear_loader.md index 1be8c1ee..2141ea2d 100644 --- a/example/assets/code_snippets/linear_loader.md +++ b/example/assets/code_snippets/linear_loader.md @@ -2,12 +2,12 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class LinearLoader extends StatelessWidget { - const LinearLoader({super.key}); + const LinearLoader({super.key}); - @override - Widget build(BuildContext context) { - return const MoonLinearLoader( - linearLoaderSize: MoonLinearLoaderSize.x4s, - ); - } + @override + Widget build(BuildContext context) { + return const MoonLinearLoader( + linearLoaderSize: MoonLinearLoaderSize.x4s, + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/linear_progress.md b/example/assets/code_snippets/linear_progress.md index ecc0fe63..abcab44f 100644 --- a/example/assets/code_snippets/linear_progress.md +++ b/example/assets/code_snippets/linear_progress.md @@ -2,13 +2,13 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class LinearProgress extends StatelessWidget { - const LinearProgress({super.key}); + const LinearProgress({super.key}); - @override - Widget build(BuildContext context) { - return const MoonLinearProgress( - value: 0.75, - linearProgressSize: MoonLinearProgressSize.x4s, - ); - } + @override + Widget build(BuildContext context) { + return const MoonLinearProgress( + value: 0.75, + linearProgressSize: MoonLinearProgressSize.x4s, + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/menu_item.md b/example/assets/code_snippets/menu_item.md index e62f871f..3806efe2 100644 --- a/example/assets/code_snippets/menu_item.md +++ b/example/assets/code_snippets/menu_item.md @@ -2,20 +2,20 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class MenuItem extends StatefulWidget { - const MenuItem({super.key}); + const MenuItem({super.key}); - @override - State createState() => _MenuItemState(); + @override + State createState() => _MenuItemState(); } class _MenuItemState extends State { - @override - Widget build(BuildContext context) { - return MoonMenuItem( - onTap: () {}, - title: const Text("Menu Item"), - leading: const Icon(MoonIcons.notifications_activity_32_regular), - trailing: const Icon(MoonIcons.controls_chevron_right_24_light), - ); - } + @override + Widget build(BuildContext context) { + return MoonMenuItem( + onTap: () {}, + title: const Text("Menu Item"), + leading: const Icon(MoonIcons.notifications_activity_32_regular), + trailing: const Icon(MoonIcons.controls_chevron_right_24_light), + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/modal.md b/example/assets/code_snippets/modal.md index 02775df0..d5d7e3bb 100644 --- a/example/assets/code_snippets/modal.md +++ b/example/assets/code_snippets/modal.md @@ -2,34 +2,34 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Modal extends StatelessWidget { - const Modal({super.key}); + const Modal({super.key}); - @override - Widget build(BuildContext context) { - Future modalBuilder(BuildContext context) { - return showMoonModal( - context: context, - builder: (BuildContext _) { - return MoonModal( - child: SizedBox( - height: 150, - width: MediaQuery.of(context).size.width - 64, - child: const Center( - child: Text("This is MoonModal."), - ), - ), - ); - }, - ); - } + @override + Widget build(BuildContext context) { + Future modalBuilder(BuildContext context) { + return showMoonModal( + context: context, + builder: (BuildContext _) { + return MoonModal( + child: SizedBox( + height: 150, + width: MediaQuery.of(context).size.width - 64, + child: const Center( + child: Text("This is MoonModal."), + ), + ), + ); + }, + ); + } - return Builder( - builder: (BuildContext context) { - return MoonFilledButton( - label: const Text("Open MoonModal"), - onTap: () => modalBuilder(context), - ); - }, + return Builder( + builder: (BuildContext context) { + return MoonFilledButton( + label: const Text("Open MoonModal"), + onTap: () => modalBuilder(context), ); - } + }, + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/popover.md b/example/assets/code_snippets/popover.md index 47c8842e..fad048e4 100644 --- a/example/assets/code_snippets/popover.md +++ b/example/assets/code_snippets/popover.md @@ -2,25 +2,25 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Popover extends StatefulWidget { - const Popover({super.key}); + const Popover({super.key}); - @override - State createState() => _PopoverState(); + @override + State createState() => _PopoverState(); } class _PopoverState extends State { - bool show = false; + bool show = false; - @override - Widget build(BuildContext context) { - return MoonPopover( - show: show, - onTapOutside: () => setState(() => show = false), - content: const Text('This is MoonPopover'), - child: MoonFilledButton( - onTap: () => setState(() => show = !show), - label: const Text("Show MoonPopover"), - ), - ); - } + @override + Widget build(BuildContext context) { + return MoonPopover( + show: show, + onTapOutside: () => setState(() => show = false), + content: const Text('This is MoonPopover'), + child: MoonFilledButton( + onTap: () => setState(() => show = !show), + label: const Text("Show MoonPopover"), + ), + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/radio.md b/example/assets/code_snippets/radio.md index d2163cc1..70368af3 100644 --- a/example/assets/code_snippets/radio.md +++ b/example/assets/code_snippets/radio.md @@ -4,32 +4,32 @@ import 'package:moon_design/moon_design.dart'; enum RadioSelection { first, second } class Radio extends StatefulWidget { - const Radio({super.key}); + const Radio({super.key}); - @override - State createState() => _RadioState(); + @override + State createState() => _RadioState(); } class _RadioState extends State { - RadioSelection? radioSelection = RadioSelection.first; + RadioSelection? radioSelection = RadioSelection.first; - @override - Widget build(BuildContext context) { - return Column( - children: [ - MoonRadio( - value: RadioSelection.first, - groupValue: radioSelection, - onChanged: (RadioSelection? selection) => setState(() => radioSelection = selection), - ), - MoonRadio.withLabel( - context, - value: RadioSelection.second, - groupValue: radioSelection, - label: "With label", - onChanged: (RadioSelection? selection) => setState(() => radioSelection = selection), - ), - ], - ); - } + @override + Widget build(BuildContext context) { + return Column( + children: [ + MoonRadio( + value: RadioSelection.first, + groupValue: radioSelection, + onChanged: (RadioSelection? selection) => setState(() => radioSelection = selection), + ), + MoonRadio.withLabel( + context, + value: RadioSelection.second, + groupValue: radioSelection, + label: "With label", + onChanged: (RadioSelection? selection) => setState(() => radioSelection = selection), + ), + ], + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/segmented_control.md b/example/assets/code_snippets/segmented_control.md index 8eacf13f..32adba76 100644 --- a/example/assets/code_snippets/segmented_control.md +++ b/example/assets/code_snippets/segmented_control.md @@ -2,33 +2,33 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class SegmentedControl extends StatelessWidget { - const SegmentedControl({super.key}); + const SegmentedControl({super.key}); - @override - Widget build(BuildContext context) { - return Column( - children: [ - MoonSegmentedControl( - segmentedControlSize: MoonSegmentedControlSize.sm, - segments: const [ - Segment( - leading: Icon(MoonIcons.other_frame_24_light), - label: Text('Tab1'), - trailing: Icon(MoonIcons.other_frame_24_light), - ), - Segment( - leading: Icon(MoonIcons.other_frame_24_light), - label: Text('Tab2'), - trailing: Icon(MoonIcons.other_frame_24_light), - ), - Segment( - leading: Icon(MoonIcons.other_frame_24_light), - label: Text('Tab3'), - trailing: Icon(MoonIcons.other_frame_24_light), - ), - ], - ), - ], - ); - } + @override + Widget build(BuildContext context) { + return Column( + children: [ + MoonSegmentedControl( + segmentedControlSize: MoonSegmentedControlSize.sm, + segments: const [ + Segment( + leading: Icon(MoonIcons.other_frame_24_light), + label: Text('Tab1'), + trailing: Icon(MoonIcons.other_frame_24_light), + ), + Segment( + leading: Icon(MoonIcons.other_frame_24_light), + label: Text('Tab2'), + trailing: Icon(MoonIcons.other_frame_24_light), + ), + Segment( + leading: Icon(MoonIcons.other_frame_24_light), + label: Text('Tab3'), + trailing: Icon(MoonIcons.other_frame_24_light), + ), + ], + ), + ], + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/switch.md b/example/assets/code_snippets/switch.md index f187d33e..f9266960 100644 --- a/example/assets/code_snippets/switch.md +++ b/example/assets/code_snippets/switch.md @@ -2,21 +2,21 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Switch extends StatefulWidget { - const Switch({super.key}); + const Switch({super.key}); - @override - State createState() => _SwitchState(); + @override + State createState() => _SwitchState(); } class _SwitchState extends State { - bool switchValue = false; + bool switchValue = false; - @override - Widget build(BuildContext context) { - return MoonSwitch( - value: switchValue, - switchSize: MoonSwitchSize.sm, - onChanged: (bool newValue) => setState(() => switchValue = newValue), - ); - } + @override + Widget build(BuildContext context) { + return MoonSwitch( + value: switchValue, + switchSize: MoonSwitchSize.sm, + onChanged: (bool newValue) => setState(() => switchValue = newValue), + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/tab_bar.md b/example/assets/code_snippets/tab_bar.md index 6b10f0c0..2a1fa579 100644 --- a/example/assets/code_snippets/tab_bar.md +++ b/example/assets/code_snippets/tab_bar.md @@ -1,54 +1,149 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; -class TabBar extends StatelessWidget { - const TabBar({super.key}); +class TabBar extends StatefulWidget { + const TabBar({super.key}); - @override - Widget build(BuildContext context) { - return Column( + @override + State createState() => _TabBarState(); +} + +class _TabBarState extends State with SingleTickerProviderStateMixin { + late TabController tabController; + + @override + void initState() { + super.initState(); + + tabController = TabController(length: 3, vsync: this); + } + + @override + Widget build(BuildContext context) { + return Column( + children: [ + MoonTabBar( + tabBarSize: MoonTabBarSize.sm, + tabs: const [ + MoonTab( + leading: Icon(MoonIcons.other_frame_24_light), + label: Text('Tab1'), + trailing: Icon(MoonIcons.other_frame_24_light), + ), + MoonTab( + leading: Icon(MoonIcons.other_frame_24_light), + label: Text('Tab2'), + trailing: Icon(MoonIcons.other_frame_24_light), + ), + MoonTab( + leading: Icon(MoonIcons.other_frame_24_light), + label: Text('Tab3'), + trailing: Icon(MoonIcons.other_frame_24_light), + ), + ], + ), + MoonTabBar.pill( + tabBarSize: MoonTabBarSize.sm, + pillTabs: const [ + MoonPillTab( + leading: Icon(MoonIcons.other_frame_24_light), + label: Text('Tab1'), + trailing: Icon(MoonIcons.other_frame_24_light), + ), + MoonPillTab( + leading: Icon(MoonIcons.other_frame_24_light), + label: Text('Tab2'), + trailing: Icon(MoonIcons.other_frame_24_light), + ), + MoonPillTab( + leading: Icon(MoonIcons.other_frame_24_light), + label: Text('Tab3'), + trailing: Icon(MoonIcons.other_frame_24_light), + ), + ], + ), + + // MoonTabBar with TabBarView + MoonTabBar( + isExpanded: true, + tabController: tabController, + tabs: const [ + MoonTab( + label: const Text('Tab1'), + ), + MoonTab( + label: const Text('Tab2'), + ), + MoonTab( + label: const Text('Tab3'), + ), + ], + ), + SizedBox( + height: 112, + child: TabBarView( + controller: tabController, children: [ - MoonTabBar( - tabBarSize: MoonTabBarSize.sm, - tabs: const [ - MoonTab( - leading: Icon(MoonIcons.other_frame_24_light), - label: Text('Tab1'), - trailing: Icon(MoonIcons.other_frame_24_light), - ), - MoonTab( - leading: Icon(MoonIcons.other_frame_24_light), - label: Text('Tab2'), - trailing: Icon(MoonIcons.other_frame_24_light), - ), - MoonTab( - leading: Icon(MoonIcons.other_frame_24_light), - label: Text('Tab3'), - trailing: Icon(MoonIcons.other_frame_24_light), - ), - ], + Container( + color: context.moonColors!.whis60, + padding: const EdgeInsets.all(16), + child: Stack( + children: [ + const Align( + child: Text('Tab1'), + ), + Align( + alignment: Alignment.centerRight, + child: GestureDetector( + onTap: () => tabController.animateTo(1), + child: const Icon(MoonIcons.controls_chevron_right_24_light), + ), + ), + ], ), - MoonTabBar.pill( - tabBarSize: MoonTabBarSize.sm, - pillTabs: const [ - MoonPillTab( - leading: Icon(MoonIcons.other_frame_24_light), - label: Text('Tab1'), - trailing: Icon(MoonIcons.other_frame_24_light), - ), - MoonPillTab( - leading: Icon(MoonIcons.other_frame_24_light), - label: Text('Tab2'), - trailing: Icon(MoonIcons.other_frame_24_light), - ), - MoonPillTab( - leading: Icon(MoonIcons.other_frame_24_light), - label: Text('Tab3'), - trailing: Icon(MoonIcons.other_frame_24_light), + ), + Container( + color: context.moonColors!.frieza60, + padding: const EdgeInsets.all(16), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + GestureDetector( + onTap: () => tabController.animateTo(0), + child: const Icon(MoonIcons.controls_chevron_left_24_light), + ), + const Text('Tab2'), + GestureDetector( + onTap: () => tabController.animateTo(2), + child: const Icon(MoonIcons.controls_chevron_right_24_light), + ), + ], + ), + ), + Container( + color: context.moonColors!.whis60, + padding: const EdgeInsets.all(16), + child: Stack( + children: [ + const Align( + child: Text('Tab3'), + ), + Align( + alignment: Alignment.centerLeft, + child: GestureDetector( + onTap: () => tabController.animateTo(1), + child: const Icon( + MoonIcons.controls_chevron_left_24_light, ), - ], + ), + ), + ], ), + ), ], - ); - } + ), + ), + ], + ); + } } diff --git a/example/assets/code_snippets/table.md b/example/assets/code_snippets/table.md index 2c5dfe2b..21c24613 100644 --- a/example/assets/code_snippets/table.md +++ b/example/assets/code_snippets/table.md @@ -6,124 +6,124 @@ import 'package:moon_design/moon_design.dart'; const int _rowsCount = 50; class Table extends StatefulWidget { - const Table({super.key}); + const Table({super.key}); - @override - State createState() => _TableState(); + @override + State
createState() => _TableState(); } class _TableState extends State
{ - late List<_TableData> _tableData; - - final List _columnNames = ['ID', 'First name', 'Last name', 'Age', 'Activity']; - final List _columnSorting = List.generate(5, (int _) => true); - - bool _sortAscending = true; - int _sortColumnIndex = 0; - - List<_TableData> _generateTableData() { - return List<_TableData>.generate( - _rowsCount, - (int index) => _TableData( - id: index, - selected: false, - firstName: 'Test$index', - lastName: 'Subject$index', - age: Random().nextInt(81), - activity: Random().nextInt(100), - ), - ); - } - - void _onSort(int columnIndex, bool sortAscending) { - if (_sortColumnIndex == columnIndex || _sortAscending != sortAscending) { - setState(() { - if (columnIndex == _sortColumnIndex) { - _sortAscending = _columnSorting[columnIndex] = sortAscending; - } else { - _sortColumnIndex = columnIndex; - _sortAscending = _columnSorting[columnIndex]; - } - - switch (columnIndex) { - case 0: _tableData.sort((a, b) => a.id.compareTo(b.id)); - case 1: _tableData.sort((a, b) => a.firstName.compareTo(b.firstName)); - case 2: _tableData.sort((a, b) => a.lastName.compareTo(b.lastName)); - case 3: _tableData.sort((a, b) => a.age.compareTo(b.age)); - case 4: _tableData.sort((a, b) => a.activity.compareTo(b.activity)); - } - - if (!_sortAscending) _tableData = _tableData.reversed.toList(); - }); + late List<_TableData> _tableData; + + final List _columnNames = ['ID', 'First name', 'Last name', 'Age', 'Activity']; + final List _columnSorting = List.generate(5, (int _) => true); + + bool _sortAscending = true; + int _sortColumnIndex = 0; + + List<_TableData> _generateTableData() { + return List<_TableData>.generate( + _rowsCount, + (int index) => _TableData( + id: index, + selected: false, + firstName: 'Test$index', + lastName: 'Subject$index', + age: Random().nextInt(81), + activity: Random().nextInt(100), + ), + ); + } + + void _onSort(int columnIndex, bool sortAscending) { + if (_sortColumnIndex == columnIndex || _sortAscending != sortAscending) { + setState(() { + if (columnIndex == _sortColumnIndex) { + _sortAscending = _columnSorting[columnIndex] = sortAscending; + } else { + _sortColumnIndex = columnIndex; + _sortAscending = _columnSorting[columnIndex]; } - } - - @override - void initState() { - super.initState(); - - _tableData = _generateTableData(); - } - - MoonTableHeader _generateTableHeader() { - return MoonTableHeader( - columns: List.generate( - 5, - (int index) => MoonTableColumn( - onSort: (int columnIndex, bool sortAscending) => _onSort(columnIndex, sortAscending), - cell: Text(_columnNames[index]), - ), - ), - ); - } - List _generateTableRows() { - return List.generate( - _rowsCount, - (int index) => MoonTableRow( - cells: [ - Text(_tableData[index].id.toString()), - Text(_tableData[index].firstName), - Text(_tableData[index].lastName), - Text(_tableData[index].age.toString()), - Text(_tableData[index].activity.toString()), - ], - ), - ); - } + switch (columnIndex) { + case 0: _tableData.sort((a, b) => a.id.compareTo(b.id)); + case 1: _tableData.sort((a, b) => a.firstName.compareTo(b.firstName)); + case 2: _tableData.sort((a, b) => a.lastName.compareTo(b.lastName)); + case 3: _tableData.sort((a, b) => a.age.compareTo(b.age)); + case 4: _tableData.sort((a, b) => a.activity.compareTo(b.activity)); + } - @override - Widget build(BuildContext context) { - return OverflowBox( - maxWidth: MediaQuery.of(context).size.width, - child: MoonTable( - columnsCount: 5, - width: 564, - rowSize: MoonTableRowSize.sm, - tablePadding: const EdgeInsets.symmetric(horizontal: 16), - sortAscending: _sortAscending, - sortColumnIndex: _sortColumnIndex, - header: _generateTableHeader(), - rows: _generateTableRows(), - ), - ); + if (!_sortAscending) _tableData = _tableData.reversed.toList(); + }); } + } + + @override + void initState() { + super.initState(); + + _tableData = _generateTableData(); + } + + MoonTableHeader _generateTableHeader() { + return MoonTableHeader( + columns: List.generate( + 5, + (int index) => MoonTableColumn( + onSort: (int columnIndex, bool sortAscending) => _onSort(columnIndex, sortAscending), + cell: Text(_columnNames[index]), + ), + ), + ); + } + + List _generateTableRows() { + return List.generate( + _rowsCount, + (int index) => MoonTableRow( + cells: [ + Text(_tableData[index].id.toString()), + Text(_tableData[index].firstName), + Text(_tableData[index].lastName), + Text(_tableData[index].age.toString()), + Text(_tableData[index].activity.toString()), + ], + ), + ); + } + + @override + Widget build(BuildContext context) { + return OverflowBox( + maxWidth: MediaQuery.of(context).size.width, + child: MoonTable( + columnsCount: 5, + width: 564, + rowSize: MoonTableRowSize.sm, + tablePadding: const EdgeInsets.symmetric(horizontal: 16), + sortAscending: _sortAscending, + sortColumnIndex: _sortColumnIndex, + header: _generateTableHeader(), + rows: _generateTableRows(), + ), + ); + } } class _TableData { - bool selected; - int age; - int activity; - int id; - String firstName; - String lastName; - - _TableData({ - required this.selected, - required this.age, - required this.activity, - required this.id, - required this.firstName, - required this.lastName, - }); + bool selected; + int age; + int activity; + int id; + String firstName; + String lastName; + + _TableData({ + required this.selected, + required this.age, + required this.activity, + required this.id, + required this.firstName, + required this.lastName, + }); } diff --git a/example/assets/code_snippets/tag.md b/example/assets/code_snippets/tag.md index 7841004d..9ff848f1 100644 --- a/example/assets/code_snippets/tag.md +++ b/example/assets/code_snippets/tag.md @@ -2,16 +2,16 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Tag extends StatelessWidget { - const Tag({super.key}); + const Tag({super.key}); - @override - Widget build(BuildContext context) { - return MoonTag( - tagSize: MoonTagSize.sm, - onTap: () {}, - leading: const Icon(MoonIcons.controls_close_small_16_light), - label: const Text('This is MoonTag'), - trailing: const Icon(MoonIcons.controls_close_small_16_light), - ); - } + @override + Widget build(BuildContext context) { + return MoonTag( + tagSize: MoonTagSize.sm, + onTap: () {}, + leading: const Icon(MoonIcons.controls_close_small_16_light), + label: const Text('This is MoonTag'), + trailing: const Icon(MoonIcons.controls_close_small_16_light), + ); + } } diff --git a/example/assets/code_snippets/text_area.md b/example/assets/code_snippets/text_area.md index fc2ab61e..d9a6bbcb 100644 --- a/example/assets/code_snippets/text_area.md +++ b/example/assets/code_snippets/text_area.md @@ -2,29 +2,29 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class TextArea extends StatelessWidget { - const TextArea({super.key}); + const TextArea({super.key}); - @override - Widget build(BuildContext context) { - return Form( - child: Builder( - builder: (BuildContext context) { - return Column( - children: [ - MoonTextArea( - height: 200, - validator: (String? value) => value?.length != null && value!.length < 5 - ? "The text should be longer than 5 characters." - : null, - ), - MoonFilledButton( - onTap: () => Form.of(context).validate(), - label: const Text("Submit"), - ), - ], - ); - }, - ), - ); - } + @override + Widget build(BuildContext context) { + return Form( + child: Builder( + builder: (BuildContext context) { + return Column( + children: [ + MoonTextArea( + height: 200, + validator: (String? value) => value?.length != null && value!.length < 5 + ? "The text should be longer than 5 characters." + : null, + ), + MoonFilledButton( + onTap: () => Form.of(context).validate(), + label: const Text("Submit"), + ), + ], + ); + }, + ), + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/text_input.md b/example/assets/code_snippets/text_input.md index d6f939f5..bb4430ee 100644 --- a/example/assets/code_snippets/text_input.md +++ b/example/assets/code_snippets/text_input.md @@ -2,41 +2,41 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class TextInput extends StatefulWidget { - const TextInput({super.key}); + const TextInput({super.key}); - @override - State createState() => _TextInputState(); + @override + State createState() => _TextInputState(); } class _TextInputState extends State { - final TextEditingController _textController = TextEditingController(); + final TextEditingController _textController = TextEditingController(); - @override - Widget build(BuildContext context) { - return Form( - child: Builder( - builder: (BuildContext context) { - return Column( - children: [ - MoonFormTextInput( - controller: _textController, - validator: (String? value) => value != null && value.length < 5 - ? "The text should be longer than 5 characters." - : null, - onTap: () => _textController.clear(), - leading: const Icon(MoonIcons.generic_search_24_light), - trailing: GestureDetector( - child: const Icon(MoonIcons.controls_close_small_24_light), - ), - ), - MoonFilledButton( - onTap: () => Form.of(context).validate(), - label: const Text("Submit"), - ), - ], - ); - }, - ), - ); - } + @override + Widget build(BuildContext context) { + return Form( + child: Builder( + builder: (BuildContext context) { + return Column( + children: [ + MoonFormTextInput( + controller: _textController, + validator: (String? value) => value != null && value.length < 5 + ? "The text should be longer than 5 characters." + : null, + onTap: () => _textController.clear(), + leading: const Icon(MoonIcons.generic_search_24_light), + trailing: GestureDetector( + child: const Icon(MoonIcons.controls_close_small_24_light), + ), + ), + MoonFilledButton( + onTap: () => Form.of(context).validate(), + label: const Text("Submit"), + ), + ], + ); + }, + ), + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/text_input_group.md b/example/assets/code_snippets/text_input_group.md index 26ad194b..af961e36 100644 --- a/example/assets/code_snippets/text_input_group.md +++ b/example/assets/code_snippets/text_input_group.md @@ -2,62 +2,62 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class TextInputGroup extends StatefulWidget { - const TextInputGroup({super.key}); + const TextInputGroup({super.key}); - @override - State createState() => _TextInputGroupState(); + @override + State createState() => _TextInputGroupState(); } class _TextInputGroupState extends State { - final TextEditingController _textController = TextEditingController(); - final TextEditingController _passwordController = TextEditingController(); + final TextEditingController _textController = TextEditingController(); + final TextEditingController _passwordController = TextEditingController(); - bool _hidePassword = true; + bool _hidePassword = true; - @override - Widget build(BuildContext context) { - return Form( - child: Builder( - builder: (context) { - return Column( - children: [ - MoonTextInputGroup( - children: [ - MoonFormTextInput( - textInputSize: MoonTextInputSize.xl, - controller: _textController, - validator: (String? value) => value?.length != null && value!.length < 5 - ? "The text should be longer than 5 characters." - : null, - leading: const Icon(MoonIcons.generic_search_24_light), - trailing: GestureDetector( - onTap: () => _textController.clear(), - child: const Icon(MoonIcons.controls_close_small_24_light), - ), - ), - MoonFormTextInput( - textInputSize: MoonTextInputSize.xl, - obscureText: _hidePassword, - controller: _passwordController, - validator: (String? value) => value != "123" ? "Wrong password." : null, - leading: const Icon(MoonIcons.security_password_24_light), - trailing: GestureDetector( - onTap: () => setState(() => _hidePassword = !_hidePassword), - child: Align( - child: Text(_hidePassword ? "Show" : "Hide"), - ), - ), - ), - ], - ), - MoonFilledButton( - onTap: () => Form.of(context).validate(), - label: const Text("Submit"), - ), - ], - ); - }, - ), - ); - } + @override + Widget build(BuildContext context) { + return Form( + child: Builder( + builder: (context) { + return Column( + children: [ + MoonTextInputGroup( + children: [ + MoonFormTextInput( + textInputSize: MoonTextInputSize.xl, + controller: _textController, + validator: (String? value) => value?.length != null && value!.length < 5 + ? "The text should be longer than 5 characters." + : null, + leading: const Icon(MoonIcons.generic_search_24_light), + trailing: GestureDetector( + onTap: () => _textController.clear(), + child: const Icon(MoonIcons.controls_close_small_24_light), + ), + ), + MoonFormTextInput( + textInputSize: MoonTextInputSize.xl, + obscureText: _hidePassword, + controller: _passwordController, + validator: (String? value) => value != "123" ? "Wrong password." : null, + leading: const Icon(MoonIcons.security_password_24_light), + trailing: GestureDetector( + onTap: () => setState(() => _hidePassword = !_hidePassword), + child: Align( + child: Text(_hidePassword ? "Show" : "Hide"), + ), + ), + ), + ], + ), + MoonFilledButton( + onTap: () => Form.of(context).validate(), + label: const Text("Submit"), + ), + ], + ); + }, + ), + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/toast.md b/example/assets/code_snippets/toast.md index e5ee841a..db6311f4 100644 --- a/example/assets/code_snippets/toast.md +++ b/example/assets/code_snippets/toast.md @@ -2,16 +2,16 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Toast extends StatelessWidget { - const Toast({super.key}); + const Toast({super.key}); - @override - Widget build(BuildContext context) { - return MoonFilledButton( - onTap: () => MoonToast.show( - context, - title: const Text('This is MoonToast'), - ), - label: const Text("Show toast"), - ); - } + @override + Widget build(BuildContext context) { + return MoonFilledButton( + onTap: () => MoonToast.show( + context, + title: const Text('This is MoonToast'), + ), + label: const Text("Show toast"), + ); + } } \ No newline at end of file diff --git a/example/assets/code_snippets/tooltip.md b/example/assets/code_snippets/tooltip.md index ff790f8b..f72cd638 100644 --- a/example/assets/code_snippets/tooltip.md +++ b/example/assets/code_snippets/tooltip.md @@ -2,25 +2,25 @@ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Tooltip extends StatefulWidget { - const Tooltip({super.key}); + const Tooltip({super.key}); - @override - State createState() => _TooltipState(); + @override + State createState() => _TooltipState(); } class _TooltipState extends State { - bool showOnTap = false; + bool showOnTap = false; - @override - Widget build(BuildContext context) { - return MoonTooltip( - show: showOnTap, - content: const Text('This is MoonTooltip'), - child: MoonFilledButton( - buttonSize: MoonButtonSize.sm, - onTap: () => setState(() => showOnTap = true), - label: const Text("Show tooltip"), - ), - ); - } + @override + Widget build(BuildContext context) { + return MoonTooltip( + show: showOnTap, + content: const Text('This is MoonTooltip'), + child: MoonFilledButton( + buttonSize: MoonButtonSize.sm, + onTap: () => setState(() => showOnTap = true), + label: const Text("Show tooltip"), + ), + ); + } } \ No newline at end of file diff --git a/example/pubspec.yaml b/example/pubspec.yaml index b736a739..8ea11cd9 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -31,6 +31,9 @@ flutter: - family: DMSans fonts: - asset: assets/DMSans.ttf + - family: RobotoMono + fonts: + - asset: assets/RobotoMono-Regular.ttf assets: - assets/code_snippets/ - assets/images/