【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part04 基本的なウィジェット
「基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part04 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part03 基本的なウィジェット
引き続き、基本的なウィジェットについて学習します。
基本的なウィジェット
Text,RichTextウィジェット
textAlignプロパティ
文字列の水平方向の位置を決めます。
この確認を行う場合、ウィジェットの(?)横幅が大事です。
今回は最大にして確認しました。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
// home: MyHomePage(title: 'Flutter Demo Home Page'),
initialRoute: '/',
routes: {
'/': (context) => FirstPage(),
},
);
}
}
class FirstPage extends StatelessWidget {
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
final TextTheme textTheme = theme.textTheme;
final titleStyle =
textTheme.headline6!.copyWith(color: theme.backgroundColor);
return Scaffold(
appBar: AppBar(
title: Text(
'First Page',
style: titleStyle,
)),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
width: double.infinity, // 横幅を決めています。「最大」ということです。
color: Colors.green,
child: const Text(
"ABC",
textAlign: TextAlign.left, // 水平方向に左寄せです。
),
),
Container(
width: double.infinity,
color: Colors.red,
child: const Text(
"ABC",
textAlign: TextAlign.center, // 水平方向に中央寄せです。
),
),
Container(
width: double.infinity, // 横幅を決めています。「最大」ということです。
color: Colors.grey,
child: const Text(
"ABC",
textAlign: TextAlign.right, // 水平方向に右寄せです。
),
),
],
),
);
}
}
こんな感じです。
最後に
ここから少しの間細かなプロパティの記述が続いています。
時間があればまとめてやりたい・・・!
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません