👩💼
LINEグループのプロフィールIconみたいな機能を作ってみた?
ローカルに画像を保存する?
LINEグループを見てみて、思ったのですがあらかじめ用意している画像を使いプロフィール画像を切り替える機能を作ってみたいと思いました。
これってどうやら、リモートではなくてローカルに保存しているのではないかと思いました???
多分違うかも？
チャットはキャッシュを残しているのかという話を最近聞きました。今回は違う気がするけど、自分しか見ないプロフィールページに、画像をリモートに保存して表示する必要あるのかと疑問に思った???
こんなものを作った
ListViewで、画像を横にスライドさせて、その中から画像を選んでタップするとローカルの端末に画像のパスを保存して、別のページで表示するロジックを作りました。
保存するページ
保存した画像を表示するページ
サンプルコード
-
imagesディレクトリを作成して、画像を配置する
-
pubsepc.yamlで画像を読み込めるように設定する
name: local_image
description: A new Flutter project.
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1
environment:
sdk: '>=3.1.3 <4.0.0'
# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
shared_preferences: ^2.2.2
dev_dependencies:
flutter_test:
sdk: flutter
# The "flutter_lints" package below contains a set of recommended lints to
# encourage good coding practices. The lint set provided by the package is
# activated in the `analysis_options.yaml` file located at the root of your
# package. See that file for information about deactivating specific lint
# rules and activating additional ones.
flutter_lints: ^2.0.0
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter packages.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
- images/cat.png
- images/dog.png
- images/fish.png
- images/pengin.png
- images/ris.png
- images/usagi.png
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
- 画像を横スライドさせて、タップすると端末に保存するページを作成する
import 'package:flutter/material.dart';
import 'package:local_image/profile_page.dart';
import 'package:shared_preferences/shared_preferences.dart';
class MyPage extends StatefulWidget {
const MyPage({super.key});
_MyPageState createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
final List<String> _images = [
'images/cat.png',
'images/dog.png',
'images/fish.png',
'images/pengin.png',
'images/ris.png',
'images/usagi.png',
];
Future<void> _saveImagePath(String imagePath) async {
SharedPreferences pref = await SharedPreferences.getInstance();
await pref.setString('imagePath', imagePath);
}
Future<String> _loadImagePath() async {
SharedPreferences pref = await SharedPreferences.getInstance();
return pref.getString('imagePath') ?? '';
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('My Page'),
actions: [
IconButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const ProfilePage(),
),
);
},
icon: const Icon(Icons.person),
),
],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// ListViewで横にスライドできるようにする
SizedBox(
height: 100,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: _images.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () async {
// 画像を変更したらpop upを出す
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('画像を変更しました'),
),
);
await _saveImagePath(_images[index]);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(1000),
child: AspectRatio(
aspectRatio: 1 / 1, // Add this line
child: SizedBox(
width: 30, // Change this value
height: 30, // And this value
child: Image.asset(
_images[index],
fit: BoxFit.cover, // And this line
),
),
),
),
),
);
},
),
),
],
),
);
}
}
- 保存した画像を表示するページを作成
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
class ProfilePage extends StatefulWidget {
const ProfilePage({super.key});
_ProfilePageState createState() => _ProfilePageState();
}
class _ProfilePageState extends State<ProfilePage> {
Future<String> _loadImagePath() async {
SharedPreferences pref = await SharedPreferences.getInstance();
return pref.getString('imagePath') ?? '';
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
const SizedBox(height: 16),
Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 16),
child: FutureBuilder<String>(
future: _loadImagePath(),
builder:
(BuildContext context, AsyncSnapshot<String> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const CircularProgressIndicator();
} else {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
if (snapshot.data != null &&
snapshot.data!.isNotEmpty) {
return Image.asset(snapshot.data!,
width: 100, height: 100);
} else {
return const Text('No image selected');
}
}
}
},
),
),
const SizedBox(width: 16),
Text('hoge1100xx@co.jpさん',
style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold)),
],
),
],
),
);
}
}
アプリを実行するコード
main.dart
import 'package:flutter/material.dart';
import 'package:local_image/my_page.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyPage(),
);
}
}
最後に
今回は、ローカルに用意した画像を使って、プロフィール画像を切り替える機能をつけてみました。LINEグループのIcon画像はもしかしたら、リモートかも???
別のユーザー情報でも作ってるんですかね😅
riverpodに書き直して、FutureProviderで使ってみたのですが、riverpod gneratorだとうまくいかなかったです???
なんででしょうね〜
サンプルコード
Discussion