---
title: Hello World
permalink: /docs/en/hello-world.html
key: docs-hello-world
---

This section is about writing a basic and easiest Flutter video player using `fijkplayer`. Take it easy.

Let's continue with the project `playerapp` created in last [install](/docs/eb/install.html) section.

## Test Debug Env

Running app in device or simulator is very cool. You can see what happend once you change the source code.  
Firstly, we should make sure we have a work-welled develop environment to Run / Debug app in device or simulator.

### iOS debug

It's better to run `pod install --verbose` in ios folder once we change flutter dependencies or the first time we create an Flutter app.

Well, because of some unresolved issues [flutter/issues/14647](https://github.com/flutter/flutter/issues/14647), Texture can not be renderer on iOS simulator. So to checking if a video player works well, we must use a real iOS devide. Running app on real iOS deviee from xcode need code sign.

open ios/Runner.xcworkspace in Xcode, configure your certificate on the path Runner -> targtes -> Runner -> General -> Signing.

After install dependencies and configure usable certificate, connect iOS device, run the `Runner` targets in Xcode, or `flutter run` in terminal. You can see the app launched on your device successfully.

### Android debug

Debug an android app dose not need certificate, and dependencies is installed automatically
by android studio and gradle.  
Open Android Virtual Device or connect to real Android devide, type `flutter run` in terminal, you will see the app launched on your Android device successfully.
 


## Create FijkPlayer

open `main.dart`, edit and update class `_MyHomePageState` as bellow.


```dart
class _MyHomePageState extends State<MyHomePage> {
  final FijkPlayer player = FijkPlayer();

  @override
  void initState() {
    super.initState();
    player.setDataSource(
        "https://sample-videos.com/video123/flv/240/big_buck_bunny_240p_10mb.flv",
        autoPlay: true);
  }

  @override
  void dispose() {
    super.dispose();
    player.release();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: FijkView(player: player),
      ),
    );
  }
}
```

important changes:

1. Initialize a `FijkPlayer` instance `player` in class `_MyHomePageState`.
2. Call the `player.setDataSource` API in the `initState` method.
3. Call the `player.release` API in the `dispose` method to release the resources occupied by the player.
4. Add `FijkView` to the UI Widgets Tree in the `build` method.

### Brief description

A FijkPlayer instance is bound to a playback (native ijkplayer). After the Fijkplayer is constructed, the corresponding native ijkplayer is also initialized.
FijkPlayer has almost all the APIs of ijkplayer. FijkPlayer is a dart wrapper for the native C layer ijkplayer, and the APIs are consistent.  
FijkPlayer handles all playback-related work. The actual work is done by the native C-layer ijkplayer, which includes checking the media information in the dataSource, opening the decoder and decoding threads, turning on the audio output device, and outputting the decoded data to the audio device or display device.
FijkPlayer occupies a lot memory or resources, and should call the API `release` explicitly for release when not in use.

FijkView only does one thing: display the decoded video content of FijkPlayer.  
FijkView has almost no extra API. If new API is added later, it is also related to the UI display.

## Screenshots

<table>
    <thead><tr>
        <th>Android</th>
        <th>iOS</th>
    </tr></thead>
    <tbody><tr>
        <td><img style="max-width: 380px" src="https://user-images.githubusercontent.com/51129600/62836505-462d4900-bc96-11e9-8a43-60ea1bcbc1c0.jpeg" alt="Android demo screenshots" /></td>
        <td><img style="max-width: 380px" src="https://user-images.githubusercontent.com/51129600/62836503-43caef00-bc96-11e9-868d-13a88ab36a9e.jpeg" alt="iOS demo screenshots" /></td>
    </tr></tbody>
</table>
