generated from xmartlabs/flutter-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add catalog * buttons, text inputs and catalog * add obscure property to textfields * support leading icon null * Use snackbar, rename text input * fix linter * change colors * change text size
- Loading branch information
1 parent
6cbb9eb
commit b809c87
Showing
5 changed files
with
426 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| import 'dart:async'; | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:flutter_gen/gen_l10n/app_localizations.dart'; | ||
| import 'package:flutter_localizations/flutter_localizations.dart'; | ||
| import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
|
|
||
| import 'package:flutter_template/core/common/logger.dart'; | ||
| import 'package:flutter_template/ui/resources.dart'; | ||
| import 'package:flutter_template/ui/theme/app_theme.dart'; | ||
| import 'package:flutter_template/ui/widgets/design_system/buttons/base_button.dart'; | ||
| import 'package:flutter_template/ui/widgets/design_system/buttons/primary_button.dart'; | ||
| import 'package:flutter_template/ui/widgets/design_system/text_fields/input_text.dart'; | ||
|
|
||
| void main() { | ||
| runZonedGuarded( | ||
| () { | ||
| runApp(const MyCatalogApp()); | ||
| }, | ||
| (exception, stackTrace) => | ||
| Logger.fatal(error: exception, stackTrace: stackTrace), | ||
| ); | ||
| } | ||
|
|
||
| class MyCatalogApp extends StatelessWidget { | ||
| const MyCatalogApp({Key? key}) : super(key: key); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) => ScreenUtilInit( | ||
| designSize: const Size(375, 812), | ||
| minTextAdapt: false, | ||
| splitScreenMode: true, | ||
| builder: (_, __) => const _CatalogAppContentScreen(), | ||
| ); | ||
| } | ||
|
|
||
| class _CatalogAppContentScreen extends StatefulWidget { | ||
| const _CatalogAppContentScreen({ | ||
| Key? key, | ||
| }) : super(key: key); | ||
|
|
||
| @override | ||
| State<_CatalogAppContentScreen> createState() => | ||
| _CatalogAppContentScreenState(); | ||
| } | ||
|
|
||
| class _CatalogAppContentScreenState extends State<_CatalogAppContentScreen> { | ||
| final _messengerKey = GlobalKey<ScaffoldMessengerState>(); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) => MaterialApp( | ||
| scaffoldMessengerKey: _messengerKey, | ||
| home: SafeArea( | ||
| child: Scaffold( | ||
| body: Padding( | ||
| padding: const EdgeInsets.all(20.0), | ||
| child: ListView( | ||
| children: [ | ||
| Padding( | ||
| padding: const EdgeInsets.symmetric(vertical: 6.0), | ||
| child: AppPrimaryButton( | ||
| text: 'Filled Button', | ||
| onPressed: () { | ||
| _messengerKey.currentState?.showSnackBar( | ||
| const SnackBar( | ||
| content: Text('Filled button pressed!'), | ||
| ), | ||
| ); | ||
| }, | ||
| style: StyleButton.filled, | ||
| ), | ||
| ), | ||
| Padding( | ||
| padding: const EdgeInsets.symmetric(vertical: 6.0), | ||
| child: AppPrimaryButton( | ||
| text: 'Stroke Button', | ||
| onPressed: () { | ||
| _messengerKey.currentState?.showSnackBar( | ||
| const SnackBar( | ||
| content: Text('Stroke button pressed!'), | ||
| ), | ||
| ); | ||
| }, | ||
| style: StyleButton.stroke, | ||
| ), | ||
| ), | ||
| Padding( | ||
| padding: const EdgeInsets.symmetric(vertical: 6.0), | ||
| child: AppPrimaryButton( | ||
| text: 'Ghost Button', | ||
| onPressed: () { | ||
| _messengerKey.currentState?.showSnackBar( | ||
| const SnackBar( | ||
| content: Text('Ghost button pressed!'), | ||
| ), | ||
| ); | ||
| }, | ||
| style: StyleButton.ghost, | ||
| ), | ||
| ), | ||
| const Padding( | ||
| padding: EdgeInsets.symmetric(vertical: 16.0), | ||
| child: AppTextInputField( | ||
| hintText: 'Write your text...', | ||
| labelText: 'Label', | ||
| ), | ||
| ), | ||
| const Padding( | ||
| padding: EdgeInsets.symmetric(vertical: 16.0), | ||
| child: AppTextInputField( | ||
| hintText: 'Write your text...', | ||
| labelText: 'Label', | ||
| error: 'Error text', | ||
| ), | ||
| ), | ||
| ], | ||
| ), | ||
| ), | ||
| ), | ||
| ), | ||
| builder: (context, child) { | ||
| Resources.setup(context); | ||
| return child!; | ||
| }, | ||
| localizationsDelegates: const [ | ||
| AppLocalizations.delegate, | ||
| GlobalMaterialLocalizations.delegate, | ||
| GlobalWidgetsLocalizations.delegate, | ||
| GlobalCupertinoLocalizations.delegate, | ||
| ], | ||
| supportedLocales: AppLocalizations.supportedLocales, | ||
| theme: AppTheme.provideAppTheme(context), | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
91 changes: 91 additions & 0 deletions
91
supabase-ws-flutter-mobile/lib/ui/widgets/design_system/buttons/base_button.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import 'package:flutter_template/ui/extensions/context_extensions.dart'; | ||
| import 'package:flutter_template/ui/theme/app_theme.dart'; | ||
| import 'package:flutter_template/ui/theme/text_styles.dart'; | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
|
|
||
| class AppBaseButton extends StatelessWidget { | ||
| final String text; | ||
| final VoidCallback? onPressed; | ||
| final Color backgroundColor; | ||
| final Color textColor; | ||
| final Color focusColor; | ||
| final Color disabledTextColor; | ||
| final Color pressedColor; | ||
| final Color disabledColor; | ||
| final Color hoveredColor; | ||
| final Color? borderSideColor; | ||
| final Icon? iconLeft; | ||
| final Icon? iconRight; | ||
| final double verticalPadding; | ||
|
|
||
| const AppBaseButton({ | ||
| required this.text, | ||
| required this.onPressed, | ||
| required this.backgroundColor, | ||
| required this.textColor, | ||
| required this.disabledColor, | ||
| required this.focusColor, | ||
| required this.pressedColor, | ||
| required this.disabledTextColor, | ||
| required this.hoveredColor, | ||
| this.borderSideColor, | ||
| this.iconLeft, | ||
| this.iconRight, | ||
| this.verticalPadding = 12, | ||
| Key? key, | ||
| }) : super(key: key); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) => MaterialButton( | ||
| minWidth: 100.w, | ||
| shape: RoundedRectangleBorder( | ||
| borderRadius: BorderRadius.circular(28.r), | ||
| side: BorderSide( | ||
| width: 2, | ||
| color: borderSideColor ?? Colors.transparent, | ||
| ), | ||
| ), | ||
| elevation: 0.0, | ||
| color: backgroundColor, | ||
| disabledColor: disabledColor, | ||
| disabledTextColor: disabledTextColor, | ||
| highlightColor: pressedColor, | ||
| textColor: textColor, | ||
| onPressed: onPressed, | ||
| hoverColor: hoveredColor, | ||
| child: Row( | ||
| mainAxisSize: MainAxisSize.min, | ||
| mainAxisAlignment: MainAxisAlignment.spaceEvenly, | ||
| children: [ | ||
| if (iconLeft != null) | ||
| Container( | ||
| margin: EdgeInsets.only(right: 16.w), | ||
| child: iconLeft, | ||
| ), | ||
| Padding( | ||
| padding: EdgeInsets.symmetric( | ||
| vertical: verticalPadding.h, | ||
| ), | ||
| child: Text( | ||
| text, | ||
| style: context.theme.textStyles.bodySmall | ||
| ?.semibold() | ||
| .copyWith(color: textColor), | ||
| ), | ||
| ), | ||
| if (iconRight != null) | ||
| Container( | ||
| margin: EdgeInsets.only(left: 16.w), | ||
| child: iconRight, | ||
| ), | ||
| ], | ||
| ), | ||
| ); | ||
| } | ||
|
|
||
| enum StyleButton { | ||
| filled, | ||
| stroke, | ||
| ghost, | ||
| } |
Oops, something went wrong.