FlutterのWidgetの種類
こちらが、公式のドキュメント
https://docs.flutter.dev/development/ui/widgets
いっぱいありますね...
今回は簡単そうなものから、復習してみようと思います。
Flutter最近触ってなかったので、忘れてました!
バージョンアップも速いので、Udemyで勉強し直しました。
まずはContainerから
Container Widgetを使うことで、サイズ・背景・余白・枠線などを指定することができます。
main.dart
import 'package:flutter/material.dart';
import 'package:widgetapp/home_page.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
home_page.dart
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
const HomePage({ Key? key }) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
// 背景色
color: Colors.blue,
// 横幅
width: 100,
// 縦幅
height: 100,
child: const Text("Box"),
),
);
}
}
左端にズレてますね。見栄えを良くしましょう。
まず、ContainerWidgetをCenterWidgetでラップします。
VsCodeだとマウスカーソルをContainerの上に置いて、電球のアイコンにホバーすると、メニューが表示されるので、centerを選択します。
そうするとカラーBOXが画面中央へ移動します。
home_page.dart
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
const HomePage({ Key? key }) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
// 背景色
color: Colors.blue,
// 横幅
width: 100,
// 縦幅
height: 100,
child: const Text("Box"),
),
),
);
}
}
今度カラーBOXの数を増やしてみましょう。
ContainerWidgetをRowWidgetで、ラップしてContainerWidegetをコピーして、３個に増やして色を変えてみましょう。
そうするとこんな感じになります。
home_page.dart
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
const HomePage({ Key? key }) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Row(
children: [
Container(
// 背景色
color: Colors.blue,
// 横幅
width: 100,
// 縦幅
height: 100,
child: const Text("Box"),
),
Container(
// 背景色
color: Colors.red,
// 横幅
width: 100,
// 縦幅
height: 100,
child: const Text("Box"),
),
Container(
// 背景色
color: Colors.green,
// 横幅
width: 100,
// 縦幅
height: 100,
child: const Text("Box"),
),
],
),
),
);
}
}
でも、このコードだとカラーBOXが増えていくと、コードがごちゃごちゃして、見づらいなと思います。以前から、悩んでいたことなのですが、Fluter,Dartの文法を最近学び直して、クラスの中に関数化して、コードを見やすくする方法をUdemyで学びました。
_colorBoxBlue() {}という書き方ですが...
_(アンダースコア)をメソッドの前につけて、プライベイトにすることで、クラス内でしか使えないようになり、他のクラスでは利用できなくなるそうです。
Javaだと、Privateというのをプロパティやメソッドの前につけていました。
余白もつけてみました。
home_page.dart
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Row(
children: [
const SizedBox(width: 10),
_colorBoxBlue(),
const SizedBox(width: 10),
_colorBoxRed(),
const SizedBox(width: 10),
_colorBoxGreen(),
const SizedBox(width: 10),
],
),
),
);
}
Widget _colorBoxBlue() {
return Container(
// 背景色
color: Colors.blue,
// 横幅
width: 100,
// 縦幅
height: 100,
child: const Text("Blue"),
);
}
Widget _colorBoxRed() {
return Container(
// 背景色
color: Colors.red,
// 横幅
width: 100,
// 縦幅
height: 100,
child: const Text("Red"),
);
}
Widget _colorBoxGreen() {
return Container(
// 背景色
color: Colors.green,
// 横幅
width: 100,
// 縦幅
height: 100,
child: const Text("Green"),
);
}
}
StackWidgetというものも学んだので、紹介しておきます。見た目は良くないですが、Widgetを重ねて表示することができるもので、自分で見た目をカスタマイズすることができます。
home_page.dart
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
_netWorkImage(),
Center(
child: Column(
children: [
const SizedBox(height: 10),
_colorBoxBlue(),
const SizedBox(height: 10),
_colorBoxRed(),
const SizedBox(height: 10),
_colorBoxGreen(),
const SizedBox(height: 10),
],
),
),
],
),
);
}
Widget _netWorkImage() {
return const Image(
image: NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
width: 250,
height: 250,
);
}
Widget _colorBoxBlue() {
return Container(
// 背景色
color: Colors.blue,
// 横幅
width: 100,
// 縦幅
height: 100,
child: const Text("Blue"),
);
}
Widget _colorBoxRed() {
return Container(
// 背景色
color: Colors.red,
// 横幅
width: 100,
// 縦幅
height: 100,
child: const Text("Red"),
);
}
Widget _colorBoxGreen() {
return Container(
// 背景色
color: Colors.green,
// 横幅
width: 100,
// 縦幅
height: 100,
child: const Text("Green"),
);
}
}
最後に
FlutterのWidgetは種類が多すぎて覚えるのが大変です!!!
常に公式のドキュメントやコミュニティの方々が発信している情報をチェックするようにした方が良いです。
ある日、非推奨になっているもののあるので、人が発信している情報を見てびっくりしました!