MENU

これだけは知っておきたいFlutterの基礎

Flutter

これだけは最低限知っておきたい、Flutterの基礎についておさらいします。

目次

Flutterとは

FlutterはGoogleが開発したオープンソースのUIソフトウェア開発キットであり、一つのコードベースからモバイル、ウェブ、デスクトップのアプリケーションを開発することのできるフレームワークです。

ウィジェットとは

Flutterのウィジェットはアプリケーションの基本的であり、UI（ユーザーインターフェース）を構築するための要素です。ウィジェットは画面上の各アイテムを表現するために使用され、ボタン、テキストフィールド、スライダー、スクロールバーなどが含まれます。ウィジェットはまた、レイアウトの構造や、テーマ、スタイル、アニメーションなども制御します。

ウィジェットの種類

  • StatelessWidget: この種類のウィジェットは不変であり、一度作成されるとその状態は変わりません。
  • StatefulWidget: このウィジェットは状態を持ち、その状態が変更されるとウィジェットは再構築されます。

ウィジェットツリー

  • ウィジェットは階層的な構造を持ち、ウィジェットツリーと呼ばれるものを形成します。
  • ウィジェットツリーは、親ウィジェットが子ウィジェットを持ち、それらがさらに他のウィジェットを持つことができる構造を持っています。

レイアウトウィジェット

  • レイアウトウィジェットは、他のウィジェットのサイズ、位置、および配置を制御します。
  • 例えば、Row, Column, Stack, ListView, GridView などのウィジェットがあります。

Material/Cupertinoウィジェット

  • FlutterはMaterial DesignおよびCupertino（iOSスタイル）ウィジェットを提供し、これにより各プラットフォームのネイティブな外観を模倣することができます。

カスタムウィジェット

  • カスタムウィジェットを作成することも可能で、これにより独自のUIコンポーネントを作成し、再利用することができます。

ウィジェットのプロパティ

  • ウィジェットは通常、buildメソッドをオーバーライドし、現在のウィジェットの描画を制御します。

Flutterのウィジェットは非常に効果的で強力であり、それらは独自のUIを簡単かつ効率的に構築するための基盤を提供します。ウィジェットのコンセプトはFlutterの核心であり、このフレームワークの基本的な理解と効果的な利用のための鍵となります。

Flutterのプロジェクト構成

Flutterのプロジェクトは、特定のディレクトリとファイルの構造に従って組み立てられています。以下は、基本的なFlutterプロジェクトの構成についての説明です。

lib/ディレクトリ

  • このディレクトリは、プロジェクトの主要なDartコードが格納される場所です。
  • main.dartファイルは、通常このディレクトリ内にあり、アプリケーションのエントリーポイントとなります。

test/ディレクトリ:

  • このディレクトリは、プロジェクトのテストコードを含んでいます。
  • Flutterはウィジェットテスト、ユニットテスト、統合テストをサポートしています。

android/ディレクトリとios/ディレクトリ:

  • これらのディレクトリは、それぞれAndroidとiOSのネイティブコードを含んでいます。
  • Flutterプロジェクトは、これらのディレクトリを通じてネイティブの機能にアクセスすることができます。

web/ディレクトリ

  • lutterプロジェクトがウェブをターゲットにしている場合、このディレクトリはウェブ固有のコードを含んでいます。

assets/ディレクトリ

  • このディレクトリは、アプリケーションで使用するアセット（画像、フォント、など）を格納する場所です。

pubspec.yamlファイル

  • このファイルはプロジェクトの設定を含んでいます。
  • 依存関係、アセット、バージョン情報などをここに定義します。

Flutterの基本文法

FlutterはDart言語を使用しています。そのため、Flutterの基本文法はDartの文法に基づいています。以下に、Flutter（およびDart）の基本文法についていくつかの主要な点を列挙します。

変数宣言

Dartでは、変数を宣言するためにvarキーワードまたは明示的な型を使用します。

var name = 'Flutter';
String name = 'Flutter';

定数

定数値を宣言するには、constキーワードを使用します

const pi = 3.14;

関数

Dart関数は、return型、関数名、パラメータリストを持ちます。

void greet(String name) {
  print('Hello, $name');
}

クラスとオブジェクト

Dartはオブジェクト指向言語であり、クラスとオブジェクトをサポートしています。

class Person {
  String name;
  int age;

  Person(this.name, this.age);
}

var person = Person('John', 25);

コンストラクタ

Dartクラスはコンストラクタを持ち、これはオブジェクトの初期化に使用されます。

class Person {
  String name;
  int age;

  Person(this.name, this.age);
}

制御フロー

Dartはif、else、switch、for、whileおよびdo-while文をサポートしています。

if (age > 18) {
  print('Adult');
} else {
  print('Not an adult');
}

コレクション

Dartはリスト（配列）、セット、およびマップをサポートしています。

var list = [1, 2, 3];
var set = {1, 2, 3};
var map = {'key': 'value'};

非同期処理

DartはFutureおよびStreamを使用した非同期プログラミングをサポートしています。

Future<void> fetchData() async {
  var data = await someAsyncFunction();
  print(data);
}

Flutterの命名規則

アッパーキャメルケース

アッパーキャメルケースとは、先頭大文字と単語と単語のつなぎ目（単語の先頭）が大文字で、それ以外の文字が小文字の記入方法を言います（パスカルケースともいいます）。

クラス名

クラス名はアッパーキャメルケースを使用します。

class MyClass {
  // ...
}

列挙型（Enum）

Enum(列挙型)とは、複数の定数をひとつにまとめておくことができる型のことです。 Enumで定義する定数のことを列挙子と呼びます。

ローワーキャメルケース

ローワーキャメルケースとは、先頭が小文字で、単語と単語のつなぎ目（単語の先頭）が大文字で、それ以外の文字が小文字の記入方法を言います（単純にキャメルケースともいいます）。

プロパティ名

プロパティ名はローワーキャメルケースを使用します。

class MyClass {
  int myProperty;
  
  void setMyProperty(int value) {
    myProperty = value;
  }
  
  int getMyProperty() {
    return myProperty;
  }
}

関数（メソッド）名

関数名やメソッド名はローワーキャメルケースを使用します。

void myFunction() {
  // ...
}
void myMethod() {
  // ...
}

スネークケース

スネークケース（Snake Case）は、単語をアンダースコア（_）で区切る命名規則です。この規則では、全ての文字は小文字であり、単語の区切りはアンダースコアで示されます。

ライブラリやパッケージ名

ライブラリやパッケージはスネークケースを使用します。

my_package

フォルダやファイル名

フォルダやファイル名はスネークケースを使用します。

my_folder
my_file

Flutterの基礎についておさらいをしました。

Flutter
Flutter
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

コメント

コメントする

目次