Skip to content

Commit d6f5419

Browse files
renefloorrenefloor
authored
Merge pull request #628 from Baseflow/feature/simplify-example
Make example fit in 1 file by using plugin package
2 parents 39ebacb + 2d95c78 commit d6f5419

File tree

12 files changed

+177
-472
lines changed

12 files changed

+177
-472
lines changed

‎cached_network_image/example/ios/Flutter/AppFrameworkInfo.plist

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,6 @@
2121
<key>CFBundleVersion</key>
2222
<string>1.0</string>
2323
<key>MinimumOSVersion</key>
24-
<string>8.0</string>
24+
<string>9.0</string>
2525
</dict>
2626
</plist>

‎cached_network_image/example/lib/main.dart

Lines changed: 170 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,151 +1,204 @@
1+
import 'package:cached_network_image/cached_network_image.dart';
12
import 'package:flutter/material.dart';
23
import 'package:flutter/widgets.dart';
3-
4-
import 'template/globals.dart';
4+
import 'package:baseflow_plugin_template/baseflow_plugin_template.dart';
5+
import 'package:flutter_blurhash/flutter_blurhash.dart';
56

67
void main() {
7-
runApp(BaseflowPluginExample());
8+
runApp(BaseflowPluginExample(
9+
pluginName: 'CachedNetworkImage',
10+
githubURL: 'https://github.com/Baseflow/flutter_cache_manager',
11+
pubDevURL: 'https://pub.dev/packages/flutter_cache_manager',
12+
pages: [
13+
BasicContent.createPage(),
14+
ListContent.createPage(),
15+
GridContent.createPage(),
16+
],
17+
));
818
}
919

