Introduction

In our previous blog post, we introduced a new feature that enables users to create, join, and keep track of events. This feature lets users quickly view the lists of events they have made or joined.

If you've reached this point in the series, I just wanted to express my appreciation for your dedication and effort. This will be the final blog post in the series. We will make things more pleasant to look at and finalize our chipIn app. Let's get right into it!

Why bother with good UI/UX

Think about your favorite app. What made you stick with it? Chances are, it wasn't just the functionality but also the simplicity and smoothness of the user interface.

This is why investing time in designing and refining your app's UI/UX is critical to user retention and the overall success of your app. So, let's dive in and learn how to make our apps functional, user-friendly, and visually appealing!

Our updated codebase structure

lib/
├── appwrite
│   ├── appwrite_constants.dart
│   └── appwrite_service.dart
├── features
│   ├── authentication
│   │   ├── controller
│   │   │   └── auth_controller.dart
│   │   ├── services
│   │   │   ├── auth_service.dart
│   │   │   └── oauth_service.dart
│   │   └── views
│   │       ├── auth_main_view.dart
│   │       ├── login_view.dart
│   │       └── signup_view.dart
│   ├── events
│   │   ├── models
│   │   │   ├── attendee_model.dart
│   │   │   └── event_model.dart
│   │   ├── services
│   │   │   └── event_service.dart
│   │   ├── views
│   │   │   ├── create_events.dart
│   │   │   ├── created_events.dart
│   │   │   ├── event_details.dart
│   │   │   ├── join_events.dart
│   │   │   └── joined_events.dart
│   │   └── widgets
│   │       └── event_card.dart
│   ├── home_page.dart
│   └── myapp.dart <-- // New
├── main.dart
└── themes <-- // New
    └── palette.dart

Here is the finalized structure of our codebase.

Applying themes to our app

Palette class

I created the Palette class in my chipIn app to simplify color management. It helps me easily integrate consistent colors across different UI components without the need to remember or manually input hexadecimal or RGBA values.

themes/palette.dart

import 'package:flutter/material.dart';

class Palette {
  // Primary colors. These are generally used for main UI elements such as buttons, progress bars, etc.

  static const Color primary50 =
      Color.fromARGB(255, 252, 55, 121); // Lighter Pink
  static const Color primary100 = Color(0xFFf02e65); // Light Pink
  static const Color primary200 = Color(0xFFDA1A5B); // Medium Pink
  static const Color primary300 = Color(0xFFc00D53); // Dark Pink

  // Neutral colors. These are typically used for backgrounds, typography, borders, shadows, etc.
  static const Color neutral0 = Color(0xFFffffff); // White
  static const Color neutral5 = Color(0xFFFCFCFF); // Very Light Gray
  static const Color neutral10 = Color(0xFFf2f2f8); // Light Gray
  static const Color neutral30 = Color(0xFFE8E9F0); // Gray
  static const Color neutral50 = Color(0xFFC4C6D7); // Medium Gray
  static const Color neutral70 = Color(0xFF868EA3); // Dark Gray
  static const Color neutral100 = Color(0xFF616B7C); // Darker Gray
  static const Color neutral120 = Color(0xFF4F5769); // Even Darker Gray
  static const Color neutral150 = Color(0xFF373B4D); // More Darker Gray
  static const Color neutral200 =
      Color(0xFF282A3B); // More and More Darker Gray
  static const Color neutral300 = Color(0xFF1B1B28); // Even More Darker Gray
  static const Color neutral400 = Color(0xFF171723); // So Much Darker Gray
  static const Color neutral500 = Color(0xFF14141F); // The Darkest Gray

  // Information colors. These are typically used for informational messages or indicators.
  static const Color information10 = Color(0xFFF1FCFE); // Light Cyan
  static const Color information50 = Color(0xFFC8F2FC); // Cyan
  static const Color information100 = Color(0xFF00A7C3); // Dark Cyan
  static const Color information120 = Color(0xFF007187); // Darker Cyan
  static const Color information200 = Color(0xFF04333A); // The Darkest Cyan

  // Success colors. These are typically used for success messages or indicators.
  static const Color success10 = Color(0xFFEFFEF7); // Light Green
  static const Color success50 = Color(0xFFBFFCDD); // Green
  static const Color success100 = Color(0xFF00BC5D); // Dark Green
  static const Color success120 = Color(0xFF00754A); // Darker Green
  static const Color success200 = Color(0xFF06331C); // The Darkest Green

  // Warning colors. These are typically used for warning messages or indicators.
  static const Color warning10 = Color(0xFFFFF7EE); // Light Orange
  static const Color warning50 = Color(0xFFFFE1C0); // Orange
  static const Color warning100 = Color(0xFFF38500); // Dark Orange
  static const Color warning120 = Color(0xFFB34700); // Darker Orange
  static const Color warning200 = Color(0xFF462701); // The Darkest Orange
}

