Zenn
Closed10

Flutter 再入門

nownabenownabe

とりあえず Flutter のサイトに行くと、Installation guides があったのでやってみる。

flutter コマンドは入れた気がするので実行してみると、

~
❯ flutter
  ╔════════════════════════════════════════════════════════════════════════════╗
  ║ A new version of Flutter is available!                                     ║
  ║                                                                            ║
  ║ To update to the latest version, run "flutter upgrade".                    ║
  ╚════════════════════════════════════════════════════════════════════════════╝

とのことだったので、flutter upgrade を実行。


~ 25s
❯ flutter upgrade
Upgrading Flutter from /home/nownabe/snap/flutter/common/flutter...
Downloading Linux x64 Dart SDK from Flutter engine f15f824b57476e369b5e656f53d4c431c5b04b9a...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed

  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
  9  208M    9 20.5M    0     0  19.2M      0  0:00:10  0:00:01  0:00:09 19.2M
 25  208M   25 53.6M    0     0  25.9M      0  0:00:08  0:00:02  0:00:06 25.9M
 41  208M   41 85.7M    0     0  27.9M      0  0:00:07  0:00:03  0:00:04 27.9M
 54  208M   54  113M    0     0  27.9M      0  0:00:07  0:00:04  0:00:03 27.9M
 64  208M   64  134M    0     0  26.5M      0  0:00:07  0:00:05  0:00:02 26.9M
 73  208M   73  152M    0     0  25.0M      0  0:00:08  0:00:06  0:00:02 26.2M
 82  208M   82  171M    0     0  24.2M      0  0:00:08  0:00:07  0:00:01 23.4M
 95  208M   95  198M    0     0  24.6M      0  0:00:08  0:00:08 --:--:-- 22.5M
100  208M  100  208M    0     0  24.4M      0  0:00:08  0:00:08 --:--:-- 21.1M
Building flutter tool...

Upgrading engine...
Downloading Material fonts...                                      334ms
Downloading Gradle Wrapper...                                      224ms
Downloading android-arm-profile/linux-x64 tools...                 813ms
Downloading android-arm-release/linux-x64 tools...               1,161ms
Downloading android-arm64-profile/linux-x64 tools...               245ms
Downloading android-arm64-release/linux-x64 tools...               228ms
Downloading android-x64-profile/linux-x64 tools...                 566ms
Downloading android-x64-release/linux-x64 tools...                 251ms
Downloading android-x86 tools...                                   661ms
Downloading android-x64 tools...                                   907ms
Downloading android-arm tools...                                   622ms
Downloading android-arm-profile tools...                           347ms
Downloading android-arm-release tools...                           315ms
Downloading android-arm64 tools...                                 729ms
Downloading android-arm64-profile tools...                       1,099ms
Downloading android-arm64-release tools...                         183ms
Downloading android-x64-profile tools...                           855ms
Downloading android-x64-release tools...                           429ms
Downloading android-x86-jit-release tools...                       862ms
Downloading Web SDK...                                           1,964ms
Downloading CanvasKit...                                           736ms
Downloading package sky_engine...                                   60ms
Downloading flutter_patched_sdk tools...                           230ms
Downloading flutter_patched_sdk_product tools...                   199ms
Downloading linux-x64 tools...                                   1,205ms
Downloading linux-x64/linux-x64-flutter-gtk tools...             1,064ms
Downloading linux-x64-profile/linux-x64-flutter-gtk tools...        457ms
Downloading linux-x64-release/linux-x64-flutter-gtk tools...        470ms
Downloading linux-x64/font-subset tools...                         207ms

Flutter 3.0.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision cd41fdd495 (7 days ago) • 2022-06-08 09:52:13 -0700
Engine • revision f15f824b57
Tools • Dart 2.17.3 • DevTools 2.12.2

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.2, on Ubuntu 20.04.4 LTS 5.13.0-40-generic, locale en_US.UTF-8)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/linux#android-setup for more details.
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.67.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

! Doctor found issues in 1 category.

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ Note: The Google Privacy Policy describes how data is handled in this      ║
  ║ service.                                                                   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://flutter.dev/docs/reference/crash-reporting                         ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://policies.google.com/privacy                                        ║
  ╚════════════════════════════════════════════════════════════════════════════╝

Android Toolchainに問題があるっぽい。とりあえず表示されているコマンドを実行。

~ 1m 13s
❯ sdkmanager --install "cmdline-tools;latest"
zsh: command not found: sdkmanager

