dp_widget 0.0.3

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

DP Widget

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