Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@Shigemaxxx

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

Last updated at Posted at 2023-08-28

これまでの経過

  • Day1(2023/08/20)

  • Day2(2023/08/21)

  • Day3(2023/08/22)

  • Day4(2023/08/23)

  • Day5(2023/08/24)

  • Day6(2023/08/25)

  • Day7(2023/08/26)

    • 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!

Day8(2023/08/28)

昨日は体調不良でお休みしていました．申し訳ありません．
本日から再開いたします．

The Complete Flutter Development Bootcamp with Dart

Column()とRow()について具体的に説明してください `Column` ウィジェットと `Row` ウィジェットは、Flutterフレームワークで複数の子ウィジェットを垂直方向（`Column`）または水平方向（`Row`）に配置するために使用されるウィジェットです。これらのウィジェットを使用することで、画面内のウィジェットを縦や横に並べることができます。

Column ウィジェット:
Column ウィジェットは、複数の子ウィジェットを垂直方向に配置するために使用されます。下から上に向かって配置され、子ウィジェット同士のスペースを均等に分けるか、必要に応じて配置やスペースを調整することができます。

以下に基本的な Column ウィジェットの使用例を示します：

Column(
  children: <Widget>[
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

Row ウィジェット:
Row ウィジェットは、複数の子ウィジェットを水平方向に配置するために使用されます。左から右に向かって配置され、子ウィジェット同士のスペースを均等に分けるか、必要に応じて配置やスペースを調整することができます。

以下に基本的な Row ウィジェットの使用例を示します：

Row(
  children: <Widget>[
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

Column ウィジェットや Row ウィジェットは、通常、他のウィジェットを組み合わせて複雑なUIを構築する際に使用されます。例えば、リストやメニュー、フォームなどのコンポーネントを配置するために利用されます。また、これらのウィジェットは他のウィジェットと組み合わせて、柔軟でダイナミックなレイアウトを作成する際にも役立ちます。

Column()について詳しく教えてください `Column` ウィジェットは、Flutterフレームワーク内で複数の子ウィジェットを垂直方向に配置するためのウィジェットです。つまり、子ウィジェットを上から下に並べることができます。このウィジェットは、垂直方向のレイアウトを構築する際に非常に便利です。

以下に Column ウィジェットの主なプロパティと使用例を示します。

基本構文:

Column(
  children: <Widget>[
    // 子ウィジェットをここに配置
  ],
)

主なプロパティ:

  • children: Column 内に配置する子ウィジェットのリストです。子ウィジェットは上から下に順番に配置されます。

  • mainAxisAlignment: 子ウィジェットを垂直軸（縦方向）に沿ってどのように配置するかを指定します。デフォルトは MainAxisAlignment.start で、上寄せになります。他にも MainAxisAlignment.center（中央寄せ）や MainAxisAlignment.end（下寄せ）などがあります。

  • crossAxisAlignment: 子ウィジェットを水平軸（横方向）に沿ってどのように配置するかを指定します。デフォルトは CrossAxisAlignment.center で、中央寄せになります。他にも CrossAxisAlignment.start（左寄せ）や CrossAxisAlignment.end（右寄せ）などがあります。

以下は具体的な使用例です：

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('Column Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text('Item 1'),
              Text('Item 2'),
              Text('Item 3'),
            ],
          ),
        ),
      ),
    );
  }
}

この例では、Column ウィジェット内に3つのテキストウィジェットを配置しています。mainAxisAlignment と crossAxisAlignment プロパティを使用して、子ウィジェットを中央寄せで配置しています。結果として、3つのテキストが中央に垂直方向に配置されます。

Column ウィジェットは、リストやメニュー、フォームなど、垂直方向のコンポーネントを配置する際に使用されることが多いです。

この２つのサイトだけで何でもできそうな気がしてきた.
flutterawesomeは本当にawesome!!!
Flutter Layout Cheat Sheet
flutterawesome

Icon classについて教えてください `Icon` クラスは、Flutterフレームワークでアイコンを表示するために使用されるウィジェットです。アイコンは、アプリのユーザーインターフェースに視覚的な要素を追加するために広く利用されます。`Icon` ウィジェットは、組み込みのアイコンデザインを使用したり、カスタムのアイコンを表示するために利用されます。

基本構文:

Icon(
  IconData,
  color: Colors.blue,  // オプション: アイコンの色
  size: 24.0,          // オプション: アイコンのサイズ
)

主なプロパティ:

  • IconData: 表示するアイコンのデータ。アイコンを指定するための数値（コードポイント）やアイコンの名前を指定します。例えば、Icons.star といった組み込みのアイコンを使用することができます。

  • color: アイコンの色を指定します。デフォルトはウィジェットの親のテーマに従った色になりますが、必要に応じて任意の色を指定できます。

  • size: アイコンのサイズを指定します。デフォルトはウィジェットの親のテーマに従ったサイズになりますが、必要に応じて任意のサイズを指定できます。

以下は、Icon ウィジェットの使用例です：

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('Icon Example'),
        ),
        body: Center(
          child: Icon(
            Icons.star,
            color: Colors.yellow,
            size: 48.0,
          ),
        ),
      ),
    );
  }
}

この例では、黄色い星のアイコンを表示しています。Icons.star はFlutterが提供する組み込みの星のアイコンです。color プロパティで色を指定し、size プロパティでサイズを指定しています。

Icon ウィジェットを使用することで、アプリ内に簡単に組み込みまたはカスタムのアイコンを表示することができます。

googlefonts
Material Sybols and Icons
material design palette
Material Design 2
Material Design 3

Expand classとはなんですか？ `Expand` クラスは、Flutterフレームワークでウィジェットのサイズを拡張するために使用されるウィジェットです。`Expand` ウィジェットは、`Flex` や `Column`、`Row` などの親ウィジェット内で使用されることが一般的です。子ウィジェットを包み、親ウィジェット内の空きスペースを埋めるように子ウィジェットのサイズを拡張します。

Expand ウィジェットは、ウィジェットツリー内の特定の箇所で柔軟なレイアウトを実現するのに役立ちます。特に、水平方向や垂直方向に広がる余白を埋めるために使用されます。

基本的な構文:

Expand(
  child: Widget,
)

主なプロパティ:

  • child: Expand ウィジェットの中に配置する子ウィジェットを指定します。

以下は、Expand ウィジェットの使用例です。この例では、Column 内の子ウィジェットを均等な割合で拡張して、空きスペースを埋めています。

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('Expand Example'),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              Container(
                color: Colors.blue,
                height: 100,
              ),
              Expand(
                child: Container(
                  color: Colors.green,
                ),
              ),
              Container(
                color: Colors.blue,
                height: 100,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

この例では、Expand ウィジェットを使用して緑色のコンテナが空きスペースを埋めるように拡張されています。その前後に青いコンテナがありますが、Expand ウィジェットを使わない場合と比較して、空きスペースを均等に拡張することができます。

flutterawesomeはアプリ開発のヒントになりそう．
明日はThe Complete Flutter Development Bootcamp with Dartも視聴しつつ，アプリ開発にそろそろ取り掛からないと夏休みが終わってしまう．
git?github?の使い方も，そもそもなんのために存在しているかも理解していないままアプリが作れるのかは謎ではあるが，とりあえずやってみようと思います．
おそらく，明日はエラーばかりでアプリ開発が嫌になりそう...今日はここまで

  • 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
3
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
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?