zeba_academy_metro_ui

A modern Flutter package inspired by Microsoft's Metro Design language. Build beautiful dashboards, live tile interfaces, metro navigation systems, and flat-design applications with ease.

Features

✨ Metro-inspired UI components

🟦 Live Tiles

🎯 Flat Design Widgets

🧭 Metro Navigation

⚡ Smooth Tile Animations

📊 Dashboard Layouts

📱 Responsive Design Support

🎨 Custom Metro Color Themes

🚀 Lightweight and Easy to Use

Installation

Add the package to your pubspec.yaml:

dependencies:
  zeba_academy_metro_ui: ^0.0.1

Then run:

flutter pub get

Import the package:

import 'package:zeba_academy_metro_ui/zeba_academy_metro_ui.dart';

Quick Start

Metro Dashboard

import 'package:flutter/material.dart';
import 'package:zeba_academy_metro_ui/zeba_academy_metro_ui.dart';

class MyDashboard extends StatelessWidget {
  const MyDashboard({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MetroDashboard(
        children: [
          MetroTile(
            title: 'Courses',
            icon: Icons.school,
            color: Colors.blue,
          ),
          MetroTile(
            title: 'Students',
            icon: Icons.people,
            color: Colors.green,
          ),
          MetroTile(
            title: 'Reports',
            icon: Icons.analytics,
            color: Colors.orange,
          ),
          MetroTile(
            title: 'Settings',
            icon: Icons.settings,
            color: Colors.red,
          ),
        ],
      ),
    );
  }
}

Metro Tile

MetroTile(
  title: 'Courses',
  icon: Icons.school,
  color: Colors.blue,
  onTap: () {
    debugPrint('Tile clicked');
  },
)

Live Tile

MetroLiveTile(
  pages: [
    Center(child: Text('Latest Courses')),
    Center(child: Text('New Students')),
    Center(child: Text('Platform Updates')),
  ],
)

Animated Tile

MetroAnimatedTile(
  child: MetroTile(
    title: 'Analytics',
    icon: Icons.analytics,
    color: Colors.blue,
  ),
)

MetroNavigation(
  selectedIndex: 0,
  onSelected: (index) {},
  items: [
    MetroNavItem(
      label: 'Home',
      icon: Icons.home,
    ),
    MetroNavItem(
      label: 'Courses',
      icon: Icons.school,
    ),
    MetroNavItem(
      label: 'Settings',
      icon: Icons.settings,
    ),
  ],
)

Included Widgets

Widget	Description
MetroDashboard	Metro-style dashboard grid
MetroTile	Basic Metro tile
MetroLiveTile	Auto-updating live tile
MetroAnimatedTile	Animated tile wrapper
MetroNavigation	Metro navigation rail
MetroNavItem	Navigation item model
MetroColors	Metro color palette

Roadmap

Version 1.0.0

Metro App Bar
Metro Search Box
Metro Profile Tile
Metro Sections
Responsive Dashboard Layouts
Tile Size Variants
Dark Theme Support
Additional Metro Animations
Metro Widgets Collection

Example

See the /example folder for a complete sample application.

Run:

cd example
flutter run

License

This project is licensed under the GNU General Public License v3.0 (GPL-3.0).

You may:

Use
Modify
Distribute
Fork

Under the terms of the GPL-3.0 License.

For full license text see the LICENSE file or visit:

https://www.gnu.org/licenses/gpl-3.0.en.html

About Me

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at sufyanism.com or connect with me on LinkedIn.

Your all-in-one learning hub!

🚀 Explore courses and resources in coding, tech, and development at zeba.academy and code.zeba.academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience. Level up your tech game today! 💻✨

Zeba Academy is a learning platform dedicated to coding, technology, and development.

➡ Visit our main site: https://zeba.academy

➡ Explore hands-on courses and resources: https://code.zeba.academy

➡ YouTube: https://www.youtube.com/@zeba.academy

➡ Instagram: https://www.instagram.com/zeba.academy/

Thank you for visiting!

Made with ❤️ by Zeba Academy.