Flutter Makes It Easy And Fast To Build Beautiful Apps For Mobile

Introduction

Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

In this code lab, you enhance a Flutter music application, taking it from boring to beautiful. To accomplish this, this code lab uses tools and APIs introduced in Material 3.

What you'll learn

• How to write a Flutter app that is usable and beautiful across platforms.
• How to design text in your app to make sure that it's adding to the user experience.
• How to pick the right colors, customize widgets, build your own theme, and quickly and easily implement dark mode.
• How to build cross-platform adaptive apps.
• How to build apps that look good on any screen.
• How to add movement to your Flutter app to make it really pop.

1. How to write a flutter app that is usable and beautiful across platforms.

Here are some tips for making your Flutter app more beautiful and usable

• Use material design guidelines
• Custom widgets for unique designs
• Use effective fonts and styles appropriate to your app’s actual theme set
• Use an effective color palette
• Add some theming/styling
• Add some animations and motions
• Keep your code structured and modular
• For re-usability create common widgets to re-use where you need to apply the same design like text fields, item cards, buttons, text style, common logic methods, etc.
• Add platform-specific adaptations

1. Use Platform.isAndroid and Platform.isIOS to implement platform-specific UI elements or behaviors when necessary.

• Use Consistent Navigation

1. Follow platform-specific navigation patterns such as Material's Drawer navigation for Android and Cupertino's tab-based navigation for iOS.
2. Use Flutter's Navigator widget to manage navigation between different screens.

• Manage Performance Optimization

1. Optimise your app's performance by reducing unnecessary widget rebuilds.
2. Utilise Flutter's DevTools to identify performance bottlenecks and optimize your app's rendering.

• Add Internationalisation and Accessibility

1. Add Support for multiple languages and locales using Flutter's internationalization support.
2. Ensure your app is accessible to users with disabilities by following accessibility guidelines and using Flutter's accessibility features.

2. How to design text in your app to make sure that it's adding to the user experience.

• Use material design guidelines
• Adjust text readability and clarity

1. Ensure that the text is clear, legible, and easy to read. Choose appropriate font sizes, styles, and colors.
2. Avoid using overly decorative fonts or low-contrast colour combinations that may impair readability, especially for users with visual impairments.

• Font styling and typography consistency

1. Define a consistent set of font styles, sizes, and colors for headings, body text, buttons, and other text elements.
2. Consistent typography helps users navigate your app more easily and builds brand recognition.

• Adjust proper Whitespace and Line Spacing
• Add appropriate text alignment which will make a visually harmonious design.
• Use language that resonates with your target audience and reflects your app's brand identity
• Express information and actions concisely.
• Write instructions that focus on a small number of key concepts.
• Communicate essential details

1. Communicate only essential details so users can focus on their tasks. Sometimes the most effective UI contains no text at all.

   Do, Example

   Signing in…

   Your phone is contacting us. This can take up to 5 minutes.

   Don’t, Example

   Signing in…

   Your phone needs to communicate with our servers to sign in to your account. This may take up to 5 minutes.

3. How to pick the right colours, customise widgets, build your theme, and quickly and easily implement dark mode.

Picking the right colours, customising widgets, building your theme, and implementing dark mode in your Flutter app can greatly enhance its visual appeal and user experience. Here's a step-by-step guide to help you achieve this

1. Choosing Colours:

• Consider your app's branding and target audience when selecting colours. Choose colours that reflect your brand identity and evoke the desired emotional response.
• Use tools like Adobe Color, Coolors, or Material Design Color Tool to explore colour palettes and find complementary colours.
• Ensure that selected colours have sufficient contrast for readability, especially for text and interactive elements.

2. Customising Widgets:

• Flutter provides a wide range of customizable widgets that you can tailor to match your app's design language and theme.
• Customise widgets' properties such as colour, size, padding, margin, and shape to achieve the desired visual effect.
• Experiment with different widget compositions and layouts to create unique and engaging UI designs.

3. Building Your Theme:

• Define a custom theme for your app to maintain consistency in typography, colours, and other design elements.
• Use the ThemeData class to create a theme object and customise its properties such as primary colour, accent colour, text theme, and button theme.
• Organise your theme-related code in a separate file to keep it modular and easy to maintain.
• Apply the theme to your app using the MaterialApp widget's theme property.

4. Implementing Dark Mode:

• Dark mode provides users with an alternative color scheme that is easier on the eyes in low-light environments and can help conserve battery life on OLED displays.
• Define a separate dark theme by extending your primary theme and customising its colours and other properties for dark mode.
• Use MediaQuery to detect the system's dark mode preference and switch between light and dark themes accordingly.
• Provide users with the option to manually toggle between light and dark modes in your app's settings or preferences.

4. How to build cross-platform adaptive apps.

Flutter provides new opportunities to build apps that can run on mobile, desktop, and the web from a single codebase. However, with these opportunities, come new challenges. You want your app to feel familiar to users, adapting to each platform by maximising usability and ensuring a comfortable and seamless experience. That is, you need to build apps that are not just multiplatform but are fully platform-adaptive.

There are many considerations for developing platform-adaptive apps, but they fall into three major categories:

Layout

Input

Idioms and norms

Building adaptive layouts

One of the first things you must consider when writing your app for multiple platforms is how to adapt it to the various sizes and shapes of the screens that it will run on.

Layout widgets

If you’ve been building apps or websites, you’re probably familiar with creating responsive interfaces. Luckily for Flutter developers, there is a large set of widgets to make this easier.

Some of Flutter’s most useful layout widgets include:

Single child

Align—Aligns a child within itself. It takes a double value between -1 and 1, for both the vertical and horizontal alignment.

AspectRatio—Attempts to size the child to a specific aspect ratio.

