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 .

Installation

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

⚠️

Forui 0.12.0+ requires Flutter 3.32.0+. Run flutter --version to check your Flutter version.

bash


flutter pub add forui

Upgrading

Flutter does not automatically upgrade minor versions of packages prior to 1.0.0.

This means that that following entry in your pubspec.yaml file will not automatically upgrade to 0.12.0:

pubspec.yaml


dependencies:
  forui: ^0.11.0 // ❌ will not upgrade to 0.12.0

To upgrade to the latest version of Forui, run the following command:

bash


flutter pub upgrade forui --major-versions

Forui Icons

Forui Icons is bundled with the forui package. You don’t need to install it separately if you install forui.

If you would like to only use the icons, run the following command from your Flutter project’s directory.

bash


flutter pub add forui_assets

Usage

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

To generate a basic Forui app structure in your project, run:

bash


dart run forui init

It is perfectly fine to use Cupertino/Material widgets alongside Forui widgets!

main.dart


import 'package:flutter/material.dart';
 
import 'package:forui/forui.dart';
 
void main() {
  runApp(const Application());
}
 
class Application extends StatelessWidget {
  const Application({super.key});
 
  Widget build(BuildContext context) => MaterialApp(
    builder: (context, child) => FTheme(
      data: FThemes.zinc.light,
      child: child!,
    ),
    home: 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.