A month of Flutter: no content widget

With any sort of content site, there is always a chance of having nothing to display. So let's create a NoContent widget to use in that scenario.

For this view I'm using an illustration from the amazing unDraw site. I've choosen the SVG version as it's small, scales to any device size, and is easy to change the color of if themes are implemented.

Since it's an SVG, it'll require the flutter_svg package to render. Packages are easy enough to add as dependencies to your app. The SVG file will also need to be added to an assets directory and included in pubspec.yaml.

Then a new file, no_content.dart, will be created with the following StatelessWidget definition:

class NoContent extends StatelessWidget {
  const NoContent();

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SvgPicture.asset(
            'assets/undraw_a_day_at_the_park_owg1.svg',
            height: 300.0,
          ),
          const Text('No Birbs a birbing'),
        ],
      ),
    );
  }
}

The main goal here is to render the SVG with some text underneath it. Since nothing in NoContent is going to change, let's give it a const constructor. We'll also make it so the Column contents are center aligned vertically and that the Container takes up the entire view width.

With NoContent implemented, we'll just swap it into the Scaffold body for rendering and update the tests accordingly.

Here is the result. The size and spacing of everything will have to be adjusted as the app design evolves but this is a good base implementation.

Screenshot of a view with no content

Code changes

Posts in this series

  • A month of Flutter
  • A month of Flutter: create the app
  • A month of Flutter: configuring continuous integration
  • A month of Flutter: continuous linting
  • A month of Flutter: upgrading to 1.0
  • A month of Flutter: initial theme
  • A month of Flutter: no content widget
  • A month of Flutter: a list of posts
  • A month of Flutter: extract post item widget
  • A month of Flutter: post model and mock data
  • A month of Flutter: rendering a ListView with StreamBuilder
  • A month of Flutter: Stream transforms and failing tests
  • A month of Flutter: real faker data
  • A month of Flutter: rendering network images
  • A month of Flutter: FABulous authentication
  • A month of Flutter: configure Firebase Auth for Sign in with Google on Android
  • A month of Flutter: configure Firebase Auth for Sign in with Google on iOS
  • A month of Flutter: Sign in with Google
  • A month of Flutter: mocking Firebase Auth in tests
  • A month of Flutter: delicious welcome snackbar
  • A month of Flutter: navigate to user registration
  • A month of Flutter: user registration form
  • A month of Flutter: testing forms
  • A month of Flutter: setting up Firebase Firestore
  • A month of Flutter: awesome adaptive icons
  • A month of Flutter: set up Firestore rules tests
  • A month of Flutter: Firestore create user rules and tests
  • A month of Flutter: WIP save users to Firestore
  • A month of Flutter: user registration refactor with reactive scoped model
  • A month of Flutter: the real hero animation
  • A month of Flutter: a look back

  • Category: Development
    Tags: Flutter, Tutorial