【 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
ウィジェットでそれぞれ代替できるそうです。
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません