Zenn
Open6

Flutter入門

Flutter
Dart
みどりみどり

Flutterとは

Flutterは、Googleが開発したオープンソースのユーザーインターフェース（UI）フレームワーク

Flutterの利点

  • iOS、Android、Web、デスクトップアプリケーションの同時開発が可能
  • コードの変更をリアルタイムで変更できる
  • 容易にUIが作成できる
みどりみどり

Widgetとは

  • FlutterにおけるUIを構築する部品
  • それぞれのWidget毎にプロパティが予め用意されており、色や大きさや動きを設定する
  • Widgetは親-子の状態でツリー構造で構築される
  • ボタンや文字など部品と、縦並び横並びの配置を設定する部品とその他の部品がある

おすすめの記事

配置などのWidgetについての記事はこちら
Widget一覧の記事はこちら

イメージ

オレンジが縦並び配置の設定Widget（Column）、水色が横並び配置の設定Widget（Row）、緑がボタンや文字などのWidget

みどりみどり

必ずしもそうじゃないし正しいわけでもないけど初心者はこう書いてみようの回

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
// ここに変数

// ここに関数

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
　　　　　　// この中にWidgetを足していく
          ],
        ),
      ),
    );
  }
みどりみどり

変数

final String name = 'みどり';
final String hello = "こんにちは";
final int age = 22;
final double height = 160;
final bool isMarried = false;

おすすめの記事はこちら

モデルクラス

データの集合体のこと

class Person {
  // コンストラクタ
  Article({
    required this.namae,
    required this.age,
  });

  final String name;
  final int age;
}

関数

<戻り値の型> <関数名>([<引数の型> <引数値>],[<引数の指定>]){
    return <戻り値>;
}

String helloWorld(String hello){
  return hello;
}
みどりみどり

Firebaseとは

モバイル・Webアプリケーションのためのバックエンド環境を提供するサービス

Firebaseの導入

おすすめの記事はこちら

Firebaseで追加、更新、取得

こちらの記事の前半を参考に