Import existed theme

OgHref provides three Flutter UI themes depending your preferences which adopted Material design, Apple iOS design and Fluent design. All themed packages will provides cards and tile widgets as well as initalizer for setup MetaFetch and video playback from media_kit.

In this article, it will demostrate the complete steps for implementing OgHref widgets with provided themes along with additional setup. For documentation of widgets which shipped with theme packages, please visit widgets page in this wiki.

Import dependencies

To import OgHref, please either call pub add command or edit pubspec.yaml file:

The values of <theme name> should be:

• material for using Material design
• cupertino for using Apple iOS design
• fluent for using Fluent design

Invoke pub add command

flutter pub add oghref_<theme name>

Edit pubspec.yaml

dependencies:
    oghref_<theme name>: ^1.0.0 # Preferred to uses copied constrain from pub.dev

Platform configurations

url_launcher configurations

Implementing under Android and iOS require specifications of queried schemes under manifest files.

For iOS configurations, please apply LSApplicationQueriesSchemes into Info.plist:

<!--Info.plist-->
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>http</string>
  <string>https</string>
</array>

For Andorid, it requires opening links on external browser that both http and https must be assigned into <intent> already into <queries> entry:

<!--AndroidManifest.xml-->
<queries>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="https" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="http" />
    </intent>
</queries>

media_kit configurations

For implementing under Android, iOS and macOS, Internet access must be granted in case for streaming videos.

For implementing under Linux platform, libmpv-dev and mpv packages must be installed as well as linking mimalloc for building executable file.

Initialization

To activate plugins that ensure all necessaries features are functional, the initializer must be called right after WidgetsFlutterBinding.ensureInitialized() in main().

void main() {
    WidgetsFlutterBinding.ensureInitialized();
    /*
        This code uses Material theme as example.

        Please rename "Material" to "Cupertino" and "Fluent"
        if using iOS and Fluent design language accordingly.
    */
    OgHrefMaterialBinding.ensureinitialized();

    runApp(const App());
}

Implementations

There are two components bundled into themed package namely card and tile. Card provides completed informations of rich information link with video and audio playback supported but occupied more spaces for containing various data. Tile only displays limited informations with the first index of image regarding tags order but minimized occupied spaces. For more details of the widgets, please refer to this page.

Using Material in other themes

OgHref offers the most completed apperances widgets under Material design although iOS theme and Fluent also offers at the same time which obey behaviours and controls from Material that they may not render perfectly.

If Material themed widgets is planned to use inside non-MaterialApp widgets, they must be wrapped under Material widget class:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart' as m;

import 'package:oghref_material/oghref_material.dart';

class NonMaterialApp extends StatelessWidget {
    const NonMaterialApp({super.key});

    @override
    Widget build(BuildContext context) {
        return CupertinoApp(home: const NonMaterialHome());
    }
}

class NonMaterialHome extends StatelessWidget {
    const NonMaterialHome({super.key});

    @override
    Widget build(BuildContext context) {
        return CupertinoPageScaffold(
            child: SafeArea(
                child: m.Material(
                    child: OgHrefMaterialCard(Uri.parse("https://example.com"))
                )
            )
        );
    }
}

Build custom widgets

All themed widgets also shipped with OgHrefBuilder from builder package that a custom widget can be implemented either extending both widgets and states or call factory constructors under build method.

For more details on implementing in custom widget, please see this page.