【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part133 Material Components
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は Material ComponentsとiOS-Style ( part133 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part132 Material Components
引き続き、Material Componentsについて学びます。
RaisedButton, FlatButton, OutlineButton
RaisedButton
,FlatButton
,OutlineButton
はButton
と命名されている通りボタンウィジェットです。
残念ながら本書で紹介されているこれらのボタンウィジェットはFlutter2.0では非推奨となり、
ElevatedButton
,TextButton
,OutlinedButton
が代替のウィジェットとして提案されています。
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new MyHomePage()));
}
class MyHomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
bool dark = false;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: dark ? ThemeData.dark() : ThemeData.light(),
home: Scaffold(
appBar: AppBar(
centerTitle: true, // タイトルが中央になります。
title: Text('sample'),
// SliverAppBarにも同じプロパティがあります。
// flexibleSpace: ,
),
body: Center(
child: Column(
children: <Widget>[
// iconコンストラクタを使うとアイコン付きのボタンが簡単に作成できます。
// RaisedButtonの代替ウィジェットです。
ElevatedButton.icon(
onPressed: () {},
label: const Text("ElevatedButtonです。"),
icon: Icon(Icons.forward),
),
// FlatButtonの代替ウィジェットです。
TextButton(
onPressed: () {},
child: const Text("TextButtonです。"),
),
// OutlineButtonの代替ウィジェットです。
OutlinedButton(
onPressed: () {},
child: const Text("OutlinedButtonです。"),
// 新しいボタンウィジェットの注目のプロパティです。
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.yellow),
),
),
],
),
)),
);
}
}
styleというプロパティで色などを指定できるようですね。
最後に
本書はFlutterの1系をベースに記述されているので違いは当然でてくるものです。
たった数年でだいぶ進化するものですね🙂
今日はここまで!
参考
Flutter2.0から非推奨になったボタンと新しいボタンについて|TechRacho by BPS株式会社 (bpsinc.jp)
ディスカッション
コメント一覧
まだ、コメントがありません