Flutter video gridly

This Flutter project shows a grid of video cards. Each card has a title, image, and video playback using HLS streams. The app uses a mock API (with Mockoon) for development and can connect to a real API.

Table of Contents

• Features
• Project Structure
• Setup instructions to run locally
• Usage
• Run on iOS Simulator
• Run on Android Emulator
• General Flutter Commands
• Troubleshooting
• More resources

Features

• Video grid with title, image, and video playback
• Uses video_player and chewie for modern video controls
• Centralized theme and color management
• Environment variable support with flutter_dotenv
• API mocking using Mockoon

Project Structure

• lib/pages/: Main screens (HomePage, DetailPage)
• lib/widgets/: Reusable UI components (CardWidget, PlayerWidget)
• lib/models/: Data models (Item)
• lib/services/: API service logic (ApiService)

Setup instructions to run locally

1. Install dependencies

Run:

flutter pub get

2. Install Mockoon (for API mocking)

Mockoon is used to provide mock video data during development.

• Install Mockoon CLI globally:

  npm install -g @mockoon/cli

• Or download the desktop app from mockoon.com

3. Import mock data

• Open Mockoon and import the mocks/assets.json file. You can also create your own dataset with these fields: id, title, imageUrl, videoUrl.
• Start the mock server on a port (for example, 3000):

  mockoon-cli start --data mocks/assets.json --port 3000

4. Configure API base URL

• Create a .env file in the project root and set your API base URL:

  API_BASE_URL=http://<YOUR_COMPUTER_IP>:3000

• For emulators or devices, use your computer's IP address (for example, http://YOUR_COMPUTER_IP:3000).
• The app loads this value using flutter_dotenv.

5. Run the app

Run:

flutter run

Usage

• The home page shows a grid of video cards.
• Tap a card to open the detail page and play the video.
• All colors and styles are managed with the theme in main.dart.

Run on iOS Simulator

1. Open Xcode:
   • From Finder: Go to Applications > Xcode and double-click to open.
   • Or from the terminal:

     open -a Xcode

2. Add signing in Xcode:
   • In Xcode, open the ios folder of your Flutter project.
   • Select the project in the left sidebar, then select the "Runner" target.
   • Go to the "Signing & Capabilities" tab.
   • Set your Team and make sure a valid signing certificate is selected.
   • If needed, fix any signing issues shown by Xcode.
3. Open the iOS Simulator (via Xcode > Open Developer Tool > Simulator), or run:

   open -a Simulator

4. (Optional) Choose your device (for example, iPhone 14) in the Simulator's Hardware > Device menu.
5. Before running the project, make sure to sign the package and fetch dependencies:

   flutter pub get

6. Run your app:

   flutter run -d "iPhone 14"

Run on Android Emulator

1. List available Android emulators:

   emulator -list-avds

2. Start an emulator (replace <avd_name> with your emulator name):

   emulator -avd <avd_name>

3. Run your app:

   flutter run

   • You can get <device_id> from flutter devices (for example, emulator-5554).
   • If only one emulator is running, you can simply use:

   flutter run -d <device_id>

General Flutter Commands

• Clean the build cache:

  flutter clean

• Get dependencies:

  flutter pub get

• List all devices:

  flutter devices

Troubleshooting

• If you get connection errors, check that Mockoon is running and the API URL is correct.
• If you see missing imports or classes, run flutter pub get and restart your IDE.
• For iOS, fix signing issues in Xcode.
• For Android, make sure your emulator is running and visible in flutter devices.
• If the app does not launch on a simulator or emulator:
  • Make sure the device is running and unlocked.
  • Run flutter clean and try again.
  • For iOS, make sure Xcode and its command line tools are up to date.
  • For Android, make sure your emulator is running and visible in flutter devices.

More resources

• Flutter documentation
• Mockoon documentation
• video_player package
• chewie package