Category: Flutter

【flutter】ボタンウィジェット

class _MyHomePageState extends State<MyHomePage> {

  static var _message = "ok.";
  static var _janken = <String>['グー','チョキ','パー'];
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('App Name'),
      ),
      body:
      new Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(20.0),
              child: Text(
                _message,
                style: TextStyle(
                  fontSize: 32.0,
                  fontWeight: FontWeight.w400,
                  fontFamily:"Robot"
                ),
              ),
            ),
              TextButton(
                onPressed: buttonPressed,
                child: Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Text(
                    "Push me!",
                    style: TextStyle(
                      fontSize: 32.0,
                      color: const Color(0xff000000),
                      fontWeight: FontWeight.w400, fontFamily: "Robot"),
                )
              )
            )
          ]
        ),

      ),

    );
  }

  void buttonPressed(){
    setState((){
      _message = (_janken..shuffle()).first;
    });
  }
}

              TextButton(
                onPressed: buttonPressed,
                child: Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Icon(
                    Icons.android,
                    size: 50.0,
                )
              )
            )

elevatedbutton, iconButtonなどがある

【Flutter】Dart入門

void main() {
  print("Hello!");
}

void main() {
  const a = 12;
  const int b = 34;
  int c = 56;
  var x = a * b ~/ c;
  print(x);
}

void main() {
  var arr = <int>[1,2,3];
  arr[0] = arr[1] + arr[2];
  print(arr);
}

void main() {
  var map = {"A":1, "B":2, "C":3};
  map["total"] = map["A"]! + map["B"]! + map["C"]!;
  print(map);
}

setterとgetter

void main() {
  Person me = Person("Taro", 39);
  me.say();
  me.birth = 1999;
  me.say();
}

class Person {
  String _name;
  int _age;
  
  int get birth => 2022 - _age;
  set birth(int n) => _age = 2022 - n;
  
  Person(this._name, this._age);
  
  void say() {
    print("Hi, I'm $_name. I was born in $birth ($_age years old).");
  }

setterとgetter

void main() {
  Exchange salary = Exchange(1000000, 144.5);
  salary.say();
  salary.dollar = 10000;
  salary.say();
}

class Exchange {
  double _yen;
  double _rate;
  
  double get dollar => _yen / _rate;
  set dollar(double n) => _yen = n * _rate; 
  
  Exchange(this._yen, this._rate);
  
  void say() {
    print("1ドル $_rate の時、$_yen 円は $dollar ドルです。");
  } 
}

1ドル 144.5 の時、1000000 円は 6920.415224913495 ドルです。
1ドル 144.5 の時、1445000 円は 10000 ドルです。

### 継承
継承の元となるclassをスーパークラスという

void main() {
  Person me = Person("Taro", 39);
  me.say();
  Student you = Student("Hanako", 16, 2);
  you.say();
}

class Person {
  String _name;
  int _age;
  
  Person(this._name, this._age);
  
  void say() {
    print("Hi, I'm $_name. I'm $_age years old.");
  }
}

class Student extends Person {
  int _grade;
  
  Student(name, age, this._grade):super(name, age);
  
  @override
  void say() {
    print("Hi, I'm $_name. I'm $_age years old. I'm $_grade grade student.");
  }
}

void main() {
  Company jr = Company("東日本旅客鉄道","渋谷区");
  jr.say();
  Airline ana = Airline("全日本空輸","港区","スターアライアンス");
  ana.say();
}

class Company {
  String _name;
  String _address;
  
  Company(this._name, this._address);
  
  void say() {
    print("$_name : 所在地 $_address");
  }
}

class Airline extends Company {
  String _alliance;
  
  Airline(name, address, this._alliance):super(name, address);
  
  @override
  void say() {
    print("$_name : 所在地 $_address $_alliance");
  }
}

東日本旅客鉄道 : 所在地 渋谷区
全日本空輸 : 所在地 港区 スターアライアンス

void main() {
  const data = [12, 34, 566, 78, 90, 100];
  var total = 0;
  data.forEach((n){
    total += n;
  });
  print("total is $total.");
}

【Flutter】ウィジェットの基本レイアウトを考える

flutter studioを利用する
https://flutterstudio.app/

source codeに変換する

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Generated App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
        primaryColor: const Color(0xFF2196f3),
        accentColor: const Color(0xFF2196f3),
        canvasColor: const Color(0xFFfafafa),
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    @override
    Widget build(BuildContext context) {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text('App Name'),
          ),
        body:
          new Text(
          "Hello Flutter!",
            style: new TextStyle(fontSize:32.0,
            color: const Color(0xFF000000),
            fontWeight: FontWeight.w700,
            fontFamily: "Roboto"),
          ),
    
      );
    }
}

Center

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Generated App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
        primaryColor: const Color(0xFF2196f3),
        accentColor: const Color(0xFF2196f3),
        canvasColor: const Color(0xFFfafafa),
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    @override
    Widget build(BuildContext context) {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text('App Name'),
          ),
        body:
          new Center(
            child:
              new Text(
              "qWerty1",
                style: new TextStyle(fontSize:12.0,
                color: const Color(0xFF000000),
                fontWeight: FontWeight.w200,
                fontFamily: "Roboto"),
              ),
    
          ),
    
      );
    }
}

Column

