xiaoyaocz/dart_simple_live: 2025 Quick Start Guide

Your First Broadcast: A Step-by-Step Guide

Let's get our hands dirty and build a simple live streaming app.

Step 1: Project Setup & Installation

First, create a new Flutter project if you haven't already:

flutter create my_live_app
cd my_live_app

Next, add dart_simple_live to your dependencies in pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  dart_simple_live: ^latest # Check pub.dev for the latest version

Then, run flutter pub get in your terminal to install the package.

Step 2: Essential Platform Configuration

Live streaming requires permission to access the camera and microphone. This requires platform-specific configuration.

For iOS:

Open ios/Runner/Info.plist and add the following keys:

<key>NSCameraUsageDescription</key>
<string>We need access to your camera to start a live stream.</string>
<key>NSMicrophoneUsageDescription</key>
<string>We need access to your microphone to include audio in your live stream.</string>

For Android:

Open android/app/src/main/AndroidManifest.xml and add these permissions inside the <manifest> tag:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />

You also need to set a minimum SDK version. In android/app/build.gradle, ensure your minSdkVersion is at least 21.

defaultConfig {
    ...
    minSdkVersion 21
    ...
}

Step 3: Building the Broadcast UI

Let's create a stateful widget for our live screen. The basic structure will be a Stack to overlay our controls on top of the camera preview.

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

class LiveScreen extends StatefulWidget {
  const LiveScreen({super.key});

  @override
  State<LiveScreen> createState() => _LiveScreenState();
}

class _LiveScreenState extends State<LiveScreen> {
  late final LiveController _controller;
  bool _isStreaming = false;
  final String _rtmpUrl = "rtmp://your-server.com/live/your-key"; // IMPORTANT: Replace this

  // We will initialize the controller in initState()

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Simple Live Stream")),
      body: Stack(
        children: [
          // Camera Preview will go here
          // Controls will go here
        ],
      ),
    );
  }
}

Step 4: Waking the Camera: Initializing the Controller

The LiveController is the heart of the package. We initialize it in initState to prepare the camera and audio sessions. It returns a Widget for the camera preview.

// Inside _LiveScreenState

@override
void initState() {
  super.initState();
  _controller = LiveController();
  // Initialize the controller and camera
  _controller.initialize(video: true, audio: true).then((_) {
    setState(() {}); // Rebuild to show the camera preview
  });
}

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  if (!_controller.isInitialized) {
    return const Center(child: CircularProgressIndicator());
  }

  return Scaffold(
    body: Stack(
      fit: StackFit.expand,
      children: [
        // The camera preview widget provided by the controller
        _controller.buildPreview(context),
        // Our control buttons
        Positioned(
          bottom: 24,
          left: 0,
          right: 0,
          child: FloatingActionButton(
            onPressed: _toggleStreaming,
            child: Icon(_isStreaming ? Icons.stop : Icons.play_arrow),
          ),
        ),
      ],
    ),
  );
}

// We will define _toggleStreaming next...

Step 5: 3, 2, 1... You're Live!

Now for the magic. We'll implement the _toggleStreaming method to start and stop the broadcast. This is where you'll need your RTMP server URL.

// Inside _LiveScreenState

Future<void> _toggleStreaming() async {
  if (!_controller.isInitialized) return;

  if (_isStreaming) {
    // Stop the stream
    await _controller.stop();
    setState(() {
      _isStreaming = false;
    });
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text("Stream stopped!")),
    );
  } else {
    // Start the stream
    try {
      await _controller.start(url: _rtmpUrl);
      setState(() {
        _isStreaming = true;
      });
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text("Streaming started!")),
      );
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text("Failed to start stream: $e")),
      );
    }
  }
}

And that's it! With this code, you have a fully functional live streaming screen. When you run the app on a physical device, you'll see your camera feed, and tapping the button will start broadcasting to your specified RTMP server.

Pro-Level Tips for a Better Stream

The basics are covered, but here are a few extra tips to enhance your app:

• Handle Connection States: The controller exposes a stream of connection states (_controller.onConnectionStateChanged). Listen to this to update your UI when the stream is connecting, connected, failed, or disconnected.
• Switch Camera: Need a selfie-view? Simply call await _controller.switchCamera(); to toggle between front and back cameras.
• Mute/Unmute Audio: Add a button to give users control over their audio by calling _controller.mute() and _controller.unmute().
• Configure Stream Quality: The initialize method accepts parameters like videoBitrate and fps. Expose these settings to your users to allow them to balance quality versus data usage.

Final Thoughts: The Future is Live

In less than 100 lines of Dart code, we've built a live streaming feature that would have taken weeks of complex native development just a few years ago. This is the power of the Flutter ecosystem and focused, well-designed packages like dart_simple_live.

It opens up a world of possibilities: simple social apps, niche live-selling platforms, virtual event broadcasting, and so much more. The barrier to entry for building real-time video experiences has never been lower.

So, what will you build? The stage is set, the camera is rolling, and with dart_simple_live, you're ready to go live in minutes. Happy coding!