質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

オブジェクト指向

オブジェクト指向プログラミング(Object-oriented programming;OOP)は「オブジェクト」を使用するプログラミングの概念です。オブジェクト指向プログラムは、カプセル化(情報隠蔽)とポリモーフィズム(多態性)で構成されています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

解決済

1回答

748閲覧

flutterでAndroid端末の画像フォルダ内の全ての画像を読み込んでアプリ内で一覧表示したい。

t_flutter

総合スコア7

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

オブジェクト指向

オブジェクト指向プログラミング(Object-oriented programming;OOP)は「オブジェクト」を使用するプログラミングの概念です。オブジェクト指向プログラムは、カプセル化(情報隠蔽)とポリモーフィズム(多態性)で構成されています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2023/03/29 15:27

実現したいこと

・flutterアプリ内でインスタグラムと同じように画像を端末のギャラリーから選択出来るようにしたい。
・画像選択ボタン押下→端末のギャラリーのパスを取得してその中の画像をGrid表示する。→画像をタップして登録ボタン押下でその画像をアプリ上で登録できる。

前提

・インスタグラム風のアプリを勉強がてら作っている。
・端末のギャラリーから画像を選択して登録出来るようにしたい。
・選択できる画像は1枚でよい。
・まずはAndroid端末を想定
・アクセスしたいのはアプリ専用のフォルダではなく端末の画像フォルダ
・画像のGrid表示UIは作成済みで現在はとりあえずassetフォルダ内にあらかじめ配置した画像を読み込んで表示している。これをassetフォルダではなく、端末のギャラリーから画像を取得するように変更したい。
・取得した画像はアプリ内で活用する予定。
ここで、image_pickerを使用すると容易に画像を選択できることは分かっているのですが
例えば

final ImagePicker picker = ImagePicker(); final XFile? image = await picker.pickImage(source: ImageSource.gallery);

を実装するとギャラリーに遷移してそこで画像を選択することになります。しかし私が実装したいのはギャラリーの画像を(ギャラリーに遷移せずに)アプリ内で表示&選択出来るようにする(インスタグラムの画像選択画面をイメージ)ことです。そこでギャラリー内の画像のパスを全て取得するような方法は無いでしょうか??すでに完成されたインスタグラム風のパッケージは存在するようですが可能であれば勉強もかねて自分で作ってみたいと思っています。

該当のソースコード

下記のソースコードはassetフォルダに配置した画像をGrid表示する例です。これをベースに書き換えたいと思っておりimage_pickerは実装していません。