ConstrainedBox—Imposes size constraints on its child, offering control over the minimum or maximum size.

CustomSingleChildLayout—Uses a delegate function to position a single child. The delegate can determine the layout constraints and positioning for the child.

Expanded and Flexible—Allows a child of a Row or Column to shrink or grow to fill any available space.

FractionallySizedBox—Sizes its child to a fraction of the available space.

LayoutBuilder—Builds a widget that can reflow itself based on its parents size.

SingleChildScrollView—Adds scrolling to a single child. Often used with a Row or Column

Multichild

Column, Row, and Flex—Lays out children in a single horizontal or vertical run. Both Column and Row extend the Flex widget.

CustomMultiChildLayout—Uses a delegate function to position multiple children during the layout phase.

Flow—Similar to CustomMultiChildLayout, but more efficient because it’s performed during the paint phase rather than the layout phase.

ListView, GridView, and CustomScrollView—Provides scrollable lists of children.

Stack—Layers and positions multiple children relative to the edges of the Stack. Functions similarly to position-fixed in CSS.

Table—Uses a classic table layout algorithm for its children, combining multiple rows and columns.

Wrap—Displays its children in multiple horizontal or vertical runs.

Use LayoutBuilder for extra flexibility

Even though checking total screen size is great for full-screen pages or making global layout decisions, it’s often not ideal for nested subviews. Often, subviews have their own internal breakpoints and care only about the space that they have available to render.

The simplest way to handle this in Flutter is using the LayoutBuilder class. LayoutBuilder allows a widget to respond to incoming local size constraints, which can make the widget more versatile than if it depended on a global value.

The previous example could be rewritten using LayoutBuilder:

    Widget foo = LayoutBuilder(builder: (context, contraints) {
    bool useVerticalLayout = constraints.maxWidth < 400;
    return Flex(
        direction: useVerticalLayout ? Axis.vertical : Axis.horizontal,
        children: const [
        text('Hello'),
        text('Hello'),
        ],
    );
    });
        

5. How to build apps that look good on any screen.

Adaptive design is a design approach that involves creating separate interfaces for different screen sizes and device types. In other words, an adaptive design would create different layouts for a smartphone and a tablet. With adaptive design, the app will detect the device’s screen size and then load the appropriate layout. This approach can create a tailored experience for users on different devices, but it can also be time-consuming to design and maintain.

Responsive design, on the other hand, is a design approach that involves creating a single layout that can adjust to different screen sizes and device types. In other words, the app will adjust the layout to fit the available screen space. This approach can create a more consistent experience across different devices, and it can be more efficient to design and maintain. However, it may not offer the same level of customization as adaptive design.

In Flutter, it is possible to use either adaptive or responsive design. The choice between the two approaches depends on the specific requirements of your app and the preferences of your users. For example, if your app is targeted towards a specific device type or screen size, adaptive design may be the better choice. On the other hand, if you want your app to be accessible to a wide range of devices and screen sizes, responsive design may be the way to go. Ultimately, the choice between adaptive design and responsive design will depend on your specific needs and the preferences of your target audience.

Media Query

    class HomePage extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
            Size screenSize = MediaQuery.of(context).size;
            Orientation orientation = MediaQuery.of(context).orientation;
        
            return Scaffold(
            body: Container(
            color: CustomColors.android,
            child: Center(
            child: Text(
                'View\n\n' +
                '[MediaQuery width]: ${screenSize.width.toStringAsFixed(3)}\n\n' +
                '[MediaQuery orientation]: $orientation',
                style: TextStyle(color: Color.white, fontSize: 20),
            ),
            ),
            ),
            );
        }
    }
         

Layout Builder

Layout Builder is just a simplified version of Media Query. The main difference between Media Query and Layout Builder is that Media Query is based on the full context of the screen rather than just the size of a particular widget; on the other hand, Layout Builder determines the maximum width and height of a specific widget only.

Layout Builder class provides the Box Constraints object that can be used for determining the maxWidth and maxHeight of the widget.

    LayoutBuilder(
        builder: (context, constraints) {
            if (constraints.maxWidth > 500) {
                getWidelayout();
            }
            else{
                getNormalLayout();
            }
        }
    );        
    

Orientation Builder

The Orientation Builder widget is similar to the Layout Builder class. One can get the Orientation object using the builder property of the OrientationBuilder class. For example, you can use the OrientationBuilder class to change the number of columns of GridView.

    body: OrientationBuilder(
        builder: (context, orientation) {
            if(orientation == Orientation.portrait){
                return portraitMode();
            }
            else{
                return landscapeMode();
            }
        },
    )    
            

6. How to add movement to your flutter app to make it really pop.

The pop method use the same Route used in push method, so you can put the required animation in the push method, just make sure you add reverseTransitionDuration to the route to make its animation more noticeable.

    Navigator.of(context).push(
        PageRouteBuilder(
            TransitionDuration: Duration(seconds: 1),
            reverseTransitionDuration: Duration(seconds: 1),
            PageBuilder: (context, animation, secondaryAnimation) => page2(),
            transitionBuilder: (context, animation, secondaryAnimation, child){
                final tween - Tween (begin: 0.0, end: 1.0);
                final fadeAnimation = animation.drive(tween);
                return FadeTransition(
                    opacity: fadeAnimation,
                    child: child,
                );
            },
        ),
    );

    //pop from page2
    Navigator.of(context).pop();
                    

Conclusion

Flutter is an awesome framework for building mobile apps. It offers fast development times, beautiful and responsive designs, and a single codebase for both iOS and Android. Its hot-reload feature allows developers to see changes in real-time, reducing overall development time.

Additionally, Flutter’s widget library allows for the creation of custom and complex designs with ease. In terms of performance, Flutters races far ahead of alternatives like React-Native.

FAQ