LoginSignup
2
1
@Shigemaxxx

プログラミング初心者の医学生が残り少ない夏休みでGithubcopilotとchatGPTの力を借りてアプリ開発してみた Day7

Posted at

これまでの経過

  • Day1(2023/08/20)

  • Day2(2023/08/21)

  • Day3(2023/08/22)

  • Day4(2023/08/23)

  • Day5(2023/08/24)

  • Day6(2023/08/25)

    • 1. I Am Rich - How to Create Flutter Apps From Scratch
    • 2. Running Your App on a Physical Device
    • 3. I Am Poor - App Challenge
    • 4. MiCard - How to Build Beautiful UIs with Flutter Widgets
    • 5. Dicee - Building Apps with State
    • 6. Boss Level Challenge 1 - Magic 8 Ball
    • 7. Xylophone - Using Flutter and Dart Packages to Speed Up Development
    • 8. Quizzler - Modularising & Organising Flutter Code
    • 9. Boss Level Challenge 2 - Destini
    • 10. BMI Calculator - Building Flutter UI for Intermediates
    • 11. Clima - Powering Your Flutter App with Live Web Data
    • 12. Boss Level Challenge 3 - Bitcoin Ticker
    • 13. Flash Chat - Flutter x Firebase Cloud Firestore
    • 14. Provider Pattern - State Management
    • 15. Next Steps
    • 16. Final Session - You Did It!

Day7(2023/08/26)

The Complete Flutter Development Bootcamp with Dart

画像を表示するためにはどうしたら良いですか？ Flutterで画像を表示するには、`Image` ウィジェットを使用します。以下の手順に従って画像を表示できます：

  1. まず、assets フォルダ内に画像ファイルを配置します。例えば、assets/images フォルダに image.png という名前の画像ファイルを置くとします。

  2. pubspec.yaml ファイル内で、使用するアセットを宣言します。assets セクションに画像ファイルのパスを追加します。例えば：

    flutter:
  assets:
    - assets/images/image.png

  3. 画像を表示したいウィジェット内で、Image.asset() コンストラクタを使用して画像を表示します。次の例を参考にしてください：

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image Example'),
        ),
        body: Center(
          child: Image.asset('assets/images/image.png'),
        ),
      ),
    );
  }
}

この例では、Image.asset() コンストラクタを使用してアセット内の画像を表示しています。assets/images/image.png の部分は、アセットのパスを示しており、assets フォルダからの相対パスで指定します。アプリを実行すると、指定した画像が中央に表示されるはずです。

このようにして、Flutterアプリ内で画像を表示することができます。必要に応じて、画像のサイズや配置などを調整することもできます。

assetsフォルダに画像は既にあるのに，yamlファイルでアセットを宣言するのはどうしてですか？ Flutterのプロジェクトでは、`assets` フォルダ内にアセット（画像、フォント、設定ファイルなど）を配置することはできますが、それだけではアプリが実行される際にアセットが含まれない場合があります。これは、Flutterのビルドプロセスがアプリに含めるべきアセットを明示的に指定する必要があるためです。ここで、`pubspec.yaml` ファイルの `assets` セクションが重要な役割を果たします。

pubspec.yaml ファイル内の assets セクションにアセットのパスを宣言することで、Flutterビルドプロセスがそれらのアセットをアプリに含めます。アプリがデバイス上で実行される際に、これらのアセットが利用可能になります。これにより、実際にアプリが必要とするアセットだけがバンドルされ、アプリのサイズを効果的に管理できるようになります。

つまり、pubspec.yaml ファイルでアセットを宣言することによって、アプリケーションがビルドされる際にそれらのアセットが含まれるようになります。アプリの開発者が指定したアセットだけがビルドされ、実行時に利用できるようになるため、アプリのパフォーマンスやファイルサイズの最適化に役立ちます。

App Icon Generator

アプリのアイコンを表示させるにはどうしたら良いですか？https://www.appicon.co/を利用してください． アプリのアイコンを表示させるためには、まず適切なアプリアイコン画像を用意し、それをFlutterプロジェクトに統合する必要があります。その後、`pubspec.yaml` ファイル内でアセットを宣言し、アプリのウィジェットでアイコンを表示します。

