Flutterの勉強記録

# はじめに
Flutterの勉強の記録です。ここまでのコードで以下のような画面が作れます。
フォントと画像に関しては、2枚目の画像の場所に保存してください（assetsディレクトリは新規で作成）。
物は以下のgithubのassetsフォルダ内にあります。
https://github.com/RivaanRanawat/voice_assistant
youtubeで詳しく解説もされているので、ぜひ見てみてください。記事の最後にリンクを貼っておきます。

<img width="400" alt="スクリーンショット 2023-04-09 6.51.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1850625/b985d763-1bb9-7981-ba5a-b515821fc1f3.png">

<img width="400" alt="スクリーンショット 2023-04-09 7.00.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1850625/6762a459-dffa-b3d5-3bf0-7011e1213494.png">

```pallete.dart
// よく使う色をまとめておきます
import 'package:flutter/material.dart';

class Pallete {
  static const Color mainFontColor = Color.fromRGBO(19, 61, 95, 1);
  static const Color firstSuggestionBoxColor = Color.fromRGBO(165, 231, 244, 1);
  static const Color secondSuggestionBoxColor =
      Color.fromRGBO(157, 202, 235, 1);
  static const Color thirdSuggestionBoxColor = Color.fromRGBO(162, 238, 239, 1);
  static const Color assistantCircleColor = Color.fromRGBO(209, 243, 249, 1);
  static const Color borderColor = Color.fromRGBO(200, 200, 200, 1);
  static const Color blackColor = Colors.black;
  static const Color whiteColor = Colors.white;
}
```

```dart:main.dart
import 'package:flutter/material.dart';
import 'package:voistant/home_page.dart';
import 'package:voistant/pallete.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // エミュレーターの右上に出てくるバナーを消します
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData.light(useMaterial3: true).copyWith(
          scaffoldBackgroundColor: Pallete.whiteColor,
          appBarTheme: const AppBarTheme(
            backgroundColor: Pallete.whiteColor,
          )),
      // 別ファイルのhome_page.dartに書いたクラスを読み込みます
      home: const HomePage(),
    );
  }
}
```

```dart:home_page.dart
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/widgets/placeholder.dart';
import 'package:voistant/pallete.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appbarの文字表示
      appBar: AppBar(
        title: Text(
          "ChatGPT",
        ),
        // ハンバーガーマーク
        leading: Icon(Icons.menu),
      ),
      // 写真の設定
      body: Column(children: [
        Stack(
          children: [
            // アシスタント画像を配置する枠の設定
            Center(
              child: Container(
                height: 120,
                width: 120,
                margin: EdgeInsets.only(top: 10),
                // 画像の背景色
                // decoration: BoxDecoration(
                //   color: Pallete.assistantCircleColor,
                //   shape: BoxShape.circle,
                // ),
              ),
            ),
            // アシスタント画像の設定
            Container(
              height: 120,
              margin: EdgeInsets.only(top: 10),
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                  image: AssetImage(
                    "assets/images/virtualAssistant.png",
                  ),
                ),
              ),
            )
          ],
        ),
        // テキストボックスの作成
        Container(
          // 枠の大きさの設定
          padding: EdgeInsets.symmetric(
            horizontal: 20,
            vertical: 10,
          ),
          // 上の画像との間隔の設定
          margin: EdgeInsets.symmetric(horizontal: 40).copyWith(
            top: 20,
          ),
          decoration: BoxDecoration(
            // 枠線の設定
            border: Border.all(
              color: Pallete.blackColor,
            ),
            // 角の丸み具合の設定
            borderRadius: BorderRadius.circular(20).copyWith(
              // 左上の角だけ丸くしない
              topLeft: Radius.zero,
            ),
          ),
          // 中に入れる文字の設定
          child: Padding(
            padding: EdgeInsets.symmetric(vertical: 10),
            child: Text(
              "Hi! May I help you?",
              style: TextStyle(
                  fontFamily: "Cera Pro",
                  color: Pallete.mainFontColor,
                  fontSize: 20),
            ),
          ),
        ),
        const Text("Please choice below!")
      ]),
    );
  }
}
```

```yaml:pubspec.yaml
# 使用する画像とフォントを、このファイル内で許可してやる必要があります。
name: voistant
description: A new Flutter project.
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1

environment:
  sdk: '>=2.19.3 <3.0.0'

# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  cupertino_icons: ^1.0.2
  flutter:
    sdk: flutter
  speech_to_text: ^6.1.1

dev_dependencies:

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^2.0.0
  flutter_test:
    sdk: flutter

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter packages.
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/images/

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware
  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages
  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # フォントの許可（フォント名と保存してあるパスを入力）
  fonts:
    - family: Cera Pro
      fonts:
        - asset: assets/fonts/Cera-Pro-Bold.otf
        - asset: assets/fonts/Cera-Pro-Medium.otf
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages
```

# 参考
https://www.youtube.com/watch?v=Q_pz4xFow3Q&t=3135s