Getting Started

This guide assumes you have a basic understanding of Flutter and have already set up your development environment. If you're new to Flutter, you may follow the official installation guide (opens in a new tab).

Installation

From your Flutter project directory, run the following command to install Forui.

flutter pub add forui

Forui Icons

If you would like to only use the icon package, run the following command from your Flutter project directory.

flutter pub add forui_assets

Usage

To use Forui widgets in your Flutter app, import the Forui package and place the FTheme widget at the root of the widget tree.

import 'package:flutter/widgets.dart';
 
import 'package:forui/forui.dart';
 
void main() {
  runApp(const Application());
}
 
class Application extends StatelessWidget {
  const Application({super.key});
 
  @override
  Widget build(BuildContext context) => FTheme(
    data: FThemes.zinc.light,
    child: const FScaffold(...),
  );
}

Themes

Forui provides a set of predefined themes that you can use out of the box. In the example above, we used the FThemes.zinc.light theme, which is a light theme variant of the zinc color scheme.

Themes are a very powerful building block in Forui, allowing you to customize the look and feel of your app. To learn more about themes, refer to the Themes page.

With Material/Cupertino

It's perfectly safe to use Forui widgets alongside Material/Cupertino widgets. This is especially useful when you need to use a Material/Cupertino widget that is not available in Forui or require it for routing. (eg. MaterialApp.router or CupertinoApp.router)

@override
Widget build(BuildContext context) => MaterialApp(
  // Other configurations...
  home: FTheme(
    data: FThemes.zinc.light,
    child: const FScaffold(...),
  ),
);