Skip to content

Quick Start

This Quick Start guide will help you get up and running with XWidget in just a few minutes. For a more comprehensive description of the various components and features, please see the sections below.

Prerequisites:

  • Flutter: >=3.10.0
  • Dart SDK: >=3.0.0 <4.0.0

1. Install XWidget

Install XWidget and XWidget Builder with the following command. XWidget provides the core functionality, while XWidget Builder includes development tools for code generation and project initialization.

flutter pub add xwidget dev:xwidget_builder

2. Initialize Project

New Project

If you are starting a new project, use the --new-app flag to replace the current project with the example app. This provides a solid starting point for building your XWidget application.

dart run xwidget_builder:init --new-app

Existing Project

If you have an existing project, omit the --new-app flag to safely add XWidget without replacing your current code.

$ dart run xwidget_builder:init

3. Register Schema

Register the generated schema file xwidget_schema.g.xsd with your IDE using the namespace http://www.appfluent.us/xwidget. This enables validation, code completion, and tooltip documentation when editing fragments.

4. Add More Components

To register additional components, modify lib/xwidget/inflater_spec.dart and run:

dart run xwidget_builder:generate --only inflaters

5. Android Studio Plugin

Android Studio users should install the Flutter XWidget plugin for enhanced development features including EL syntax highlighting, contextual navigation, and component generation.