uFlutter – Universal Flutter UI Kit – Biggest Kit Widgets & Templates Multipurpose Flutter Apps

Fonts

To configure fonts, go to pubspec.yaml file and add the following code:

flutter:
  fonts:
    - family: OpenSans
      fonts:
        -asset: fonts/OpenSans-Regular.ttf
        -asset: fonts/OpenSans-SemiBold.ttf

Then, in your dart file, you can use the font like this:

TextStyle style = TextStyle(
  fontFamily: 'OpenSans',
  fontSize: 18,
);

Colors

To configure colors, create a new file named colors.dart and add the following code:

import 'package:flutter/material.dart';

const kPrimaryColor = Color(0xFF3498DB);
const kSecondaryColor = Color(0xFF8B9467);
const kAccentColor = Color(0xFFF1C40F);

Then, use the colors in your widget like this:

Container(
  color: kPrimaryColor,
  child: Text('Hello'),
)

Spacing

To configure spacing, create a new file named spacing.dart and add the following code:

import 'package:flutter/material.dart';

const kHorizontalMargin = 16;
const kVerticalMargin = 16;
const kDefaultPadding = 20;

Then, use the spacing in your widget like this:

Padding(
  padding: EdgeInsets.all(kDefaultPadding),
  child: Text('Hello'),
)

Screens

To configure screens, create a new file named screens.dart and add the following code:

import 'package:flutter/material.dart';
import 'package:universal_app/screens/home_screen.dart';

class UniversalApp {
  static Widget get HomeScreen => HomeScreen();
}

Then, use the screens in your app like this:

MaterialApp(
  title: 'Universal App',
  home: UniversalApp.HomeScreen(),
)

Translation

To configure translation, create a new file named translations.dart and add the following code:

import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';

class AppTranslations {
  static Future<void> init() async {
    await EasyLocalization.ensureInitialized();
  }
}

Then, use the translation in your app like this:

AppTranslations().init();
MaterialApp(
  title: 'Universal App',
  supportedLocales: [
    Locale('en', 'US'),
    Locale('es', 'ES'),
  ],
  localizationsDelegates: [
    EasyLocalizationDelegate(),
  ],
  home: HomeScreen(),
)

Icons

To configure icons, create a new file named icons.dart and add the following code:

import 'package:flutter/material.dart';
import 'package:universal_app/icons/custom_icons.dart';

class AppIcons {
  static const customIcons = CustomIcons();
}

Then, use the icons in your widget like this:

Icon(
  AppIcons.customIcons.truck,
  size: 24,
)

Here are the key features of the uFlutter App UI Kit:

Features:

1. Support for Android and iOS: The kit supports both Android and iOS platforms.
2. Dart Language: The kit is built using Dart language.
3. UI/UX design from industry experts: The kit's UI/UX design is from industry experts.
4. Smooth Transition Effects: The kit has smooth transition effects.
5. Font Awesome & Material Icons: The kit includes Font Awesome and Material Icons.
6. WorkSans Font: The kit uses WorkSans font.
7. Mobile and Tablet Support: The kit is designed for mobile and tablet devices.
8. Responsive design for all devices: The kit has a responsive design that adapts to all devices.
9. Animation Controller: The kit has an animation controller.
10. Easy to customize to Black & White Theme: The kit can be easily customized to a Black & White theme.
11. Complete eCommerce widgets: The kit includes complete eCommerce widgets.
12. Sign in, sign up, reset password, setting profile UI: The kit includes UI for sign in, sign up, reset password, and setting profile.
13. 500+ Widget added with animations: The kit includes over 500 widgets with animations.
14. Responsive design: The kit has a responsive design.
15. 100+ screens: The kit includes over 100 screens.
16. Clean Code: The kit has clean code.
17. Animation Reusable Ready-made widgets: The kit includes reusable, ready-made animation widgets.

Components:

1. Buttons (raised, flat, ghost, disabled, FAB, icon, social, toggle)
2. Chips
3. Switch controls
4. Text inputs and Text fields
5. Drop down fields
6. Sliders
7. App bars
8. Bottom navigation
9. Bottom bars
10. Tabs
11. Navigation drawers
12. Item cards and item lists
13. Item grids
14. Horizontal scrollables
15. Products UI
16. Color, size, attributes selection
17. Search Fields
18. Calendar UI
19. Maps UI
20. Misc elements and controls

Additional Features:

1. Full screen video (planned in the next release)
2. Splash animation (planned in the next release)
3. Onboarding UI (planned in the next release)
4. More components and widgets planned in the next releases

Changelogs:

1. V1.3 on 05.01.2021: Added new complete full chat app, new components and widgets, and sticky slider for easy navigation.
2. V1.2.2 on 01.09.2020: Added new 500 icons PNG, JPG Pack and complete Dark and Light Mode.
3. V1.2.0 on 24.08.2020: Added 51 new page screens, Dark/Light Mode, and brand new first page.
4. V1.1 on 03.08.2020: Added 9 social pages.
5. V1.0.0 on 31.07.2020: Initial release.