zeba_academy_metro_ui 0.0.1

A Flutter package providing Metro (Modern UI) inspired widgets including live tiles, dashboard layouts, metro navigation, flat design components, and smooth tile animations.

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,
  ),
)

---

Metro Navigation

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.