dp_widget - Dart API docs

A custom widget built on cached_network image and other widgets to allow you display file image, network image and placeholders as for user profile picture as appropriate without handling the state or switching manually.

Installation

Add dp_widget: ^0.0.3 to your pubspec.yaml dependencies. And import it:

import 'package:dp_widget/dp_widget.dart';

Features

Display File Image
Display Network Image
Or just display a placeholder

Supported platforms

Flutter Android
Flutter iOS
Flutter web
Flutter desktop

Usage

Simply create a DpImageWidget widget, and pass the params according to your customization:

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

class SamplePage extends StatefulWidget {
  const SamplePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<SamplePage> createState() => _SamplePageState();
}

class _SamplePageState extends State<SamplePage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();
  String? imageUrl;
  File? imageFile;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
        child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                DpImageWidget(
                imageUrl: imageUrl,
                imageFile: imageFile,
                editCallback: () async {
                    // Add the process of selecting and probably uploading the image file here
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text("Select a file here")));
                    await Future.delayed(const Duration(milliseconds: 200));
                    setState(() {
                      imageUrl = "https://picsum.photos/200/300?random=1";
                    });
                },
              ),
            ],
        ))));
    }
}

Screenshot

simple

The screenshots above can be found at the example project.

License

MIT

DP Widget