10-
/// A Flutter application demonstrating the functionality of this plugin
11-
class BaseflowPluginExample extends StatelessWidget {
12-
/// [MaterialColor] to be used in the app [ThemeData]
13-
final MaterialColor themeMaterialColor =
14-
createMaterialColor(const Color.fromRGBO(48, 49, 60, 1));
20+
/// Demonstrates a [StatelessWidget] containing [CachedNetworkImage]
21+
class BasicContent extends StatelessWidget {
22+
static ExamplePage createPage() {
23+
return ExamplePage(Icons.image, (context) => BasicContent());
24+
}
1525

1626
@override
1727
Widget build(BuildContext context) {
18-
return MaterialApp(
19-
title: 'Baseflow $pluginName',
20-
theme: ThemeData(
21-
accentColor: Colors.white60,
22-
backgroundColor: const Color.fromRGBO(48, 49, 60, 0.8),
23-
buttonTheme: ButtonThemeData(
24-
buttonColor: themeMaterialColor.shade500,
25-
disabledColor: themeMaterialColor.withRed(200),
26-
splashColor: themeMaterialColor.shade50,
27-
textTheme: ButtonTextTheme.primary,
28-
),
29-
bottomAppBarColor: const Color.fromRGBO(57, 58, 71, 1),
30-
hintColor: themeMaterialColor.shade500,
31-
primarySwatch: createMaterialColor(const Color.fromRGBO(48, 49, 60, 1)),
32-
textTheme: TextTheme(
33-
bodyText1: TextStyle(
34-
color: Colors.white,
35-
fontSize: 16,
36-
height: 1.3,
37-
),
38-
bodyText2: TextStyle(
39-
color: Colors.white,
40-
fontSize: 18,
41-
height: 1.2,
42-
),
43-
button: TextStyle(color: Colors.white),
44-
headline1: TextStyle(
45-
color: Colors.white,
46-
fontSize: 18,
47-
),
48-
),
49-
visualDensity: VisualDensity.adaptivePlatformDensity,
50-
inputDecorationTheme: const InputDecorationTheme(
51-
fillColor: Color.fromRGBO(37, 37, 37, 1),
52-
filled: true,
28+
return SingleChildScrollView(
29+
child: Center(
30+
child: Column(
31+
mainAxisAlignment: MainAxisAlignment.center,
32+
children: <Widget>[
33+
_blurHashImage(),
34+
_sizedContainer(
35+
const Image(
36+
image: CachedNetworkImageProvider(
37+
'https://via.placeholder.com/350x150',
38+
),
39+
),
40+
),
41+
_sizedContainer(
42+
CachedNetworkImage(
43+
progressIndicatorBuilder: (context, url, progress) => Center(
44+
child: CircularProgressIndicator(
45+
value: progress.progress,
46+
),
47+
),
48+
imageUrl:
49+
'https://images.unsplash.com/photo-1532264523420-881a47db012d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9',
50+
),
51+
),
52+
_sizedContainer(
53+
CachedNetworkImage(
54+
placeholder: (context, url) =>
55+
const CircularProgressIndicator(),
56+
imageUrl: 'https://via.placeholder.com/200x150',
57+
),
58+
),
59+
_sizedContainer(
60+
CachedNetworkImage(
61+
imageUrl: 'https://via.placeholder.com/300x150',
62+
imageBuilder: (context, imageProvider) => Container(
63+
decoration: BoxDecoration(
64+
image: DecorationImage(
65+
image: imageProvider,
66+
fit: BoxFit.cover,
67+
colorFilter: const ColorFilter.mode(
68+
Colors.red,
69+
BlendMode.colorBurn,
70+
),
71+
),
72+
),
73+
),
74+
placeholder: (context, url) =>
75+
const CircularProgressIndicator(),
76+
errorWidget: (context, url, error) => const Icon(Icons.error),
77+
),
78+
),
79+
CachedNetworkImage(
80+
imageUrl: 'https://via.placeholder.com/300x300',
81+
placeholder: (context, url) => const CircleAvatar(
82+
backgroundColor: Colors.amber,
83+
radius: 150,
84+
),
85+
imageBuilder: (context, image) => CircleAvatar(
86+
backgroundImage: image,
87+
radius: 150,
88+
),
89+
),
90+
_sizedContainer(
91+
CachedNetworkImage(
92+
imageUrl: 'https://notAvalid.uri',
93+
placeholder: (context, url) =>
94+
const CircularProgressIndicator(),
95+
errorWidget: (context, url, error) => const Icon(Icons.error),
96+
),
97+
),
98+
_sizedContainer(
99+
CachedNetworkImage(
100+
imageUrl: 'not a uri at all',
101+
placeholder: (context, url) =>
102+
const CircularProgressIndicator(),
103+
errorWidget: (context, url, error) => const Icon(Icons.error),
104+
),
105+
),
106+
_sizedContainer(
107+
CachedNetworkImage(
108+
maxHeightDiskCache: 10,
109+
imageUrl: 'https://via.placeholder.com/350x200',
110+
placeholder: (context, url) =>
111+
const CircularProgressIndicator(),
112+
errorWidget: (context, url, error) => const Icon(Icons.error),
113+
fadeOutDuration: const Duration(seconds: 1),
114+
fadeInDuration: const Duration(seconds: 3),
115+
),
116+
),
117+
],
53118
),
54119
),
55-
home: AppHome(),
56120
);
57121
}
58122

59-
/// Creates a [MaterialColor] based on the supplied [Color]
60-
static MaterialColor createMaterialColor(Color color) {
61-
List strengths = <double>[.05];
62-
final swatch = <int, Color>{};
63-
final r = color.red, g = color.green, b = color.blue;
64-
65-
for (var i = 1; i < 10; i++) {
66-
strengths.add(0.1 * i);
67-
}
68-
for (var strength in strengths) {
69-
final ds = 0.5 - strength;
70-
swatch[(strength * 1000).round()] = Color.fromRGBO(
71-
r + ((ds < 0 ? r : (255 - r)) * ds).round(),
72-
g + ((ds < 0 ? g : (255 - g)) * ds).round(),
73-
b + ((ds < 0 ? b : (255 - b)) * ds).round(),
74-
1,
75-
);
76-
}
77-
return MaterialColor(color.value, swatch);
123+
Widget _blurHashImage() {
124+
return SizedBox(
125+
width: double.infinity,
126+
child: CachedNetworkImage(
127+
placeholder: (context, url) => const AspectRatio(
128+
aspectRatio: 1.6,
129+
child: BlurHash(hash: 'LEHV6nWB2yk8pyo0adR*.7kCMdnj'),
130+
),
131+
imageUrl: 'https://blurha.sh/assets/images/img1.jpg',
132+
fit: BoxFit.cover,
133+
),
134+
);
78135
}
79-
}
80136

81-
/// A Flutter example demonstrating how the [pluginName] plugin could be used
82-
class AppHome extends StatefulWidget {
83-
/// Constructs the [AppHome] class
84-
AppHome({Key? key}) : super(key: key);
85-
86-
@override
87-
_AppHomeState createState() => _AppHomeState();
137+
Widget _sizedContainer(Widget child) {
138+
return SizedBox(
139+
width: 300.0,
140+
height: 150.0,
141+
child: Center(child: child),
142+
);
143+
}
88144
}
89145

90-
class _AppHomeState extends State<AppHome> {
91-
static final PageController _pageController = PageController(initialPage: 0);
92-
int _currentPage = 0;
146+
/// Demonstrates a [ListView] containing [CachedNetworkImage]
147+
class ListContent extends StatelessWidget {
148+
static ExamplePage createPage() {
149+
return ExamplePage(Icons.list, (context) => ListContent());
150+
}
93151

94152
@override
95153
Widget build(BuildContext context) {
96-
return Scaffold(
97-
appBar: AppBar(
98-
backgroundColor: Theme.of(context).bottomAppBarColor,
99-
title: Center(
100-
child: Image.asset(
101-
'res/images/baseflow_logo_def_light-02.png',
102-
width: 140,
103-
),
154+
return ListView.builder(
155+
itemBuilder: (BuildContext context, int index) => Card(
156+
child: Column(
157+
children: <Widget>[
158+
CachedNetworkImage(
159+
imageUrl: 'https://loremflickr.com/320/240/music?lock=$index',
160+
placeholder: (BuildContext context, String url) => Container(
161+
width: 320,
162+
height: 240,
163+
color: Colors.purple,
164+
),
165+
),
166+
],
104167
),
105168
),
106-
backgroundColor: Theme.of(context).backgroundColor,
107-
body: PageView(
108-
controller: _pageController,
109-
children: pages,
110-
onPageChanged: (page) {
111-
setState(() {
112-
_currentPage = page;
113-
});
114-
},
115-
),
116-
bottomNavigationBar: _bottomAppBar(),
169+
itemCount: 250,
117170
);
118171
}
172+
}
119173

120-
BottomAppBar _bottomAppBar() {
121-
return BottomAppBar(
122-
elevation: 5,
123-
color: Theme.of(context).bottomAppBarColor,
124-
child: Row(
125-
mainAxisSize: MainAxisSize.max,
126-
mainAxisAlignment: MainAxisAlignment.spaceBetween,
127-
children: List.unmodifiable(() sync* {
128-
for (var i = 0; i < pages.length; i++) {
129-
yield Expanded(
130-
child: IconButton(
131-
iconSize: 30,
132-
icon: Icon(icons.elementAt(i)),
133-
color: _bottomAppBarIconColor(i),
134-
onPressed: () => _animateToPage(i),
135-
),
136-
);
137-
}
138-
}()),
174+
/// Demonstrates a [GridView] containing [CachedNetworkImage]
175+
class GridContent extends StatelessWidget {
176+
static ExamplePage createPage() {
177+
return ExamplePage(Icons.grid_on, (context) => GridContent());
178+
}
179+
180+
@override
181+
Widget build(BuildContext context) {
182+
return GridView.builder(
183+
itemCount: 250,
184+
gridDelegate:
185+
const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
186+
itemBuilder: (BuildContext context, int index) => CachedNetworkImage(
187+
imageUrl: 'https://loremflickr.com/100/100/music?lock=$index',
188+
placeholder: _loader,
189+
errorWidget: _error,
139190
),
140191
);
141192
}
142193

143-
void _animateToPage(int page) {
144-
_pageController.animateToPage(page,
145-
duration: const Duration(milliseconds: 200), curve: Curves.linear);
194+
Widget _loader(BuildContext context, String url) {
195+
return const Center(
196+
child: CircularProgressIndicator(),
197+
);
146198
}
147199

148-
Color _bottomAppBarIconColor(int page) {
149-
return _currentPage == page ? Colors.white : Theme.of(context).accentColor;
200+
Widget _error(BuildContext context, String url, dynamic error) {
201+
print(error);
202+
return const Center(child: Icon(Icons.error));
150203
}
151204
}

0 commit comments

Comments
 (0)