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
The screenshots above can be found at the example project.
License
MIT