【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part18 Single-child layout widgets

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part18 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part17 Single-child layout widgets

引き続き、Single-child layout widgetsについて学びます。

Single-child layout widgets

Containerウィジェット

colorプロパティ

colorプロパティはコンテナに対して色を付けます。
decorationプロパティでも可能なのですが、色を付けるだけならこのプロパティでよいとのことです。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

var ok = false;

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _State();
  }
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    var mediaQuery = MediaQuery.of(context);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('テスト中です。'),
        ),
        // ColorではなくてColors!
        body: Container(color: Colors.green),
      ),
    );
  }
}

色が付きました。
ただそれだけです(笑

色の指定方法はほかにもColorを使用する方法があるようです。

Color(0xFF42A5F5)
Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5)
Color.fromARGB(255, 66, 165, 245)
Color.fromRGBO(66, 165, 245, 1.0)
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

var ok = false;

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _State();
  }
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    var mediaQuery = MediaQuery.of(context);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('テスト中です。'),
        ),
        // 今度はColor!
        body: Container(
          color: Color(0xFF42A5F5),
        ),
      ),
    );
  }
}

青くなりました!

width, heightプロパティ

width, heightプロパティは幅と高さを指定できます。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

var ok = false;

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _State();
  }
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    var mediaQuery = MediaQuery.of(context);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('テスト中です。'),
        ),
        // ColorではなくてColors!
        body: Container(
          color: Colors.green,
          width: 300.0,
          height: 300.0,
        ),
      ),
    );
  }
}

コンテンツエリアの左上に四角いオブジェクトのような表示になりました。

最後に

公式ページにはいろんな色指定の仕方が記載していました

Android Studioのエディタ部分、色指定すると左側にどんな色か確認するためのブロックが表示されます。
地味に便利です😆

colorプロパティはDecoratedBox,width, heightプロパティはSizeBoxウィジェットでそれぞれ代替できるそうです。

今日はここまで!

参考

Container | Flutter Doc JP (ctrnost.com)