~
❯ flutter doctor --android-licenses
Android sdkmanager not found. Update to the latest Android SDK and ensure that the cmdline-tools are installed to
resolve this.

やっぱりだめなので、ここをまずやらないと。

nownabenownabe

Linux install | Flutter

Flutter インストールガイドの Android setup をやる。

  1. 昔インストールしたAndroid Studioのディレクトリを削除して、最新のAndroid Studioを~/opt/android-studioに展開
  2. alias android-studio='$HOME/opt/android-studio/bin/studio.sh'
  3. rm -rf ~/.config/Google
  4. android-studio

~
❯ flutter config --android-studio-dir $HOME/opt/android-studio
Setting "android-studio-dir" value to "/home/nownabe/opt/android-studio".

You may need to restart any open editors for them to read new settings.

~
❯ flutter doctor                                              
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.2, on Ubuntu 20.04.4 LTS 5.13.0-40-generic, locale en_US.UTF-8)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/linux#android-setup for more details.
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.67.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

! Doctor found issues in 1 category.

んー変わらず。

Android Studioで、

Settings > Appearance & Behavior > System Settings > Android SDK > SDK Tools

の Android SDK Command-line Tools (latest) をクリックして Apply

~
❯ flutter doctor         
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.2, on Ubuntu 20.04.4 LTS 5.13.0-40-generic, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.67.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

tada~ :tada:

nownabenownabe

Get started 的に次は Set up an editor | Flutter だったので VS Code でやっていく。

起動したらなぜか勝手にFlutter Extensionインストールされた。

おわり。

nownabenownabe

Get started - 3. Test drive やっていく。
Test drive | Flutter

Running Gradle task 'assembleDebug' が長い、重い

デスクトップPCでやったほうがいいかもなー。
iOSもやるならMacいるからMac買ったほうがいいのか…？でもいまさらMac使いたくないなー。

ビルド重いだけかと思ったけど、エミュレーターがまともに動かん。。。
ラップトップで開発するのはなかなか厳しそう

nownabenownabe

というわけでDesktop PCで再セットアップ完了。
全然早い。

Get startedのWrite your first app

Write your first Flutter app, part 1 | Flutter

何回見ても、StateがWidgetをビルドするのがスッキリしない。Stateちゃうやん。

Language tour | Dart

Libraries not only provide APIs, but are a unit of privacy: identifiers that start with an underscore (_) are visible only inside the library.

nownabenownabe

Layouts in Flutter | Flutter

  • Widgets are used for both layout and UI elements.
  • Conatiner customize its child widget, adding padding, margins, borders or background color.

Lay out a widget

1. Select a layout widget

2. Create a visible widget

3. Add the visible widget to the layout widget

  • child - Center, Container, ...
  • children - Row, Column, ListView, Stack, ...

4. Add the layout widget to the page

  • For a Material app: Scaffold class - material library - Dart API
    * banner, background color, and API for adding drawers, snack bars, bottom sheets.
  • Non-Material apps
    * If AppBar, title or background are required, 自分で実装する必要がある

Lay out multiple widgets vertically and horizontally

Aligning widgets

Sizing widgets

Packing widgets

  • mainAxisSize: MainAxisSize.min

Nesting rows and columns

  • DefaultTextStyle

Common layout widgets

Standard widgets

  • Container: padding, margins, borders, background color, or other decorations
  • GridView
  • ListView
  • Stack

Material widgets

  • Card
  • ListTile

Container

GridView

ListView

Stack

Card

ListTile

Constraints

Understanding constraints | Flutter

感想

  • Material UI (MUI) 使ってたけど、だいたい同じ感じかな
nownabenownabe

Dart Language Tour

Language tour | Dart

読んだ。言語として特に目新しいものはなくて、C++とJavaをベースにJavaScriptにTranspileできるように仕立てて、それからアップデートごとにいろんな言語のいいところを取り入れていった、みたいな印象。

nownabenownabe

Building layouts | Flutter

What you'll learn

  • layout mechanism
  • widgets layout vertically and horizontally

Step 0: Create the app base code

Step 1: Implement the title row

  • Break down the layout
    * Identify the rows and columns
    * Gridはあるか？
    * 要素のOverlappingはあるか？
    * Tabは必要か？
    * alignment, padding, bordersが必要な領域

Step 2: Implement the title row

Step 3: Implement the button row

Step 4: Implement the text section

Step 5: Implement the image section

Step 6: Final touch

このスクラップは2022/07/16にクローズされました