WhiteCodel Reels
Introduction
This package allows you to implement Instagram-like reels widgets in your Flutter application with minimal code. With whitecodel_reels
, you can quickly add a reels widget featuring video content with interactive elements.
Features
- Caching: The reels widget caches the video content to improve performance and reduce data usage.
- Customizable: You can customize the reels widget with your own design and layout.
- Interactive: You can add interactive elements to the reels widget.
- Easy to use: You can easily integrate the reels widget in your Flutter application with minimal code.
Installation
To use this package, add whitecodel_reels
as a dependency in your pubspec.yaml
file.
dependencies:
whitecodel_reels: ^0.0.9+4
Android Configuration
For caching to work properly on Android, you need to add the following permissions to your AndroidManifest.xml
file:
<uses-permission android:name="android.permission.INTERNET"/>
Also, ensure your application has the following configuration set:
<application
android:networkSecurityConfig="@xml/network_security_config"
...
>
And create a network security configuration file at android/app/src/main/res/xml/network_security_config.xml
:
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<base-config cleartextTrafficPermitted="true">
<trust-anchors>
<certificates src="system" />
</trust-anchors>
</base-config>
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">localhost</domain>
<domain includeSubdomains="true">127.0.0.1</domain>
</domain-config>
</network-security-config>
Usage Example
import 'package:flutter/material.dart';
import 'package:whitecodel_reels/models/video_model.dart';
import 'package:whitecodel_reels/whitecodel_reels.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'WhiteCodel Reels',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: WhiteCodelReels(
key: UniqueKey(),
context: context,
loader: const Center(
child: CircularProgressIndicator(),
),
videoList: List.generate(
10,
(index) => VideoModel(
url:
'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4'),
),
isCaching: true,
builder: (context, index, child, videoPlayerController,
pageController) {
// Widget builder logic
return child;
}),
));
}
}
Future Plans
- Customizable: Add more customization options to the reels widget.
- Speed Optimization: Improve the performance of the reels widget by optimizing the video loading speed.