Discount !! E-commerce App With Backend Source Code Video and Voice Chatting App Firebase Chatting App Source Code Complete Gym App BLoC State Management Source Code Complete Study App Buy Ticket Booking App Source Code Payment App Buy Travel App With Backend Source Code Complete Chat App Udemy Course Special Offer Online Learning Course App (BLoC)
1. White space
Use padding to add gaps and white space, reflecting a sense of high-level ~ Combined with Flutter's hot reload, you can quickly experiment to find the right padding.
Changing to a nice font can also make the app look very advanced. GoogleFont cooperates with hot reload to choose good fonts
Add a special color to the app.
You can find some color palettes from the Internet, such as:
It means to encourage adding more pictures/icons to the app. Filip's example uses BoxDecoration (you can configure gradient and image): https://github.com/filiph/little_things/blob/main/lib/src/list.dart#L18-L32
Container( decoration: BoxDecoration( gradient: LinearGradient( colors: [ Color(0xFF96E3FF), Color(0xFF9EECFF), Color(0xFF9FEBFF), Color(0xFF9FEEFF), Color(0xFF9FECFF), ], ), image: DecorationImage( image: AssetImage('assets/meditation.jpg'), alignment: Alignment.bottomCenter, ), ), child: Scaffold(/*...*/), )
Animation can also greatly improve the user's evaluation of the app. The default animation curve is linear, which generally makes people feel unnatural. You can try easeIn/easeOut.
In addition, multiple animations (slideTransition / resize / text, etc.) can be provided at the same time. At this time, if all animations run together, it will be very messy.
We should use "Staggered Animation", which is one animation followed by another animation. Using curve: Interval(0.2, 0.6), you can make this animation run for 20%~60% of the time of the entire animation(parent):
ScaleTransition( scale: CurvedAnimation( curve: Interval( 0.2, 0.6, curve: Curves.elasticOut, ), parent: _controller, ), child: /*...*/, )
See the end result