@tukutukuposted at 2024-09-11

Bottom Navigation Bar 画像挿入

Q&A

解決したいこと

flutterでアプリを作成しています。
Bottom Navigation Barにオリジナルの画像を挿入したいが、上手くできない。
ビルドしてもエラーは起きていないが、シミュレーターに画像を出ない。

発生している問題・エラー

該当するソースコード

ソースコードを入力

例）

import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Bottom Navigation Bar Example'),
),
body: Center(
child: Text('Main Content'),
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: SizedBox(
width: 24, // 適切な幅に変更
height: 24, // 適切な高さに変更
child: Image.asset('assets/icons/22856392.png'),
),
label: 'グループ',
),
const BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: '支払い',
),
const BottomNavigationBarItem(
icon: Icon(Icons.person),
label: '設定',
),
],
onTap: (index) {
// 各ボタンが押されたときの処理
if (index == 0) {
print('Home tapped');
} else if (index == 1) {
print('Settings tapped');
} else if (index == 2) {
print('Profile tapped');
}
},
),
),
);
}
}

1Answer

@eno49conan posted at 2024-09-11

@tukutukuさん

シミュレーターに画像を出ない。
シュミレーターというのは、エミュレーターとも呼ばれるものですかね？

画像の表示ですが、pubspec.yamlのassets:に、以下のように対象のフォルダを設定する作業は完了しているでしょうか。

pubspec.yaml

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:
    - assets/icons/

フォルダ構成（一部）

エミュレーター・実端末両方で、この猫のイラストを表示してみましたが、pubspec.yamlの設定を実施後、提供いただいたコードで画像を表示できているので、コードは問題ないと思います！

エミュレーター

実端末

1Like

Comments

@tukutuku
Questioner
ありがとうございます。
assets:
- assets/icons/　のコードを書いていなかったために反映されていませんでした。
@eno49conan
解決できてよかったです！
（クローズしちゃってください！）

Are you sure you want to delete the question?