INNO – Flutter Fashion App UI Kit (Android+iOS)

Here is an example of how to configure the INNO - Flutter Fashion App UI Kit:

Theme Settings

To configure the theme settings, you can use the following code:

theme: ThemeData(
  primarySwatch: Colors.purple,
  accentColor: Colors.deepOrange,
  canvasColor: Colors.white,
  primaryTextTheme: GoogleFonts.openSansTextTheme(
    Theme.of(context).primaryTextTheme,
  ),
  accentTextTheme: GoogleFonts.openSansTextTheme(
    Theme.of(context).accentTextTheme,
  ),
)

Navigation Settings

To configure the navigation settings, you can use the following code:

Navigator(
  key: navigatorKey,
  onGenerateRoute: (settings) {
    switch (settings.name) {
      case '/':
        return MaterialPageRoute(builder: (context) => HomeScreen());
      case '/profile':
        return MaterialPageRoute(builder: (context) => ProfileScreen());
      default:
        return MaterialPageRoute(builder: (context) => HomeScreen());
    }
  },
)

Typography Settings

To configure the typography settings, you can use the following code:

Text(
  'Hello, World!',
  style: TextStyle(
    fontSize: 18,
    fontFamily: 'OpenSans',
    fontWeight: FontWeight.w600,
  ),
)

Color Scheme Settings

To configure the color scheme settings, you can use the following code:

MaterialApp(
  title: 'Fashion App',
  theme: ThemeData(
    primarySwatch: Colors.purple,
    accentColor: Colors.deepOrange,
  ),
)

Icon Settings

To configure the icon settings, you can use the following code:

Icon(
  Icons.shopping_cart,
  color: Colors.purple,
  size: 24,
)

Font Family Settings

To configure the font family settings, you can use the following code:

Text(
  'Hello, World!',
  style: TextStyle(
    fontSize: 18,
    fontFamily: 'OpenSans',
  ),
)

Button Settings

To configure the button settings, you can use the following code:

ElevatedButton(
  onPressed: () {
    // Button pressed
  },
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    primary: Colors.purple,
    onPrimary: Colors.white,
  ),
)

Card Settings

To configure the card settings, you can use the following code:

Card(
  child: Column(
    children: [
      Text('Card Title'),
      Text('Card Content'),
    ],
  ),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
  elevation: 4,
)

Avatar Settings

To configure the avatar settings, you can use the following code:

CircleAvatar(
  radius: 24,
  backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
)

SnackBar Settings

To configure the snackbar settings, you can use the following code:

Scaffold(
  body:...
  appBar: AppBar(
    title: Text('Fashion App'),
    actions: [
      IconButton(
        icon: Icon(Icons.add),
        onPressed: () {
          // Show snackbar
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: Text('Item added'),
              duration: Duration(seconds: 2),
            ),
          );
        },
      ),
    ],
  ),
)

Note: This is just an example of how to configure the INNO - Flutter Fashion App UI Kit, and you may need to adjust the settings to fit your specific use case.

Here are the main features of the INNO - Flutter Fashion App UI Kit (Android+iOS):

1. 18+ Screens: The UI kit includes a total of 18+ screens, providing a comprehensive design for your mobile app.
2. Clean Code: The code is easy to develop and maintain, making it perfect for developers who want to customize the UI kit according to their needs.
3. Material Design: The UI kit is developed using Material Design, which ensures a consistent and user-friendly design across both Android and iOS devices.
4. Lottie Animation: The UI kit incorporates Lottie Animation, allowing for smooth and engaging transitions between screens.
5. Responsive Design: The design is responsive, ensuring that it adapts perfectly to any device screen, regardless of its size or resolution.
6. Login & Register Screen: The UI kit includes a login and register screen, making it easy for users to create an account or log in to your app.
7. Home Screen: The home screen provides a central hub for users to navigate the app and access various features.
8. Favorite Screen: The favorite screen includes three sub-screens:
   • Favorite category: allows users to mark specific categories as favorites
   • Favorite clothes: displays a list of favorite clothes
   • Empty favorite screen: displays a message when the user's favorite list is empty
9. Cart Screen: The cart screen includes two sub-screens:
   • Delete operation: allows users to delete items from their cart
   • Cart empty screen: displays a message when the user's cart is empty
10. Profile Screen: The profile screen allows users to view and edit their profile information.
11. Category Detail Screen: The category detail screen provides detailed information about a specific category.
12. Clothes Detail Screen: The clothes detail screen provides detailed information about a specific clothing item.
13. Search Screen: The search screen allows users to search for specific clothing items or categories.
14. Payment Screen: The payment screen includes three sub-screens:
    • Address info: displays the user's address information
    • Card info: displays the user's card information
    • Successfully completed: displays a message when the payment is successfully completed