How to improve the design details of Flutter App

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.

 

2. Typography 

Changing to a nice font can also make the app look very advanced. GoogleFont cooperates with hot reload to choose good fonts

 

3. Color

Add a special color to the app.

You can find some color palettes from the Internet, such as:

https://coolors.co/palettes/trending

https://undesign.learn.uno/colors/

 

4. Iconography 

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(/*...*/),
)

5. Animation

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


                

Recent posts