{"id":23869137,"url":"https://github.com/extrawest/extrawest_ui_kit_mobile","last_synced_at":"2025-07-12T13:08:10.222Z","repository":{"id":216092507,"uuid":"732038230","full_name":"extrawest/extrawest_ui_kit_mobile","owner":"extrawest","description":"Extrawest UI Kit is a set of reusable UI components, styles, and other assets you can use to construct the UI of your Flutter apps","archived":false,"fork":false,"pushed_at":"2024-06-11T11:04:58.000Z","size":2426,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-14T10:38:58.687Z","etag":null,"topics":["dart","design-system","extrawest","flutter","material3","mobile","package","ui","uikit","web"],"latest_commit_sha":null,"homepage":"https://capable-toffee-aa697f.netlify.app/","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/extrawest.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-12-15T13:40:41.000Z","updated_at":"2025-02-28T08:57:06.000Z","dependencies_parsed_at":"2024-01-08T13:29:57.140Z","dependency_job_id":"28ec3209-17cc-4dc2-b80d-dd77574e850d","html_url":"https://github.com/extrawest/extrawest_ui_kit_mobile","commit_stats":null,"previous_names":["extrawest/extrawest_ui_kit_mobile"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/extrawest/extrawest_ui_kit_mobile","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/extrawest%2Fextrawest_ui_kit_mobile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/extrawest%2Fextrawest_ui_kit_mobile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/extrawest%2Fextrawest_ui_kit_mobile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/extrawest%2Fextrawest_ui_kit_mobile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/extrawest","download_url":"https://codeload.github.com/extrawest/extrawest_ui_kit_mobile/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/extrawest%2Fextrawest_ui_kit_mobile/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264995610,"owners_count":23694995,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dart","design-system","extrawest","flutter","material3","mobile","package","ui","uikit","web"],"created_at":"2025-01-03T12:16:10.656Z","updated_at":"2025-07-12T13:08:10.203Z","avatar_url":"https://github.com/extrawest.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\nThis README describes the package. If you publish this package to pub.dev,\nthis README's contents appear on the landing page for your package.\n\nFor information about how to write a good package README, see the guide for\n[writing package pages](https://dart.dev/guides/libraries/writing-package-pages).\n\nFor general information about developing packages, see the Dart guide for\n[creating packages](https://dart.dev/guides/libraries/create-library-packages)\nand the Flutter guide for\n[developing packages and plugins](https://flutter.dev/developing-packages).\n--\u003e\n\n# Extrawest UI Kit\n\n[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)]()\n[![Maintaner](https://img.shields.io/static/v1?label=Extrawest\u0026message=Maintainer\u0026color=red)](mailto:roman.ovsepian@extrawest.com)\n[![Ask Me Anything !](https://img.shields.io/badge/Ask%20me-anything-1abc9c.svg\n)](https://github.com/extrawest/extrawest_ui_kit_mobile/issues)\n[![License](https://img.shields.io/badge/License-BSD_3--Clause-blue.svg)](https://opensource.org/licenses/BSD-3-Clause)\n![GitHub release](https://img.shields.io/badge/release-v1.0.0-blue)\n![Supported Platforms](https://img.shields.io/badge/Platform-Android%20|%20iOS%20|%20Web%20%20-blue.svg?logo=flutter)\n[![View DEMO](https://img.shields.io/badge/VIEW-DEMO-lightgreen.svg)](https://665d94717ea6b0380d6149c2--fluffy-crumble-539769.netlify.app/)\n\nFlutter package that provides Extrawest UI Kit based on Material 3 UI components\n\n## DEMO\n\n![ui_kit_demo](https://github.com/extrawest/extrawest_ui_kit_mobile/blob/development/example/ui_kit_demo.gif?raw=true)\n\n## Features\n\n1. Extawest UI Components based on [Material 3](https://m3.material.io/develop/flutter)\n    - Buttons (`Elevated`, `Filled`, `Text`, `Outlined`, `Icon`)\n    - Text Fields (Email, Password, Custom)\n    - Texts widgets with different [Material 3](https://m3.material.io/develop/flutter) styles\n2. Ready to use Layouts with ability to change components dynamically.\n    - Sign In layout with components: Email, Password inputs, Password recovery section, etc.\n    - Create Account layout with textfields validation\n    - Password recovery: Send link to email, Open email, Create new password\n    - OTP verification: Enter phone number, Enter OTP code\n    - 2FA app\n    - Splash screen with components: logo, title, background\n    - Error page with components: logo, title, content, retry and back buttons\n    - Contact Us sent page with components: logo, title, content, back button\n    - No Internet connection page with components: logo, title, content, retry button\n    - Terms of Conditions page with components: logo, title, content, back button\n\nThe advantage of these layouts is that they come with built-in components having default parameters,\nwhich also can be customized to fit the application's requirements.\n\n## Usage\n\nThere are 2 approaches you can use package's components:\n\n1. Using ready Layouts with specifying needed parameters(or use default ones)\n2. Using components separately to your own goals.\n\n## Available Customizable Components:\n\n1. EWBaseButton\n\n```\n// FilledButton - factory constructor approach\nEWBaseButton.filled(\n   onPressed: () {}, \n   title: 'Sign In'\n),\n\n// OutlinedButton - passing parameter approach\nEWBaseButton(\n   buttonType: Filled(),\n    onPressed: () {},\n   title : 'Sign In'\n),\n\n```\n\n2. EWBaseTextFormField\n\n```\n// Use base textfield with custom configuration\nEWTextField(\n  controller: controller,\n  autoValidateMode: AutovalidateMode.always,\n  keyboardType: TextInputType.phone,\n  prefixIcon: const Icon(Icons.add),\n  errorText: 'Error',\n  cursorColor: Colors.red,\n  suffixIcon: const Text('Clear'),\n),\n```\n\n3. Inputs based on EWBaseTextFormField: `EmailInput`, `PasswordInput`\n\n``` dart\n// Inputs\nEmailInput(\n    controller: emailController,\n    hintText: 'Email Address'\n    validator: (value) {\n        if (value == null \u0026\u0026 value.isEmpty)\n            return 'Invalid email';\n        }\n        return null;\n    },\n),\n```\n\n4. Social Auth Provider buttons: `Google`, `Apple`, `Facebook`, `X`\n\n``` dart\n// Use Social button\nAppleButton(\n   showTitle: false,\n   onTap: () {\n   // add tap handler here\n   },\n),\n```\n\n5. Text widgets with various Material 3 scales (`titleLarge`, `labelMedium`, `labelSmall` etc)\n   Access TextStyle from BuildContext context and pass TextScale as a positional argument\n\n``` dart\nText(\n   'Sign In',\n   style: context.textStyle(TextScale.titleLarge),\n),\n```\n\nYou can also specify other default TextStyle parameters\n\n```\nText(\n'Sign In',\n   style: context.textStyle(\n   TextScale.titleLarge,\n   fontStyle: FontStyle.italic,\n   color: Colors.black,\n   ),\n),\n```\n\n6. Logo\n\n``` dart\nLogo(\n   title: title,\n   asset: 'path/to/asset',\n),\n```\n\n## Available customizable layouts\n\n1. `SignIn`\n2. `CreateAccount`\n3. `PasswordRecovery`\n4. `EmailSent`\n5. `CreateNewPassword`\n6. `OTPEnterPhoneNumber`\n7. `OTPVerification`\n8. `TwoFactorAuth`\n9. `SplashScreen`\n10. `ErrorPage`\n11. `NoInternetConnection`\n12. `ContactUs`\n13. `TermsOfConditions`\n\n## Layout usage\n\n`SignIn`\n\n```dart\nimport 'package:extrawest_ui_kit/extrawest_ui_kit.dart';\nimport 'package:extrawest_ui_kit_app/common/screens/sign_up.dart';\nimport 'package:flutter/material.dart';\n\nclass HomeScreen extends StatefulWidget {\n  const HomeScreen({Key? key}) : super(key: key);\n\n  @override\n  State\u003cHomeScreen\u003e createState() =\u003e _HomeScreenState();\n}\n\nclass _HomeScreenState extends State\u003cHomeScreen\u003e {\n  final TextEditingController _emailController = TextEditingController();\n  final TextEditingController _passwordController = TextEditingController();\n\n  @override\n  void dispose() {\n    _emailController.dispose();\n    _passwordController.dispose();\n    super.dispose();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return SignIn(\n      emailController: _emailController,\n      passwordController: _passwordController,\n      useSafeArea: true,\n      authType: AuthType.emailPassword,\n      title: 'Test',\n      isSignUpEnabled: true,\n      isResetPasswordEnabled: true,\n      isGuestEnabled: true,\n      onCreateAccountTap: () =\u003e\n          Navigator.push(\n            context,\n            MaterialPageRoute(\n              builder: (context) =\u003e const SignUpScreen(),\n            ),\n          ),\n      onSignInTap: () =\u003e\n          ScaffoldMessenger.of(context).showSnackBar(\n            const SnackBar(\n              duration: Duration(seconds: 2),\n              content: Text('Sign In Attempt'),\n            ),\n          ),\n      onSignInAsGuestTap: () =\u003e\n          ScaffoldMessenger.of(context).showSnackBar(\n            const SnackBar(\n              duration: Duration(seconds: 2),\n              content: Text('Sign In as Guest Tap'),\n            ),\n          ),\n      onPasswordRecoveryTap: () =\u003e\n          ScaffoldMessenger.of(context).showSnackBar(\n            const SnackBar(\n              duration: Duration(seconds: 2),\n              content: Text('Password recovery'),\n            ),\n          ),\n      socialAuthProviders: [\n        SocialAuthProviderElement(\n          socialAuthProvider: SocialAuthProvider.facebook,\n          onTap: () {\n            ScaffoldMessenger.of(context).showSnackBar(\n              const SnackBar(\n                content: Text('Facebook login'),\n              ),\n            );\n          },\n        ),\n        SocialAuthProviderElement(\n          socialAuthProvider: SocialAuthProvider.google,\n          onTap: () {\n            ScaffoldMessenger.of(context).showSnackBar(\n              const SnackBar(\n                content: Text('Google login'),\n              ),\n            );\n          },\n        ),\n        SocialAuthProviderElement(\n          socialAuthProvider: SocialAuthProvider.x,\n          onTap: () {\n            ScaffoldMessenger.of(context).showSnackBar(\n              const SnackBar(\n                content: Text('X login'),\n              ),\n            );\n          },\n        ),\n        SocialAuthProviderElement(\n          socialAuthProvider: SocialAuthProvider.appleId,\n          onTap: () {\n            ScaffoldMessenger.of(context).showSnackBar(\n              const SnackBar(\n                content: Text('Apple login'),\n              ),\n            );\n          },\n        ),\n      ],\n    );\n  }\n}\n```\n\n`OTPEnterPhoneNumber`\n\n``` dart\n  OTPEnterPhoneNumber(\n      controller: TextEditingController(),\n      logo: Image.asset('path/to/asset'),\n      onSendPressed: () {\n        // add logic here\n      },\n    );\n```\n\n`ErrorPage`\n\n``` dart\n  ErrorPage(\n      logo: Image.asset('path/to/asset'),\n      title: 'Title',\n      contentText: 'Enter content text here', // If not provided, default content will be used\n      onRetryPressed: () {\n      // add Retry button press handler here\n      },\n      onBackPressed: () {\n      // add Retry button press handler here\n      },\n   );\n```\n\n`No Internet Connection page`\n\n``` dart\n  NoInternetConnection(\n      appBar: EWAppBar.medium(\n        title: 'No Internet Connection',\n        isTitleCentered: false,\n        actions: [\n          IconButton(\n            icon: const Icon(Icons.search),\n            onPressed: () {},\n          ),\n        ],\n        leading: IconButton(\n          icon: const Icon(Icons.arrow_back),\n          onPressed: () {\n            Navigator.pop(context);\n          },\n        ),\n        titleStyle: Theme.of(context).textTheme.headlineSmall,\n      ),\n      useSafeArea: true,\n      logo: Image.asset(errorImg, package: 'extrawest_ui_kit'),\n      contentText: 'Check your internet connection and try again',\n      onBackPressed: () {},\n      onRetryPressed: () {},\n    );\n```\n\n`Contact Us page`\n\n``` dart\n DateInput(\n    labelText: 'Date of Birth',\n    hintText: 'Date of Birth',\n    onDatePicked: (date) {\n      // log('Date picked: $date');\n    },\n  ),\n```\n\n``` dart\n   EWGenderCheckboxList(\n      genderBlockTitle: 'Gender',\n      onGenderChanged: (gender) {\n        setState(() {\n          selectedGender = gender;\n        });\n      },\n      genderList: const ['Male', 'Female', 'Other', 'Prefer not to say'],\n      selectedGender: selectedGender,\n      isEnabled: true,\n    ),\n```\n\n``` dart\n   EWAvatarWidget(\n       onImagePicked: (List\u003cXFile\u003e? files) {},\n       pickImageCameraText: 'Use Camera',\n       pickImageGalleryText: 'Use Gallery',\n   ),\n```\n\n``` dart\nEWAddressPicker.fiveLines(\n   appBar: EWAppBar.medium(\n     title: 'User Profile',\n     isTitleCentered: false,\n     leading: IconButton(\n       icon: const Icon(Icons.arrow_back),\n       onPressed: () {\n         Navigator.pop(context);\n       },\n     ),\n     titleStyle: Theme.of(context).textTheme.headlineSmall,\n   ),\n   controllerAddressLine1: address1Controller,\n   hintTextAddressLine1: 'Address Line 1',\n   labelTextAddressLine1: 'Address Line 1',\n   prefixIconAddressLine1: const Icon(Icons.location_on),\n   controllerAddressLine2: address2Controller,\n   hintTextAddressLine2: 'Address Line 2',\n   labelTextAddressLine2: 'Address Line 2',\n   prefixIconAddressLine2: const Icon(Icons.location_on),\n   controllerZipCode: zipCodeController,\n   hintTextZipCode: 'Zip Code',\n   labelTextZipCode: 'Zip Code',\n   prefixIconZipCode: const Icon(Icons.local_post_office_sharp),\n   controllerState: stateController,\n   hintTextState: 'State ',\n   labelTextState: 'State ',\n   hintTextCountry: 'Country',\n   labelTextCountry: 'Country',\n   prefixIconCountry: const Icon(Icons.location_city_outlined),\n   prefixIconState: const Icon(Icons.house_outlined),\n   controllerCountry: countryController,\n   addressLine1FocusNode: FocusNode(),\n   addressLine2FocusNode: FocusNode(),\n   zipCodeFocusNode: FocusNode(),\n   stateFocusNode: FocusNode(),\n   countryFocusNode: FocusNode(),\n   isEnabled: true,\n   readOnly: true,\n ),\n```\n``` dart\n  ContactUs(\n      appBar: EWAppBar.medium(\n        title: 'Support',\n        isTitleCentered: false,\n        actions: [\n          IconButton(\n            icon: const Icon(Icons.search),\n            onPressed: () {\n              Navigator.pop(context);\n            },\n          ),\n        ],\n        leading: IconButton(\n          icon: const Icon(Icons.arrow_back),\n          onPressed: () {},\n        ),\n        titleStyle: Theme.of(context).textTheme.headlineSmall,\n      ),\n      showMissingMessengerError: true,\n      sendMessageButtonText: 'Send message',\n      chooseMessengerTitle: 'Choose your preferred messenger',\n      changeMessengerButtonText: 'Change preferred messenger',\n      onContactTypeChanged: (MessengerType messengerType) {},\n      onContactItemTap: (ContactActionableSchema contactActionableSchema) {},\n      sendMessageScreenAppbarTitle: 'Send us a message',\n      sendMessageHintText: 'Your message',\n      actionableContactListItems: [\n        ContactActionableSchema(\n          schemaType: SchemaType.tel,\n          value: '00000000000',\n          description: 'For calls in Ukraine (free)',\n          iconData: Icons.phone,\n        ),\n        ContactActionableSchema(\n          schemaType: SchemaType.email,\n          value: 'some_mail@mail.com',\n          description: 'For calls in Ukraine (free)',\n          iconData: Icons.phone,\n        ),\n        ContactActionableSchema(\n          schemaType: SchemaType.website,\n          value: 'https://flutter.dev',\n          description: 'For calls from other countries',\n          iconData: Icons.phone,\n        ),\n      ],\n      messengerProviders: const [\n        MessengerTypeElement(\n          recipient: 'Telegram_user_id',\n          title: 'Telegram',\n          messengerType: MessengerType.telegram,\n        ),\n        MessengerTypeElement(\n          title: 'Viber',\n          messengerType: MessengerType.viber,\n        ),\n        MessengerTypeElement(\n          title: 'Facebook',\n          messengerType: MessengerType.facebook,\n          recipient: 'Facebook_id',\n        ),\n      ],\n    );\n```\n\n## Feedback\n\nPlease file Extrawest UI Kit specific issues, bugs, or feature requests in\nour [issue tracker](https://github.com/extrawest/extrawest_ui_kit_mobile/issues).\n\n## Contributing\n\n1. Fork it!\n1. Create your feature branch: `git checkout -b new-cool-tip`\n1. Commit your changes: `git commit -am 'Added new tip'`\n1. Push to the branch: `git push origin new-cool-tip`\n1. Submit a pull request.\n\n## LICENSE\n\nBSD-3-Clause\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fextrawest%2Fextrawest_ui_kit_mobile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fextrawest%2Fextrawest_ui_kit_mobile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fextrawest%2Fextrawest_ui_kit_mobile/lists"}