class _MyHomePageState extends State<MyHomePage> {
    @override
    Widget build(BuildContext context) {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text('App Name'),
          ),
        body:
          new Column(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              new Text(
              "one",
                style: new TextStyle(fontSize:12.0,
                color: const Color(0xFF000000),
                fontWeight: FontWeight.w200,
                fontFamily: "Roboto"),
              )
            ]
    
          ),
    
      );
    }
}

【Flutter】StatefulWidget 複雑な値の利用

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  final title = 'Flutterサンプル';

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(
        title: this.title,
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    title ='Flutter Demo'
}): super();

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

class Data {
  int _price;
  String _name;
  Data(this._name, this._price): super();

  @override
  String toString() {
    return _name + ':' + _price.toString() + '円';
  }
}

class _MyHomePageState extends State<MyHomePage> {
  static final _data = [
    Data('Apple',200),
    Data('Orange',150),
    Data('Peach',300)
  ];
  Data _item = _data[0];

  void _setData(){
    setState((){
      _item = (_data..shuffle()).first;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold (
      appBar: AppBar(
        title: Text('Set data'),
      ),
      body: Text(
        _item.toString(),
        style: TextStyle(fontSize:32.0),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _setData,
        tooltip: 'set message',
        child: Icon(Icons.star),
      ),
    );
  }
}

【Flutter】StatefulWidgetについて

class ${widgetClass} extends StatefulWidget {
	
	@override
	ステートクラス createState() => ステートクラス();
}

stateクラスの場合は、Widget build(BuildContent context) だった

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  final title = 'Flutterサンプル';
  final message = 'サンプルメッセージ';

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(
        title: this.title,
        message: this.message
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;
  final String message;
  const MyHomePage({
    Key? key,
    required this.title,
    required this.message
}): super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold (
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Text(
        widget.message,
        style: TextStyle(fontSize:32.0),
      )
    );
  }
}

_MyHomePageState createState() => _MyHomePageState(); のところをステートの処理に従って変化するよに処理を作成すれば良い

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  final title = 'Flutterサンプル';

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(
        title: this.title,
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    required this.title,
}): super();
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  String _message = 'Hello!';

  void _setMessage(){
    setState((){
      _message = 'タップしました！';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold (
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Text(
        _message,
        style: TextStyle(fontSize:32.0),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _setMessage,
        tooltip: 'set message',
        child: Icon(Icons.star),
      ),
    );
  }
}

Flutterとは

### Flutterの特徴
Flutterはマルチプラットフォームのための開発環境
SDKにより専用のAPIを提供している
Androidで採用されているマテリアルデザインをベースに設計しているが、iOS用のクパティーノというUIフレームワークを用意している
開発言語はDart
プログラムをプラットフォームごとにネイティブコードにコンパイルする
IntelliJ(Android Studio)/Visual Studio Codeに対応

### Flutter開発に必要なもの
JDK
Dart
Flutter SDK
IntelliJ(Android Studio)/Visual Studio Code
Visual Studio
Xcode

$ java -version
openjdk version “18.0.2.1” 2022-08-18
OpenJDK Runtime Environment Homebrew (build 18.0.2.1+0)
OpenJDK 64-Bit Server VM Homebrew (build 18.0.2.1+0, mixed mode, sharing)

flutterをdownload
https://docs.flutter.dev/get-started/install

パスを通す
$ vi ~/.bash_profile
export PATH=$PATH:/Users/mac/flutter/flutter/bin
$ source ~/.bash_profile
$ flutter upgrade

intelliJ からdownload
https://www.jetbrains.com/ja-jp/idea/

main.dart

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: Text(
        'hello, Flutter world!!',
        style: TextStyle(fontSize:32.0),
      ),
    );
  }
}

Flutterはwidgetという部品の組み合わせによって作成される
widget treeによって記述する

ウィジェットによって記述
mainはアプリ起動時に呼び出される関数

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

StatelessWidgetはステート(状態を表す値)を持たないwidgetのベースとなるクラス
StatelessWidgetかStatefulWidgetのいずれかを継承して作成する
MaterialAppというインスタンスが返されている

class ${className} extends StatelessWidget {
	
	@override
	Widget build(BuildContext context) {
		return MaterialApp(...略...),
	}
}

titleはアプリケーションのタイトル、homeがwidget
Textウィジェットを指定

    return const MaterialApp(
      title: 'Flutter Demo',
      home: Text(
        'hello, Flutter world!!',
        style: TextStyle(fontSize:32.0),
      ),
    );

### アプリの構造
– アプリケーションはmain関数として定義
– runApp関数では、StatelessWidget継承クラスのインスタンスを引数に指定
– StatelessWidget継承クラスにはbuildメソッドを用意する
– MaterialAppの引数homeに、実際にアプリ内に表示するwidgetを設定する

標準的なwidgetはwidget.dartというパッケージにまとめられている
material.dartとcupertino.dartが用意されている

ScaffoldとAppBar

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text("Hello Flutter!"),
        ),
        body: Text(
          'hello, Flutter world!!',
          style: TextStyle(fontSize:32.0),
        ),
      ),
    );

Scaffoldは建築現場の足場
Scaffoldには基本的なデザインとレイアウトが組み込まれている
Scaffoldでは Scaffold(appBar:, body:)としてインスタンスを作成する

空白エリアの表示を担当するのがbody