rise_bite_ui #

A reusable Flutter UI package for modern food, breakfast, and product-listing experiences. It includes polished item cards, shared-element-ready detail screens, built-in multi-image support, and a bright Material 3 theme that developers can adopt or customize.

Features #

• Reusable FoodItem model with primaryImage and safe image resolution
• Animated FoodCard with optional Hero support
• Reusable FoodDetailScreen with configurable CTA, metadata, and actions
• Multi-image gallery support on cards and detail screens
• Package-friendly API with external navigation control
• Included example app using only the public package API

Screenshots #

Installation #

Add the package to your pubspec.yaml:

dependencies:
  rise_bite_ui: ^0.1.0

Then run:

flutter pub get

Basic Usage #

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

final item = FoodItem(
  id: '1',
  name: 'Avocado Toast',
  description: 'Fresh avocado with poached eggs on sourdough.',
  price: 8.99,
  rating: '4.9',
  duration: '15-20 min',
  images: [
    'https://example.com/food-1.png',
    'https://example.com/food-2.png',
  ],
);

FoodCard Usage #

FoodCard(
  item: item,
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => FoodDetailScreen(item: item),
      ),
    );
  },
)

FoodDetailScreen Usage #

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (_) => FoodDetailScreen(item: item),
  ),
);

Custom CTA Example #

FoodDetailScreen(
  item: item,
  ctaBuilder: (context, currentItem) {
    return FilledButton(
      onPressed: () {},
      child: Text('Order ${currentItem.name}'),
    );
  },
)

Theme and Config Example #

MaterialApp(
  theme: AppTheme.lightTheme,
  home: FoodCard(
    item: item,
    config: const FoodCardConfig(
      enableHero: true,
      heroTag: 'custom-food-hero',
    ),
    onTap: () {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (_) => FoodDetailScreen(
            item: item,
            config: const FoodDetailScreenConfig(
              enableHero: true,
              heroTag: 'custom-food-hero',
            ),
          ),
        ),
      );
    },
  ),
)

Example App #

The included example app imports only:

import 'package:rise_bite_ui/rise_bite_ui.dart';

Run it with:

cd example
flutter run