If you’re looking to create a sleek and modern UI in your Flutter applications, then you’ve landed in the right place! The Equinox package provides easy access to the Eva Design System, making it a breeze to integrate stylish components into your projects. In this guide, we’ll walk you through the steps of setting up Equinox and provide troubleshooting tips to help you out if you encounter any bumps along the way.

Step 1: Getting Dependencies

First things first, you need to add Equinox to your Flutter project. This is like making sure you have the right tools before you start building.

• Open your project’s pubspec.yaml file.
• Add the following line to the dependencies section:

dependencies:
  equinox: ^0.3.3

Step 2: Install Packages

Once you’ve added the package, you need to install it. Think of it as checking in with the supply manager:

• Run the following command in your terminal:

$ flutter pub get

Step 3: Import Equinox

Now that you have the package installed, you can bring it into your Dart files like inviting a friend to your party:

import 'package:equinox/equinox.dart';

Step 4: Setting Up Your Main App

To use Equinox, you must replace your usual MaterialApp or CupertinoApp with EquinoxApp. Think of this as changing the theme of a house party:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return EquinoxApp(
      theme: EqThemes.defaultLightTheme,
      title: 'Flutter Demo',
      home: HomePage(),
    );
  }
}

Step 5: Using Equinox Layouts

Instead of using Scaffold, you will now use EqLayout. It’s like swapping chairs for stylish ones!

 @override
 Widget build(BuildContext context) {
   return EqLayout(
     appBar: EqAppBar(
       centerTitle: true,
       title: 'Auth Test',
       subtitle: 'v0.0.3',
     ),
     child: MyBody(),
   );
 }

Step 6: Customizing Your Widgets

Every widget in Equinox begins with Eq. So if you need a button, you’ll be using EqButton:

EqButton(
  appearance: WidgetAppearance.ghost,
  onTap: () {},
  label: 'Log in',
  size: WidgetSize.large,
  status: WidgetStatus.primary,
);

Troubleshooting Tips

If you face any issues while setting up Equinox, consider the following:

• Ensure your Flutter SDK is updated to the latest version.
• Make sure you correctly updated the pubspec.yaml file without any indentation errors, as YAML is sensitive to spaces.
• If you encounter errors while running flutter pub get, try restarting your IDE or terminal.
• Please check the version of Equinox to ensure compatibility with your Flutter version.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Additional Resources

You can explore more about Equinox through the following documentation:

• Official Documentation
• Wiki Guide

Conclusion

With Equinox, you can easily give your Flutter app a fresh, modern feel using the Eva Design System. The process is straightforward, and once you’re set up, the creative possibilities are endless!

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Connect with the Community

Explore other Eva Design implementations including:

• Angular
• React Native

For any inquiries or issues, feel free to reach out at: kk.erzhan@gmail.com.