Save weeks of
development time
We create Flutter widgets directly from UI design.
No need to manually inspect and code the design details.
~$ > assistant get flutter-components
COMPONENT LIBRARY
Save time by turning your design into custom Flutter components
Don't waste your time manually coding texts, images, shapes, paddings, colors and all other design details.
- Create Components
Select elements on your design and create a component.
- Preview code
Monday Hero automatically gives rows, columns & stacks so that the code is responsive. Preview and edit any responsive code on Monday Hero.
- Synch components to your project
Once you are happy with your component library, copy code or synch to your project.
Create your Flutter Component Library in No Time
Simply select any portion of your screen to build reusable components instantly.
- Buttons
- List View Builders
- Text Fields
- Card Views
- Custom Widgets
- More..
Complete Freedom in Custom Component Creation
Select any part of the screen and easily turn your unique designs into custom components. Create a component library that perfectly matches your vision, and enjoy the freedom to shape your project exactly as you envision it.
SMART RESPONSIVE
Responsive code powered by AI
Monday Hero Code Assistant will guess how the responsive will work with rows, columns, and stacks. It will even provide padding around items. The rest is on you, and you can edit them or just get it as is.
Adaptability
Control Your Responsive Code
Personalize your app's responsiveness. With Monday Hero, edit and fine-tune the responsive code to meet your specific needs, ensuring your application looks stunning on any screen size.
CONFIDENCE
Preview for Precision
Ensure your code is exactly what you want before moving it to your project. Preview your code on Monday Hero to avoid surprises.
EFFICIENCY
Inspect Layers
Create your custom component library straight from your designs, saving up to 60% of your development time. Forget about the hassle of manually coding design details and focus on the big picture.
SYNC
Synchronize to Your Favorite IDE
Connect Monday Hero to your workspace and sync code to your project whenever needed. Feel at home with your favorite tool, be it Android Studio, Visual Studio, or any other IDE.
ASSETS
All assets are one click away to download
No need to waste time preparing assets in different resolutions.
SHOW CASES
Turn Guideline Into Code Automatigically
Monday Hero gets all the colors, font family, font size, and strings and places them into a file without duplicating. It's much easier to manage the change requests!
Colors
Code Assistant understands the colors in a unique way, bye bye duplicate colors!
1abstract class AppColors {
2 Color get sky => const Color(0xff79c5ff);
3 Color get strawberry => const Color(0xffeb5757);
4 Color get systemError => const Color(0xffec1c41);
5 Color get systemInProgress => const Color(0xfff6b261);
6 Color get systemLink => const Color(0xff42c65f);
7 Color get systemSuccess => const Color(0xff1bcd7f);
8 Color get yellow => const Color(0xfffaef36);
9}Code generated by Monday Hero.
TextStyles
Code Assistant understands the text styles and makes them unique. That way, no more missing text styles!
1abstract class AppTextStyles {
2 TextStyle h1({Color? color}) => TextStyle(
3 fontSize: 18.0,
4 fontFamily: "SFProText-Bold",
5 color: color);
6 TextStyle h2({Color? color}) => TextStyle(
7 fontSize: 17.0,
8 fontFamily: "SFProText-Bold",
9 color: color);
10 TextStyle h3({Color? color}) => TextStyle(
11 fontSize: 14.0,
12 fontFamily: "SFProText-Bold",
13 color: color);
14 TextStyle body({Color? color}) => TextStyle(
15 fontSize: 12.0,
16 fontFamily: "SFProText-Bold",
17 color: color);
18 TextStyle info({Color? color}) => TextStyle(
19 fontSize: 18.0,
20 fontFamily: "SFProText-Regular",
21 color: color);
22 }Code generated by Monday Hero.
Localization
Code Assistant fetches text content in the design. No more copy paste or typing strings manually.
1translations/en-US.json​
2{
3 "signup":"Signup",
4 "text":"Text",
5 "text_fields":"Text Fields",
6 "text_widgets":"Text Widgets",
7 "text_with_left_icon":"Text with left icon",
8 "update":"Update",
9 "view_offers":"View Offers",
10 "view_your_card_info":"View Your Card Info",
11 "welcome_back":"Welcome back",
12 "your_code":"Your code"
13}Code generated by Monday Hero.
SHOW CASES
Create Any Custom Component
Select on the design what part you want to get as a component and let Monday Hero deals with the rest. It supports static designs, which include any text, image, shape, button, and text fields.
PostCommentWidget
1import 'package:easy_localization/easy_localization.dart';
2import 'package:flutter/material.dart';
3import 'package:flutter/cupertino.dart';
4import 'package:mondayhero_starter_project/theme/app_text_styles.dart';
5import 'package:mondayhero_starter_project/theme/app_colors.dart';
6
7class PostCommentWidget extends StatelessWidget {
8
9 const PostCommentWidget({
10 Key? key,
11 }) : super(key: key);
12
13
14 Widget build(BuildContext context) {
15 return Container(
16 child: Row(
17 children: [
18 Image.asset(
19 'assets/images/avatar4.png',
20 ),
21 SizedBox(
22 width: 16,
23 ),
24 Container(
25 padding: EdgeInsets.only(
26 left: 12,
27 top: 12,
28 right: 12,
29 bottom: 12,
30 ),
31 decoration: BoxDecoration(
32 color: appColors.daisy2,
33 borderRadius: BorderRadius.all(Radius.circular(8)),
34 ),
35 child: Column(
36 children: [
37 Row(
38 children: [
39 Text(
40 'lucian_obrien'.tr(),
41 style: appTextStyles.textStyle6(color: appColors.peacock),
42 textAlign: TextAlign.left,
43 ),
44 Text(
45 '_jan_2022'.tr(),
46 style: appTextStyles.textStyle2(color: appColors.coin),
47 textAlign: TextAlign.right,
48 ),
49 ],
50 ),
51 SizedBox(
52 height: 4,
53 ),
54 Text(
55 'i_love_cupcake_danish_jujubes_sweet'.tr(),
56 style: appTextStyles.textStyle4(color: appColors.stone),
57 textAlign: TextAlign.left,
58 ),
59 ],
60 ),
61 ),
62 ],
63 ),
64 );
65 }
66}Code generated by Monday Hero.
PostActionWidget
1import 'package:easy_localization/easy_localization.dart';
2import 'package:flutter/cupertino.dart';
3import 'package:flutter/material.dart';
4import 'package:mondayhero_starter_project/theme/app_colors.dart';
5import 'package:mondayhero_starter_project/theme/app_text_styles.dart';
6
7class PostActionWidget extends StatelessWidget {
8 const PostActionWidget({
9 Key? key,
10 }) : super(key: key);
11
12
13 Widget build(BuildContext context) {
14 return Container(
15 child: Container(
16 padding: EdgeInsets.only(
17 left: 24,
18 top: 16,
19 right: 24,
20 bottom: 24,
21 ),
22 decoration: BoxDecoration(
23 color: appColors.whiteSecond,
24 ),
25 child: Row(
26 children: [
27 Row(
28 children: [
29 Image.asset(
30 'assets/images/iconContainer.png',
31 ),
32 Text(
33 'string_name'.tr(),
34 style: appTextStyles.textStyle(color: appColors.peacock),
35 textAlign: TextAlign.left,
36 ),
37 ],
38 ),
39 SizedBox(
40 width: 16,
41 ),
42 Image.asset(
43 'assets/images/avatar.png',
44 ),
45 SizedBox(
46 width: 2,
47 ),
48 Image.asset(
49 'assets/images/avatar2.png',
50 ),
51 SizedBox(
52 width: 2,
53 ),
54 Image.asset(
55 'assets/images/avatar3.png',
56 ),
57 SizedBox(
58 width: 2,
59 ),
60 Container(
61 width: 32,
62 height: 32,
63 alignment: Alignment.center,
64 decoration: BoxDecoration(
65 color: appColors.mint,
66 border: Border.all(
67 color: appColors.whiteSecond,
68 width: 2,
69 ),
70 borderRadius: BorderRadius.all(Radius.circular(16)),
71 ),
72 child: Text(
73 'string_name2'.tr(),
74 style: appTextStyles.textStyle2(color: appColors.green),
75 textAlign: TextAlign.center,
76 ),
77 ),
78 Spacer(),
79 IconButton(
80 iconSize: 36,
81 icon: Image.asset(
82 'assets/images/action.png',
83 ),
84 onPressed: () {},
85 ),
86 ],
87 ),
88 ),
89 );
90 }
91}Code generated by Monday Hero.
FollowerCardWidget
1import 'package:easy_localization/easy_localization.dart';
2import 'package:flutter/material.dart';
3import 'package:flutter/cupertino.dart';
4import 'package:mondayhero_starter_project/theme/app_text_styles.dart';
5import 'package:mondayhero_starter_project/theme/app_colors.dart';
6
7class FollowCardWidget extends StatelessWidget {
8
9 const FollowCardWidget({
10 Key? key,
11 }) : super(key: key);
12
13
14 Widget build(BuildContext context) {
15 return Container(
16 child: Container(
17 padding: EdgeInsets.only(
18 left: 24,
19 top: 24,
20 right: 24,
21 bottom: 24,
22 ),
23 decoration: BoxDecoration(
24 color: appColors.daisy,
25 ),
26 child: Row(
27 children: [
28 Image.asset(
29 'assets/images/containerContainer.png',
30 ),
31 SizedBox(
32 width: 16,
33 ),
34 Column(
35 children: [
36 Text(
37 'kate_simon'.tr(),
38 style: appTextStyles.textStyle6(color: appColors.peacock),
39 textAlign: TextAlign.left,
40 ),
41 SizedBox(
42 height: 4,
43 ),
44 Row(
45 children: [
46 Image.asset(
47 'assets/images/iconsicLocation.png',
48 ),
49 SizedBox(
50 width: 4,
51 ),
52 Text(
53 'austin_tx'.tr(),
54 style: appTextStyles.textStyle4(color: appColors.stone),
55 textAlign: TextAlign.left,
56 ),
57 ],
58 ),
59 ],
60 ),
61 Spacer(),
62 OutlinedButton(
63 style: OutlinedButton.styleFrom(
64 side: BorderSide(
65 color: appColors.coin_32,
66 width: 1,
67 ),
68 shape: RoundedRectangleBorder(
69 borderRadius: BorderRadius.circular(8.0),
70 ),
71 ),
72 child: Text(
73 'follow'.tr(),
74 style: appTextStyles.textStyle7(color: appColors.peacock),
75 textAlign: TextAlign.center,
76 ),
77 onPressed: () {},
78 ),
79 ],
80 ),
81 ),
82 );
83 }
84}Code generated by Monday Hero.
SocialFeedCardWidget
1import 'package:easy_localization/easy_localization.dart';
2import 'package:flutter/cupertino.dart';
3import 'package:flutter/material.dart';
4import 'package:mondayhero_starter_project/theme/app_colors.dart';
5import 'package:mondayhero_starter_project/theme/app_text_styles.dart';
6
7class SocialCardWidget extends StatelessWidget {
8 const SocialCardWidget({
9 Key? key,
10 }) : super(key: key);
11
12
13 Widget build(BuildContext context) {
14 return Container(
15 child: Column(
16 children: [
17 Container(
18 padding: EdgeInsets.only(
19 left: 24,
20 top: 24,
21 right: 16,
22 bottom: 24,
23 ),
24 decoration: BoxDecoration(
25 color: appColors.whiteSecond,
26 ),
27 child: Row(
28 children: [
29 Image.asset(
30 'assets/images/avatarimagecircular24.png',
31 ),
32 SizedBox(
33 width: 16,
34 ),
35 Column(
36 crossAxisAlignment: CrossAxisAlignment.start,
37 children: [
38 Text(
39 'nick_austin'.tr(),
40 style: appTextStyles.textStyle3(color: appColors.peacock),
41 textAlign: TextAlign.left,
42 ),
43 SizedBox(
44 height: 2,
45 ),
46 Text(
47 '_aug_2022_1000_pm'.tr(),
48 style: appTextStyles.textStyle4(color: appColors.coin),
49 textAlign: TextAlign.left,
50 ),
51 ],
52 ),
53 SizedBox(
54 width: 16,
55 ),
56 Spacer(),
57 IconButton(
58 iconSize: 36,
59 icon: Image.asset(
60 'assets/images/iconbutton.png',
61 ),
62 onPressed: () {},
63 ),
64 ],
65 ),
66 ),
67 Container(
68 padding: EdgeInsets.only(
69 left: 24,
70 right: 24,
71 bottom: 16,
72 ),
73 decoration: BoxDecoration(
74 color: appColors.whiteSecond,
75 ),
76 child: Text(
77 'i_love_lowcode_tools_when_speeds_my_development_pr'.tr(),
78 style: appTextStyles.textStyle5(color: appColors.peacock),
79 textAlign: TextAlign.left,
80 ),
81 ),
82 Image.asset(
83 'assets/images/img.png',
84 ),
85 ],
86 ),
87 );
88 }
89}Code generated by Monday Hero.
Ready to Accelerate Your Development Process?
Experience the power of turning your designs into reusable code effortlessly.