Flutterを使ってみよう その６（画像表示 他）

公開日: 2024/10/17

前回の記事の続きです。

今回は、今まで触れていない実装方法の知識を深めていきましょう。

環境

　・MacOS Ventura 13.6.3

　・Xcode 15.1

　・VSCode 1.85.1

　・Flutter 3.16.5

　・Dart 3.2.3

1. 画像表示

アプリ内の画像を表示する場合は、下記の手順で実装します。

　・プロジェクト内に画像を格納

　・pubspec.yaml を編集

　・Image ウィジェットで呼び出す

まず、プロジェクト内に画像を格納します。

プロジェクト直下に 今回は、 images フォルダを作成して、表示したい画像をその中に入れます。


次に、 pubspec.yaml を編集します。

ファイル内の定義 assets 以下に取り込みたい画像名を設置します。

指定は、ディレクトリ範囲でも指定することができますが、今回はファイル単位で指定しています。

flutter:
  uses-material-design: true
  assets:
    - images/sample.jpg
    - images/sub/sample2.jpg

最後に、 Image ウィジェットを使用して、画像を表示します。

アプリ内画像を表示する場合は、 Image.asset を利用します。

// インポートとか省略
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text(
          'Images',
        ),
      ),
      child: Material(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: SizedBox(    // 画像のサイズ感を調整
                width: 200,
                child: Image.asset(
                  'images/sample.jpg',  &nb

2. グリッド表示

写真のサムネイル一覧とかでよく使うグリッド表示は、 GridView ウィジェットを使います。

コード例では、アプリ内の画像の一覧を表示するサンプルです。

固定レイアウトのときは、SliverGridDelegateWithFixedCrossAxisCount クラスを使います。

// インポートとか省略
final gridsWidgets = [
  Image.asset(
    'images/grid/grid01.jpg',
    fit: BoxFit.fitHeight,
  ),
  Image.asset(
    'images/grid/grid02.jpg',
    fit: BoxFit.fitHeight,
  ),
  // 省略
]

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text(
          'Grid',
        ),
      ),
      child: Material(
        child: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,  // 行のアイテム数
            mainAxisExtent: 80, // アイテムの高さ
          ),
          itemCount:
              gridsWidgets.length, // gridsWidgets に Imageがウィジェットが配列設定されてます
          itemBuilder: (context, index) => gridsWidgets[index],
        ),
      ),
    );
  }
}

3. アニメーション

単純なアニメーションをさせたいときは、Animated系ウィジェットを使うのが良いです。

コード例では、ボタンタップで画像を回転させるコード例を記載しています。

// インポートとか省略
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double _turns = 0;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text(
          'Turn',
        ),
      ),
      child: Material(
        child: SafeArea(
          child: Column(
            children: [
              AnimatedRotation(
                duration: const Duration(milliseconds: 500),
                turns: _turns,
                curve: Curves.easeIn,
                child: AspectRatio(
                  aspectRatio: 1,
                  child: SizedBox(
                    width: double.infi

4. カスタムフォントでのテキスト表示

カスタムフォントを使い、テキストを表示する場合は、下記の手順で実装します。

　・プロジェクト内にフォントファイルを格納

　・pubspec.yaml を編集

　・Text ウィジェットでフォントを指定して呼び出す


まず、プロジェクト内にフォントファイルを格納します。

プロジェクト直下に fonts フォルダを作成して、利用したいフォントファイルをその中に入れます。


次に、 pubspec.yaml を編集します。

fonts 以下に取り込みたい画像名を設置します。

flutter:
  uses-material-design: true
  fonts:
    - family: BungeeSpice
      fonts:
        - asset: fonts/BungeeSpice-Regular.ttf
    - family: KikaiChokokuJIS
      fonts:
        - asset: fonts/KikaiChokokuJIS-Md.otf

最後に、 Text ウィジェットを配置して確認します。フォント設定は TextStyle を利用します。

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text(
          'Fonts',
        ),
      ),
      child: SafeArea(
        child: Container(
          alignment: Alignment.topCenter,
          child: const Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text('Normal'),     // デフォルトでのテキスト表示
        &n

5. まとめ

今回は、画像表示とか今まで触れていない実装方法の知識を深めるのを目的に記事を書きました。

次回は、外部パッケージの使用方法等の知識を深めようと思います。

関連記事
【iOS】初めてのSwiftUI 【Part1】
【iOS】初めてのSwiftUI 【Part2】
SwiftUIの基礎を学ぶ【iOS】
SwiftUIで色々なレイアウトを作ってみる【iOS】
検索
人気カテゴリ
人気のタグ一覧
初心者向け記事（265） スキルアップ（258） 学習（199） プログラミング（138） ネットワーク（44） Java（26） CCNA（25） Web（22） SQL（19） php（16）
トップカテゴリ