//料理画像を端末から選択する class SelectImage extends StatefulWidget { const SelectImage({super.key, required this.stateSetter}); final Function stateSetter; @override _SelectImage createState() => _SelectImage(); } class _SelectImage extends State<SelectImage> { //画像の要素番号を保持 int imagenumber = 0; bool isSelected = false; List<bool> selectList = List.filled(17, false); File? image; //画像を入れる変数を用意 List<List<String>> cookingitem = [ [ "assets/images/4847156604249137743.2e2510548ecf1bb9a0cec09c3ac590cc.23020602.jpg", "タマゴ", "ひき肉", "ナス", "ウインナー", ], [ "assets/images/4847156604249137743.4fdbae3aaba82b2aea5fbfd9ef0f4b13.23020602.jpg", "ブロッコリー", "鶏肉", "ジャガイモ", "牛乳", ], [ "assets/images/4847156604249137743.8d8338c43a29720eeee95872c49abb0e.23020602.jpg", "タマゴ", "チャーハンの素", "豚肉" ], [ "assets/images/4847156604249137743.9d4449257addd083f765b87864595120.23020602.jpg", "タマゴ", "ウインナー" ], [ "assets/images/4847156604249137743.294ea7e61d335b1bfefe78fec69ae959.23020602.jpg", "ひき肉", "タマゴ", ], [ "assets/images/4847156604249137743.756efa276ba380837433934c3c9ecf73.23020602.jpg", "タマゴ", "ケチャップ" ], [ "assets/images/4847156604249137743.996ad6cc57e04b87d87a378fb02c8308.23020602.jpg", "鮭", "キュウリ", "塩コンブ" ], [ "assets/images/4847156604249137743.8407d0b26bde0384a4cc002300501af2.23020602.jpg", "豚肉", "ハクサイ", "タマゴ", "ミソ" ], [ "assets/images/4847156604249137743.b66686e328f89ab07f35bf583e3e04cb.23020602.jpg", "ブロッコリー", "骨付き鶏肉", ], [ "assets/images/4847156604249137743.bbfdb1364a856cb7a57c003b05c5ef77.23020602.jpg", "焼きそば麺", "キャベツ", "豚肉" ], [ "assets/images/4847156604249137743.c811a478c8192c620cf32f156887a7b1.23020602.jpg", "ハヤシライスの素", "豚肉", "ジャガイモ" ], [ "assets/images/4847156604249137743.ce2b18cc2549f66dba8281e136eb4356.23020602.jpg", "サーモン", "キムチ", "お好み焼きの素", "キュウリ", "カツオブシ" ], [ "assets/images/4847156604249137743.d45e5553a940ff6ae2219f5062b0dc73.23020602.jpg", "アスパラ", "ベーコン" ], [ "assets/images/4847156604249137743.e09a8492c0e4866b9d095efee455e179.23020602.jpg", "鶏肉", "タマゴ", "レタス", "トマト" ], [ "assets/images/4847156604249137743.fcffe271fa5e8e18a752eb1350db6623.23020602.jpg", "焼きそば麵", "キャベツ", "エビ" ], [ "assets/images/4847156604249137743.fd8a67d0666f101a4a180f46072aa10e.23020602.jpg", "ノリ", "タマゴ", "キュウリ", "サーモン", "キムチ" ], [ "assets/images/4847156604249137743.fe8bfe8c731361508fc754a13f470af4.23020602.jpg", "肉団子", "ハクサイ", "ウインナー", "マロニー" ], ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.black, title: Stack( alignment: Alignment.center, children: <Widget>[ Align( alignment: Alignment.centerRight, child: ButtonTheme( padding: EdgeInsets.symmetric(vertical: 8), materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, minWidth: 0, height: 0, child: TextButton( child: const Text( "次へ", style: TextStyle(color: Colors.white, fontSize: 20), ), onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => RegisterItem(stateSetter: widget.stateSetter), )); }, ), ), ), ], ), ), body: SafeArea( child: Column( children: [ Container( color: Colors.black, height: 400, width: double.infinity, //下で押下した画像を表示する child: selectList[imagenumber] ? Container( color: Colors.black, margin: const EdgeInsets.all(8), child: Image.asset(cookingitem[imagenumber][0], fit: BoxFit.cover)) : Container( color: Colors.grey, margin: const EdgeInsets.all(8), )), Expanded( child: Container( padding: const EdgeInsets.all(8), color: Colors.black, child: GridView.builder( itemCount: cookingitem.length, gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 4, crossAxisSpacing: 4.0, mainAxisSpacing: 4.0), itemBuilder: (context, index) { return GestureDetector( onTap: () { setState(() { selectList = List.filled(17, false); imagenumber = index; selectList[index] = !selectList[index]; }); print(selectList); }, child: Stack( children: <Widget>[ SizedBox( width: double.infinity, child: Image.asset(cookingitem[index][0], fit: BoxFit.cover)), Positioned( right: 1.0, bottom: 1.0, child: CircleAvatar( backgroundColor: selectList[index] ? Colors.black38 : Color(0x00000000), child: Icon( selectList[index] ? Icons.check : null, size: 36, color: Colors.lightBlue))), ], ), ); }, ), )) ], )), ); } }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

image_pickerではなくflutter_storage_pathパッケージを使う。フォルダ名や画像パスをJson形式で返してくれる。

投稿2023/04/08 12:44

t_flutter

総合スコア7

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問