以下に具体的な手順を示します：

  1. https://www.appicon.co/ などのオンラインツールを使用して、複数のサイズのアプリアイコン画像を生成します。通常、AndroidとiOS用に異なるサイズのアイコンが必要です。

  2. 生成されたアイコン画像を assets フォルダ内に配置します。例えば、assets/icons フォルダ内にアイコン画像を格納します。

  3. pubspec.yaml ファイル内の assets セクションにアイコン画像のパスを追加します。例えば：

    flutter:
  assets:
    - assets/icons/icon_192x192.png
    - assets/icons/icon_512x512.png
    # 他のアセットもここに追加

  4. アプリのウィジェット内で Image.asset() ウィジェットを使用してアイコンを表示します。例えば：

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Icon Example'),
        ),
        body: Center(
          child: Image.asset('assets/icons/icon_192x192.png'),
        ),
      ),
    );
  }
}

これにより、アプリのアイコンが中央に表示されるはずです。Image.asset() 内のパスは、アイコン画像のアセットパスに合わせて変更してください。

以上の手順に従って、https://www.appicon.co/ で生成したアプリアイコンをFlutterアプリ内で表示することができます。

icons8.com
canva.com

Coutainer()について具体的に説明してください `Container` ウィジェットは、Flutterフレームワークで他のウィジェットを包むコンテナを作成するために使用されるウィジェットです。`Container` はウィジェットの配置、サイズ、デザインなどのスタイリングを制御するために広く使用されます。以下に具体的な `Container` ウィジェットの使用方法と役割を説明します。

基本的な構文:

Container(
  // プロパティや子ウィジェットを指定する
)

主なプロパティ:

  • alignment: コンテンツの配置方法を指定します（Alignment クラスのインスタンスを使用）。
  • color: コンテナの背景色を指定します。
  • width: コンテナの幅を指定します。
  • height: コンテナの高さを指定します。
  • margin: コンテナの外側の余白を指定します。
  • padding: コンテナ内の余白を指定します。
  • decoration: コンテナの装飾や影、枠線を指定します（BoxDecoration クラスを使用）。

以下に、具体的な例を挙げて Container ウィジェットの使用法を示します。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Container Example'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            margin: EdgeInsets.all(20),
            padding: EdgeInsets.all(10),
            alignment: Alignment.center,
            child: Text(
              'Hello, Container!',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

この例では、Container ウィジェットを使用して中央に青い背景色を持つコンテナを作成しています。コンテナ内にはテキストが配置され、幅や高さ、余白、配置方法などが指定されています。

Container ウィジェットは、他のウィジェットを包むコンテナを作成し、そのコンテナのスタイリングや配置を調整する際に便利です。

Flutterの公式，You Tubeもすごくわかりやすい！

Widget catalog
flutter.dev
Flutter Widget of the Week

昨日に引き続き，The Complete Flutter Development Bootcamp with Dart　で勉強していますが，昨日はなんとかなると思っていたバージョンが古いという問題は，今日になって段々とストレスを感じ始めました．
コース自体はすごく良いのですが，毎回毎回エラーが発生すると時間がかかってしまいます．
そこで，このコースはFluttrの概念を掴むために自分の手では操作せずに，見る専門で行こうと思います．
必要ならば，もう一つ購入したコースを初めていいかと...今日はここまで

  • 1. I Am Rich - How to Create Flutter Apps From Scratch
  • 2. Running Your App on a Physical Device
  • 3. I Am Poor - App Challenge
  • 4. MiCard - How to Build Beautiful UIs with Flutter Widgets
  • 5. Dicee - Building Apps with State
  • 6. Boss Level Challenge 1 - Magic 8 Ball
  • 7. Xylophone - Using Flutter and Dart Packages to Speed Up Development
  • 8. Quizzler - Modularising & Organising Flutter Code
  • 9. Boss Level Challenge 2 - Destini
  • 10. BMI Calculator - Building Flutter UI for Intermediates
  • 11. Clima - Powering Your Flutter App with Live Web Data
  • 12. Boss Level Challenge 3 - Bitcoin Ticker
  • 13. Flash Chat - Flutter x Firebase Cloud Firestore
  • 14. Provider Pattern - State Management
  • 15. Next Steps
  • 16. Final Session - You Did It!
2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1