When it comes to designing user interfaces in Flutter, following the 60-30-10 rule in Flutter can help you create visually appealing color schemes that are both functional and aesthetically pleasing
The 60-30-10 rule is a popular principle in design that can be applied to create balanced and visually appealing color schemes. By dividing colors into percentages of 60%, 30%, and 10%, designers can create color palettes that are harmonious and effective. In this article, we will explore how the 60-30-10 rule can be applied in Flutter app development to create engaging and aesthetically pleasing user interfaces.
What is the 60-30-10 rule?
The 60-30-10 rule is a principle used in graphic design, interior design, and other visual arts fields. It’s a general guideline for creating a balanced and harmonious color palette in a design. The rule suggests dividing the colors in a design into three categories:
- The 60%(Primary Colors): This is the main color of your design, and it should be the dominant color. This color should be used for the background and the majority of the visual elements in your design.
- The 30%(Secondary Colors): This is the secondary color of your design, and it should complement the main color. This color can be used for the headers, subheaders, and other important visual elements in your design.
- The 10%(Accent Colors): This is the accent color of your design, and it should be used sparingly to draw attention to specific areas or elements in your design. This color can be used for your design’s buttons, links, or other important call-to-action elements.
Tips and Tricks for Achieving a Balanced Color Scheme
The 60-30-10 rule is a popular color scheme used by many Flutter developers to make their UI designs look clean. By following this rule, developers can achieve a balanced and harmonious color scheme that enhances the user experience.
My first suggestion is to create a container that visually represents the ratio of primary, secondary, and accent colors. This way, you can easily keep track of the color scheme and ensure that it follows the 60-30-10 rule. It will help you stay focused on the color scheme while designing your UI. This not only helps you stay focused on the 60-30-10 rule but also serves as a good practice for choosing your color scheme at the initial stage.
import 'package:flutter/material.dart';
void main() {runApp(const MyApp());}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: '60-30-10 rule',
home: Rule603010Ui(),
);
}
}
class Rule603010Ui extends StatelessWidget {
const Rule603010Ui({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 2,
blurRadius: 5,
offset: const Offset(0, 2),
),
],
),
child: FittedBox(
child: Row(
children: [
buildColoredContainer(context,60, Colors.black87),//black
buildColoredContainer(context,30, Colors.black12),//grey
buildColoredContainer(context,10, Colors.blueAccent),//green
],
),
),
),
),
),
);
}
}
Widget buildColoredContainer(BuildContext context, double percentage, Color color) {
return Container(
width: MediaQuery.of(context).size.height * percentage / 100,
height: 100,
color: color,
child: Center(
child: Text(
'$percentage%',
style: const TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
);
}This code creates a visual representation of the 60-30-10 rule for color schemes in UI design. It helps you keep track of the primary, secondary, and accent colors in your app. You can also use this as a starting point to imagine which colors will look best for your app. The code creates three colored containers that represent the different percentages for each color.
I have chosen a color scheme of white, black, and green as primary, secondary, and accent colors respectively, and displayed them in a row. This can help you visualize how the colors work together and how much of each color to use. You can also experiment with different color combinations by adjusting the percentage of each color and see how they look in the container.
Applying the 60-30-10 Rule in Flutter: Choosing Colors for Your Mobile App
Now, let’s talk about how to apply these colors to your Flutter mobile app. The app should use the secondary color, which is black in our case, for the app bar. The background color should be the primary color, which is white, and for highlighting items such as buttons, use the accent color, which is green. This will create a consistent and visually appealing color scheme throughout the app.
Primary Color (60%):
- The primary color should be the dominant color in your UI design.
- This color will typically be used for the background of your app and for larger elements in your design, such as headers or cards.
- When choosing a primary color, consider the mood or emotion you want your app to convey.
Secondary Color (30%):
- The secondary color should be used to complement the primary color and add depth to your design.
- This color will be used for elements that are smaller than the primary color, such as text, icons, or borders.
- When choosing a secondary color, consider colors that are similar or complementary to your primary color.
Accent Color (10%):
- The accent color should be used to add emphasis to certain elements in your design and create visual interest.
- This color will be used sparingly, for things like buttons, links, or important call-to-actions.
- When choosing an accent color, consider colors that are different or contrasting to your primary and secondary colors, but still complement them.
Product Detail UI: Using 60-30-10 Rule
When designing a product detail screen, it is important to create a visually appealing and functional user interface. By using the 60-30-10 rule, we can achieve a balanced color scheme that enhances the overall design.
Initializing the Colors
First, we can initialize our colors using the primary, secondary, and accent colors. The primary color will be used for the background of the screen and the secondary color will be used for text and smaller elements. The accent color will be used to draw attention to important elements, such as buttons.
Color primaryColor = Colors.white;
Color secondaryColor = Colors.black;
Color accentColor = Colors.green;Creating App Bar
Next, we can start designing the app bar. We will use the secondary color, which is black in this case, for the app bar. We can add a title and an icon button to the app bar for navigation. and use the accent color for the “Add to Cart” button.
appBar: AppBar(
title: Text(
'Sneaker', // using accent color for the app title
style: TextStyle(
color: accentColor, // setting accent color for the title text
fontSize: 20,
),
),
centerTitle: true,
elevation: 0.1,
backgroundColor: secondaryColor, // using secondary color for appbar background
actions: [
IconButton(
onPressed: () {},
icon: Icon(
Icons.shopping_cart,
color: accentColor, // using accent color for icon color
))
],
),
Creating Body Structure
Moving on to the body of the screen, we can use the primary color, which is white in our case, for the background. We can add an image of the product, its name, and its price in the body. We can also use the secondary color for the product description
// This is the body of the screen, containing the product details and quantity selector.
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Product image
SizedBox(
height: 350,
width: double.infinity,
child: Container(
height: 10, child: Image.asset("assets/images/shoe.png")),
),
// Product title
Text(
'Sneaker',
style: TextStyle(
fontWeight: FontWeight.bold,
color: secondaryColor,
fontSize: 18),
),
const SizedBox(
height: 16,
),
// Product details
const Expanded(
child: Text(
'''Product details
Package Dimensions : 29 x 23 x 11 cm; 1 Kilograms
Date First Available : 7 December 2021
Manufacturer : Dejavu
ASIN : B09N7QF9S6
Item model number : PMA-DVTT-010
Department : Womens''',
style: TextStyle(
fontSize: 12,
color: Colors.grey,
),
),
),
const SizedBox(
height: 16,
),
// Quantity selector
Row(
children: [
Text(
'Quantity',
style: TextStyle(
color: secondaryColor,
fontSize: 18,
fontWeight: FontWeight.bold),
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.remove,
color: accentColor,
)),
Text(
'1',
style: TextStyle(color: secondaryColor, fontSize: 18),
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.add,
color: accentColor,
)),
],
),
],
),
),
Creating Bottom Button
Finally, we can design the bottom navigation bar with a “Continue” button. We can use the primary color for the background of the navigation bar and the accent color for the “Continue” button.
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
height: 50,
width: double.infinity,
// Use accentColor for the container's background color to match the theme
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30), color: accentColor),
child: Center(
child: Text(
'Continue',
style: TextStyle(
// Use primaryColor for the text color to provide contrast
color: primaryColor,
fontSize: 20,
fontWeight: FontWeight.bold
),
),
),
),
),
Output
Full Source code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Shoe Detail Screen',
home: Home(),
);
}
}
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// Define primary, secondary and accent colors for the app
Color primaryColor = Colors.white; // Dominant color
Color secondaryColor = Colors.black; // Supporting color
Color accentColor = Colors.green; // Highlight color
return Scaffold(
backgroundColor: primaryColor,
appBar: AppBar(
title: Text(
'Sneaker', // using accent color for the app title
style: TextStyle(
color: accentColor, // setting accent color for the title text
fontSize: 20,
),
),
centerTitle: true,
elevation: 0.1,
backgroundColor: secondaryColor,
// using secondary color for appbar background
actions: [
IconButton(
onPressed: () {},
icon: Icon(
Icons.shopping_cart,
color: accentColor, // using accent color for icon color
))
],
),
// This is the body of the screen, containing the product details and quantity selector.
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Product image
SizedBox(
height: 350,
width: double.infinity,
child: Container(
height: 10, child: Image.asset("assets/images/shoe.png")),
),
// Product title
Text(
'Sneaker',
style: TextStyle(
fontWeight: FontWeight.bold,
color: secondaryColor,
fontSize: 18),
),
const SizedBox(
height: 16,
),
// Product details
const Expanded(
child: Text(
'''Product details
Package Dimensions : 29 x 23 x 11 cm; 1 Kilograms
Date First Available : 7 December 2021
Manufacturer : Dejavu
ASIN : B09N7QF9S6
Item model number : PMA-DVTT-010
Department : Womens''',
style: TextStyle(
fontSize: 12,
color: Colors.grey,
),
),
),
const SizedBox(
height: 16,
),
// Quantity selector
Row(
children: [
Text(
'Quantity',
style: TextStyle(
color: secondaryColor,
fontSize: 18,
fontWeight: FontWeight.bold),
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.remove,
color: accentColor,
)),
Text(
'1',
style: TextStyle(color: secondaryColor, fontSize: 18),
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.add,
color: accentColor,
)),
],
),
],
),
),
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
height: 50,
width: double.infinity,
// Use accentColor for the container's background color to match the theme
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30), color: accentColor),
child: Center(
child: Text(
'Continue',
style: TextStyle(
// Use primaryColor for the text color to provide contrast
color: primaryColor,
fontSize: 20,
fontWeight: FontWeight.bold),
),
),
),
),
);
}
}
Conclusion
The 60-30-10 rule is a simple and effective way to create visually appealing and balanced color schemes in design. It involves using the primary color for 60% of the UI design, the secondary color for 30%, and the accent color for 10%. By following this rule, you can achieve a balanced and harmonious color scheme that enhances the user experience.
In Flutter, you can use this rule to create a consistent and visually appealing color scheme throughout your mobile app. You can use the primary color for the background, the secondary color for smaller elements, and the accent color for important call-to-actions. It’s also a good practice to create a container that visually represents the ratio of primary, secondary, and accent colors to help you stay focused on the color scheme while designing your UI.
When designing a product detail UI, you can use the 60-30-10 rule to create a visually appealing and functional design. Start by initializing the colors, then complete the app bar, body, and bottom navigation bar with a button. Remember to use the primary color for the background, the secondary color for smaller elements, and the accent color for important call-to-actions.
In conclusion, by following the 60-30-10 rule, you can create a consistent and visually appealing color scheme that enhances the user experience and makes your mobile app stand out.
Neumorphism Style: How to Make a 3D Animated Button in Flutter?
