Photo by vackground.com on Unsplash
Theming and finalizing our chipIn app - Appwrite & Flutter: Event app tutorial
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!