How to Present an Empty View In Flutter?

Sometimes the user needs to present an empty view in a flutter as a widget. build cannot return null to indicate that there is nothing to render. So in this article, we will go through how to present an empty view in Flutter.

How to Present an Empty View In Flutter?

Consider a code snippet like the below:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(

    );
  }
}

You can also simply return an empty Container Widget and avoid using the Scaffold Widget entirely. But this would result in a black screen if this is the only primary widget in your app, you can set the color property of the container if you want to prevent the black background. consider a code snippet like the below:

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white // This is optional
    );
  }
}

Correct Way:

The official Material codebase uses this:

Widget build(BuildContext context) {
  return SizedBox.shrink();
}

SizedBox.shrink() is a widget that is unlike Container or Material has no background or any decorations whatsoever. It sizes itself to the smallest area possible, if not influenced by parent constraints.

There are many possible solutions to it.

There are many possible solutions to it.
```
Widget build(context) => Container();
```
Another way is to code like the below:
```
Widget build(context) => SizedBox();
```
A third way is to code like the below:
```
Widget build(context) => Scaffold();
```

Recommended Way:

To show nothing is to use SizedBox Widget. Code Snippet will look like the below:

SizedBox(
  width: 200.0,
  height: 300.0,
  child: const Card(child: Text('Hello World!')),
)

An example of these would be like below:

Best Way:

class MyWidget extends StatelessWidget {
    final String name = 'Default';
    final bool hasThing = true;

    MyWidget({this.name});

    MyWidget.withoutThing({this.name}) : hasThing = false;

    @override
    Widget build(BuildContext context) {
        //define widgets they have in common here (as many as possible)
        if (hasThing) {
            return Widget(child: Thing(this.name));
        } else {
            return Widget(child: WithoutThing(this.name));
        }
    }
}

The code snippet will look like the below:

Center(child: MyWidget.withoutThing(name: 'Foo'),)//don't show thing

Center(child: MyWidget(name: 'Foo'),)

based on your needs.

For more on initializer lists: Colon after Constructor in dart

Conclusion:

Thanks for being with us on a Flutter Journey !!!

Keep Learning !!! Keep Fluttering !!!

In this article, We have been through how to present an empty view in flutter.

Drop us your valuable suggestion/feedback.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.