• The primary colors are typically used for main UI elements like buttons

• Neutral colors are used for backgrounds, typography, borders, and shadows

• Information colors are used for informational messages or indicators

• Success colors for success messages or indicators, and

• Warning colors for warning messages or indicators.

Shortening the main.dart file

main.dart

import 'package:chipin_blogpost/features/myapp.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    const MyApp(),
  );
}

This is literally what our main.dart file is going to look like now. It's simply an entry point for our app and running our code. Where is the MyApp() function now?

myapp.dart

import 'package:chipin_blogpost/features/authentication/views/auth_main_view.dart';
import 'package:chipin_blogpost/themes/palette.dart';
import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'chipIn',
      theme: ThemeData(
        primaryColor: Palette.primary100,
        colorScheme: ThemeData().colorScheme.copyWith(
              secondary: Palette.primary200,
              background: Palette.primary300,
            ),
        appBarTheme: const AppBarTheme(
          backgroundColor: Palette.primary300,
        ),
      ),
      home: AuthMainView(),
    );
  }
}

In this code, I moved the MyApp widget from the main.dart file to a separate file called myapp.dart. It just makes the main.dart file looks clean and straightforward. You can see that I have already used the Palette class to make the widget look nicer. Here's the breakdown:

The Palette class is used in this code to define the colors used in the app's theme. It provides the primary, secondary, and background colors for the app.

• Palette.primary100 is set as the primary color of the app's theme.

• Palette.primary200 is used to define the secondary color in the app's color scheme.

• Palette.primary300 is set as the background color for the app's theme and app bar.

You have been given an overview of how the Palette class was utilized. I will provide you with all the project files that require UI enhancement, and you can observe how the Palette class was used.

Theming the authentication feature of the app

auth_main_view.dart

To view the before and after comparison of the auth_main_view.dart file, with the old version lacking a theme and the new version incorporating a theme, you can refer to the Git Tag named AuthMainView-Redesign. Switch to the Split view to easily observe the differences between the two versions.

login_view.dart

Git Tag: LoginView-Redesign

signup_view.dart

Git Tag: SignUpView-Redesign

Theming the event-related features of the app

event_card.dart

Git Tag: EventCard-Redesign

event_creation.dart

Git Tag: EventCreationScreen-Redesign

event_details.dart

Git Tag: EventDetails-Redesign

Theming the home page of the app

home_page.dart

Git Tag: HomePage-Redesign

Hopefully, this will help you understand how we utilized the Palette class.

A final look at the chipIn app

The design has undergone significant improvements! I suggest running the project on your device emulator to appreciate the new and improved look fully.

Conclusion

We made it! But most importantly, you made it. I hope you enjoyed this series of creating chipIn, our simple event planning and management app powered by Flutter and Appwrite.

In summary, we've explored how the Palette class helps maintain a consistent color scheme throughout the app by categorizing colors into different groups. This ensures an organized and easy-to-manage system. We've also discussed the benefits of separating the MyApp widget into its file, which improves code readability, navigation, and maintenance.

Appwrite: Empowering your app development, farewell, and happy coding!

In a nutshell, Appwrite is more than just a tool - it's a supportive companion in your app development journey. Ever since I developed chipIn and used Appwrite, I have become more self-assured in utilizing technologies that I previously believed were beyond my capabilities or would require ample time to learn, such as Appwrite. This experience served as a starting point for me and a springboard for future projects I may be keen on creating. I am looking forward to building more projects using Appwrite, apart from mobile development. I'm certain that I haven't used many of its features yet.

So, as we wrap up our discussion on app development, it's crucial to remember that you're not alone in this journey. There are numerous resources available that can provide guidance, inspiration, and community.

• Appwrite's Official Website: Learn more about Appwrite's features and how they can help you in your app development process.

• Appwrite's Comprehensive Documentation: This is your go-to guide for understanding how to use Appwrite. It covers everything from getting started guides to detailed API references.

• Appwrite's GitHub Repository: You can find the entire Appwrite codebase here. Feel free to examine the code, contribute to the project, or even fork it to create a version that meets your unique needs.

• Appwrite's Discord Community: This thriving community is a great place to interact with other developers, ask questions, and learn more about how others use Appwrite.

• Appwrite's Blog: The blog contains various articles and tutorials related to Appwrite. It's an excellent resource for gaining insights and learning new techniques.

• Appwrite's Twitter: Follow Appwrite on Twitter for the latest updates and news about the platform.

• Appwrite's LinkedIn: Another platform to follow Appwrite for updates and news.

• Appwrite's YouTube Channel: This channel features video tutorials and guides on using Appwrite.

Explore these resources, dive into the community, and see how Appwrite can transform your app development process. Thank you for following along in this series with me. Happy coding!