Material Themed Rich information Link Widgets In Flutter

Material themed rich information link widgets in Flutter

Providing rich information links in Material themed widgets.

Setup

Basic

Add dependencies into pubspec.yaml:

dependencies:
    oghref_material: ^1.0.0 # Latest version
    # If required to design your own custom parsers, please also add these dependencies below:
    oghref_model: ^2.0.1

Perform initalizations before runApp

void main() {
    WidgetsFlutterBinding.ensureinitialized();
    OgHrefMaterialBinding.ensureinitialized();

    runApp(const App());
}

Either implement OgHrefMaterialCard or OgHrefMaterialTile depending your preference by referring to example

Advance

If custom property parser is used, please attach the parser into MetaFetch between initalizations and runApp:

MetaFetch().register(const CustomParser());

Usages

OgHrefMaterialCard and OgHrefMaterialTile can be used depending detail completeness and capacity. There is a brief explainations for determine the suitable widget to be applied.

OgHrefMaterialCard

OgHrefMaterialCard has three two major components in a card: media and information sections where placed vertically. The media section can be either image carousel or a player if multimedia is activated and the given URL provides at least one metadata related with audio or video with exact location of the resources (in another words, no redirection allowed) and responded content type.

Image carousel has two buttons for page control, simply as move previous or next pages. And the page view will display all images resources available from metadata. The content of images will be shown in contain mode of BoxFit and will be cached once it loaded already.

Player is a widget for handling audio and video playback with media_kit library. As mentioned before, this feature only available when all audios and videos metadata have raw file URL that ensure no unsupported content type URL existed. For example, YouTube video link offers video metadata but it's location is referring to embedded player which is HTML for attaching source of <iframe> element. Therefore, the widget refuses to activate multimedia playback support and keep showing image carousel.

For the information section, it contains title and descriptions if provided. Otherwise, when title omitted, URL address will be shown instead. This section also plays a role of linking given URL that it will open link when pressed.

OgHrefMaterialTile

OgHrefMaterialTile is another widgets based on ListTile which integrated an image, title, description as well as open link features into a compact widget to reduce occupied spaces.

The image will be shown the first index of metadata only and no extra resources can be displayed unlike the card. Thus, all audios and videos resources are omitted that multimedia playback is no longer availabled in this widget in insufficient size.

License

MIT

Use this package as a library

Depend on it

Run this command:

With Dart:

 $ dart pub add oghref_material

With Flutter:

 $ flutter pub add oghref_material

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):

dependencies:
  oghref_material: ^1.1.4

Alternatively, your editor might support dart pub get or flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:oghref_material/oghref_material.dart'; 

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:oghref_material/oghref_material.dart';
import 'package:provider/provider.dart';

import 'app.dart';
import 'theme_preference.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  OgHrefMaterialBinding.ensureInitialized();
  runApp(const OgHrefMaterialExampleApp());
}

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<ThemePreference>(
        create: (context) => ThemePreference(),
        builder: (context, child) {
          final ThemePreference pref = context.watch<ThemePreference>();

          return MaterialApp(
              theme: ThemeData(useMaterial3: pref.materialThree),
              darkTheme: ThemeData.dark(useMaterial3: pref.materialThree),
              themeMode: pref.darkMode ? ThemeMode.dark : ThemeMode.light,
              home: const OgHrefMaterialExampleHome());
        });
  }
} 

Download details:

Author: rk0cc

Source: https://github.com/rk0cc/oghref/tree/main/widgets/material

#flutter #widget