shownote 님의 블로그

Flutterを初めて始めるとき、プロジェクトの作成とアプリを起動して画面が表示される過程をメモしておく。0.　事前準備Flutterプロジェクトを実行する前に次のツールが必要で、インストール済みかを確認しておくといい。ツールのインストール確認とコマンド Flutter SDKflutter --versionでバージョン確認する。Xcode（IOS実行用）macOSに標準で入っているか、xcode-select --installでインストールするか、App Storeで検索して追加する。Android Studio（Android実行用）インストールしてAVD（エミュレーター）を設定する。VS Code（またはAndroid Studio）作業しやすい IDE を使う。ターミナルで次のコマンドで Flutter が正しく入っているかを確認する。flutter doctor 1.　新..

Flutterでアプリを開発していると、パッケージを追加したりプロジェクト設定を変更したあとにアプリが動かなくなったりエラーが出ることがある。こういうときに必要な基本コマンドがあり、特に iOS と Android では処理方法が少し違うので分けて管理する必要がある。今回は、flutter clean、flutter pub get、pod install などのコマンドをいつ、なぜ実行するのかを分かりやすくまとめる。パッケージを追加・修正・削除したあとにやる基本作業パッケージを追加・削除・修正したときは、Flutterプロジェクトをきれいに初期化して新しく依存関係を取得する必要がある。これはiOSとAndroidの両方で共通して必要になる。flutter cleanflutter pub getflutter clean：前のビルドファイルやキャッシュファイルをすべて削除して、プロジ..

macでVSCodeを使ってFlutter 開発をしていたとき、作業が楽になるメニューやショートカットをまとめる。 プラグインのインストールView > extenteentions(shift + command + X)：FlutterやDartなどのプラグインを設置する。 コマンドパレットView > Commend Palette (shift + command + P)：コマンドパレットを開く。ここから「Flutter: New Project」や「Flutter: Run」などを選べる。ソースコードフォーマットShift + Option + F：でコードをフォーマットする。コードを自動整形して見た目が整うので便利になる。 エミュレーターの起動コマンドパレットから「Flutter: Launch Emulator」を選んでシミュレーターを起動する。iOS Simulato..

プロジェクト直下にある各フォルダー（android, ios, web, windows など）は、後でアプリを配布するときに重要になる。（開発中にはこれらのフォルダで作業することはあまりない）フォルダーの下にあるファイルは 設定ファイル（configurationファイル）.metadataは修正してはいけない。Flutterによる情報やメタデータが自動で管理されている。analysis-optionsはアプリを実行する前にエラーなどを教えてくれる。基本的にはデフォルト設定のまま使えばいいけど、もっと高度な開発ではカスタマイズして使える。プロジェクト名.iml（例: first_app.iml）ファイルは多くのメタデータや情報が入っていて、他のプラットフォームでもFlutterアプリを作れるようになっている。pubspec.yamlファイルはたまに修正して使う必要がある。画像などを使..

FlutterでUIを作るとき、余白の順番は Padding → Border → Margin になっている。（これはHTMLも同じ順番）Paddingは内側、Marginは外側、Borderはその境界だった。PaddingとMarginの違い境界はBorder、内側はPadding、外側はMargin。Padding = 内側の余白Margin = 外側の余白EdgeInsetsの種類EdgeInsets.all(20) → 全方向に同じ余白EdgeInsets.symmetric(horizontal: 20, vertical: 16) → 横と縦を別で指定EdgeInsets.only(top: 10, left: 8) → 特定の方向だけreturn Card( child: Padding( padding: const EdgeInsets.symmetric(..

Row: 자식 위젯들을 가로 방향으로 나열Column: 자식 위젯들을 세로 방향으로 나열두 위젯 모두 children 속성을 통해 여러 개의 자식 위젯을 받을 수 있으며, 자식 위젯은 또 다른 Row나 Column이 될 수 있어 중첩된 레이아웃 구성이 가능하다. 예제를 하다 보니 이러한 부분들이 너무 헷갈리기도 해서 내용 정리를 해서 나중에 내가 궁금할 때 찾아보기 위한 용도록 작성한다.0. 주요 속성 간단 정리 mainAxisAlignment: 자식 위젯들을 주 축 방향으로 정렬crossAxisAlignment: 자식 위젯들을 교차 축 방향으로 정렬verticalDirection: 자식 위젯들의 세로 방향 배치 순서를 결정 1. mainAxisAlignment (주 축 정렬)자식 위젯들을 주 축(m..

VS Code로 Flutter 프로젝트를 만들고, 실행할때 android에서는 문제가 없이 실행이 되나 IOS에서만 에러가 발생할 때가 있다.나중을 위해 메모 한다.이부분을 확인하기 위해 여러군데 검색을 했었다. 이때, flutter와 xcode의 버전이 맞지 않아서 발생하는 문제라고 생각했었는데, 그렇지 않았었기에, 방법을 작성한다.이럴 때 기본적으로 Xcode 캐시 완전 제거한다던가의 행위들은 모두 했었으나 해결이 되지 않았었고, Xcode의 Drived Data를 변경하고 해결했다.1. (결론 먼저!!) 해결한 방법Xcode를 실행. Xcode > Setting 클릭 Loation을 클릭하고, Drived Data를 변경해주면 된다. 라고 되어 있던것을 아래와 같이 다른 폴더로 변경 이렇게 하고 ..

Flutter를 처음 시작할 때, 프로젝트 생성 및 앱 실행 화면을 확인하는 과정을 참고를 위해 메모 한다.0. 사전 준비Flutter 프로젝트를 실행 전 아래 도구가 필요하니 미리 설치해 두고, 설치가 되어있는지 확인하면 좋다.도구설치 여부 확인 및 명령어Flutter SDKflutter --versionXcode (IOS 실행용)macOS에 기본 설치 후 xcode-select --installAndroid Studio (Android 실행용)설치 후 AVD 설정 필요VS Code (또는 Android Studio)편한 IDE 사용터미널에서 아래 명령어로 Flutter가 잘 설치됐는지 확인flutter doctor 1. 새 Flutter 프로젝트 만들기터미널을 열고 프로제그를 생성할 폴더에 이동 한 ..

Flutter로 앱을 개발하다 보면, 패키지를 추가하거나 프로젝트 설정을 변경한 후 앱이 실행되지 않거나 에러가 발생하는 경우가 있다.이럴 때 필요한 기본적인 명령어들이 있으며, 특히 iOS와 Android에서는 약간씩 처리 방법이 다르기 때문에 구분해서 관리해야 한다.이번 글에서는 flutter clean, flutter pub get, pod install 등의 명령어를 언제, 왜 실행해야 하는지 쉽게 정리한다.1. 패키지 추가, 수정, 삭제 후 기본적으로 해야 할 작업패키지를 추가하거나 삭제, 수정한 경우에는 Flutter 프로젝트를 깨끗하게 초기화하고 새로 의존성을 받아야 한다.이 작업은 iOS와 Android 모두 공통적으로 필요하다.flutter cleanflutter pub getflutte..

mac에서 vscode를 이용한 Flutter 개발 편의를 위한 메뉴 및 단축키 정리View > extenteentions(shift + command + X)  : 플러터 등 각종 플러그인 설치View > Commend Palette (shift + command + P) : VS 명령어 창. 여기에서 flutter run, format document등 명령어를 바로 실행 할 수 있다.  View > Applearance > Status Bar : 툴 아래부분에 상태바를 표시View > Applearance > Panel(command + j) : Debug 콘솔, Terminal 창등 표시command + P : 파일 찾기