TL;DR: The Flutter Expense Tracker app introduces a streamlined onboarding experience that guides users through setup easily and clearly. It begins with a Setup Page that collects essential personal details such as name, birth date, gender, and preferred currency, all presented in layouts optimized separately for desktop and mobile devices to ensure a smooth user experience. Following this, the Import Page offers flexible options—users can begin with sample financial data, upload their .xlsx file, or skip the import process altogether. Emphasizing simplicity and usability, the onboarding flow is a one-time step, with built-in input validation to ensure accuracy and ease from the very beginning.

In this blog, we’ll explore the features and functionalities of the onboarding pages in the Flutter Expense Tracker sample. For more details of the overall Expense Tracker Sample, read the introductory blog.

Overview

In the Expense Tracker sample, we’ll display the following onboarding pages:

• Setup page
• Import page

One-time setup: The onboarding pages in the Expense Tracker sample guide first-time users through the initial setup process. These pages appear once to collect essential user preferences and cannot be revisited unless the application is reset.

Setup page

The Setup page allows users to create their profile by entering essential details, such as their name, date of birth, gender, and preferred currency. This information is used for their profile within the Expense Tracker sample.

Layout

Desktop layout

For desktop and tablet devices, the Setup page features a clean, user-friendly design with the screen split into two sections.

• The left half displays an engaging image, enhancing the visual appeal.
• The right half contains vertically arranged input fields for user details.

This layout ensures a visually appealing experience while keeping the form easily accessible.

/// Builds desktop layout for the signup form.
Widget _buildDesktopLayout(BuildContext context) {
  return Row(
    children: <Widget>[
      _buildImage(),
      _buildResponsiveSignUpForm(),
    ],
  );
}

Refer to the following image.

Mobile layout

On mobile devices, the Setup page is designed for simplicity and ease of use. The entire screen is dedicated to input fields, arranged vertically for a smooth and accessible user experience.

/// Builds mobile layout for the signup form.
Widget _buildMobileLayout(BuildContext context) {
  return SafeArea(
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 32.0, vertical: 40),
      child: SingleChildScrollView(
        child: SizedBox(
          width: 300.0,
          child: _buildSignUpForm(context),
        ),
      ),
    ),
  );
}

Refer to the following image.

Input fields on the Setup Page

The Setup page contains five fields designed to gather user information.

• Name: Records the user’s first and last name, which will be displayed in the profile.
• Date of birth: Records the user’s date of birth.
• Gender: Records the user’s gender.
• Currency format: Sets the preferred currency for the Expense Tracker. This selection is a one-time setup and cannot be changed later unless the application is reset.

Widget _buildSignUpForm(BuildContext context) {
  final List<String> currencies = buildCurrencies();
  final String selectedCurrency = _selectedCurrencyNotifier.value;
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      _buildTitleText(context),
      verticalSpacer8,
      _buildIntroText(context),
      verticalSpacer32,
      _buildNameFields(context),
      verticalSpacer16,
      _buildDOBField(context),
      verticalSpacer16,
      _buildGenderDropdown(context),
      verticalSpacer16,
      _buildCurrencyDropdown(currencies, selectedCurrency),
      verticalSpacer16,
      _buildNavigationButton(),
    ],
  );
}

Validating input fields

The Next button on the Setup page remains disabled until all the required fields are correctly filled in, ensuring accurate user input. Once clicked, users can smoothly navigate to the Import page .

This validation checks all the values of the text editing controllers to confirm that no fields are left empty. The button’s state is managed using the Flutter Provider package, ensuring it only becomes active once all required inputs are filled.

Refer to the following image.

Import page

On the Import page, users can choose to upload their existing financial data or begin with predefined sample data.

Layout

Desktop layout

For larger screens, the Import page follows a structured split-screen design.

• The left half features an engaging image, enhancing the visual appeal.
• The right half contains options for the users to upload their financial data or start with sample data.

This layout ensures a clean, organized, and user-friendly experience.

/// Constructs the layout for desktop devices.
Widget _buildDesktopLayout(BuildContext context) {
  return Row(
    children: <Widget>[
      _buildImage(),
      _buildResponsiveImportPage(),
    ],
  );
}

Refer to the following image.

Mobile layout

The Import page on mobile devices is designed for simplicity and ease of navigation. Users can either upload their existing financial data or continue with predefined data by tapping the Continue with sample data button.

/// Constructs the layout for mobile devices.
Widget _buildMobileLayout(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 40),
    child: SingleChildScrollView(
      child: _buildImportPage(context),
    ),
  );
}

Refer to the following image.

The design utilizes Flutter’s built-in OutlinedButton widget to Continue with sample data and Upload your file options. Other elements use a text widget to display relevant information to users.

/// Builds the main content of the import page.
Widget _buildImportPage(BuildContext context) {
  return Consumer<ImportNotifier>(
    builder: (BuildContext context, ImportNotifier import, Widget? child) {
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          _buildHeader(),
          verticalSpacer12,
          _buildObjective(),
          verticalSpacer24,
          _buildActions(import),
          verticalSpacer12,
          _buildHelperText(),
          verticalSpacer24,
          _buildNotes(),
          verticalSpacer24,
          _buildFinishButton(context, import),
        ],
      );
    },
  );
}

Features

The Import page in the Expense Tracker sample offers three options to enhance the user experience.

• Continue with sample data
• Upload your file
• Skip & Finish

Continue with sample data

This option allows the users to explore the app’s features using preloaded sample data. You can reset the sample data anytime in the settings by tapping the reset button.

Desktop demo

Mobile demo

Upload your file

This option allows users to upload their financial data in .xlsx format to view details based on their actual information. It is helpful for users who want to work with and visualize their real data.

Desktop demo

Mobile demo

Skip & Finish

The Skip & Finish button allows you to bypass the import process and start using the Expense Tracker sample immediately.

Validating imported files

The state of the Skip & Finish button is dynamically managed using the Flutter provider package.

• If a file is uploaded, the button label changes to F inish, and the uploaded file details will replace the U pload your file button.
• If the file is deleted, the page reverts to its initial state, displaying the Skip & Finish button again.

  

Conclusion

Thank you for taking the time to explore the Expense Tracker onboarding pages with us. This blog explored the Expense Tracker onboarding pages for first-time users. We hope you found the guide insightful and engaging. Start your journey towards better financial management using the Expense Tracker sample today.

Existing customers can download the new version of Essential Studio^® on the license and downloads page. If you are not a Syncfusion^® customer, try our 30-day free trial to check out our incredible features.

If you have any questions, contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related Blogs

• Simplify Your Finances with the Flutter Expense Tracker
• Build a Flutter Expense Tracker with Advanced Transaction Features
• Build a Smart, AI-Powered DataGrid in Flutter for Predictive Data Analysis
• Build Interactive Trading Apps Using Flutter DataGrids

This article was originally published at Syncfusion.com.