Build a Stunning Google News Dashboard in Flutter

If you’ve ever wanted to create a news dashboard app, Flutter makes it super simple! This article walks you through building a clean and modern news app using Flutter and Google Fonts. Here's what our dashboard does:

Top Stories: Displays trending news with images and details.
Local News: Lists recent local updates.
Interactive Design: Uses Material 3 for a fresh and modern look.

Let’s dive into the details of how it works!

The Setup

First, ensure you have Flutter installed. Then, add these dependencies in your pubspec.yaml file:

yaml
dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^6.0.0

This setup gives us access to Google Fonts for a polished look.

Features of the Dashboard

Material 3 Styling
The app uses Material 3 design principles. This ensures a clean, modern UI that feels natural.
Google Fonts
By adding GoogleFonts.robotoTextTheme(), the app gets a professional touch with smooth typography.
Cards and Lists
- Top Stories: Uses large, image-rich cards.
- Local News: Lists headlines with dividers for clarity.

Code Walkthrough

Here’s how the app is structured:

1. Main App Structure

The app starts with a MaterialApp using a seed color for theming:


MaterialApp(
  title: 'News Dashboard',
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
    useMaterial3: true,
    textTheme: GoogleFonts.robotoTextTheme(),
  ),
  home: NewsDashboard(),
);

This creates a smooth and consistent look across the app.

2. News Dashboard Layout

The dashboard uses a Row to split the screen into two sections:

Left Column: Shows Top Stories.
Right Column: Shows Local News.

Each section is wrapped in an Expanded widget for a responsive design.

3. Top Stories (NewsCard)

The NewsCard widget creates beautiful cards with images, titles, and descriptions:


Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(16),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.1),
        blurRadius: 8,
        offset: Offset(0, 4),
      ),
    ],
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      ClipRRect(
        borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
        child: Image.network(
          imageUrl,
          height: 150,
          width: double.infinity,
          fit: BoxFit.cover,
        ),
      ),
      Padding(
        padding: const EdgeInsets.all(12.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(title, style: Theme.of(context).textTheme.titleMedium?.copyWith(fontWeight: FontWeight.bold)),
            Text(description),
            Text(time, style: TextStyle(color: Colors.grey)),
          ],
        ),
      ),
    ],
  ),
);

4. Local News (NewsListItem)

The NewsListItem widget is a simple, clean design for listing headlines:


Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text(title, style: Theme.of(context).textTheme.bodyLarge),
    Text(time, style: TextStyle(color: Colors.grey)),
  ],
);

Why Build This App?

This app is perfect for anyone looking to:

Learn Flutter basics with practical UI examples.
Build a modern app with Material Design 3 principles.
Experiment with layouts, fonts, and responsive designs.

Try It Yourself

Copy the code and run it in your favourite Flutter editor. Tweak the UI and make it your own! With Flutter, the possibilities are endless.

Flutter Dash