【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part03 基本的なウィジェット
「基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part03 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part02 基本的なウィジェット
引き続き、基本的なウィジェットについて学びます。
基本的なウィジェット
Text,RichTextウィジェット
strutStyleプロパティ
strutとはGoogleで翻訳すると「突っ張り」という意味らしいです。
突っ張りスタイル・・・一気に昭和感漂ってきましたね😃
文字の高さを調整するプロパティでしょうかね。
Aウィジェットに日本語、Bウィジェットに英語のような状態にして両方を並べると高さがガタガタに見えるんだそうです。
Flutter StrutStyleで日本語と英語のTextの高さを揃える – Qiita
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: Row(
children: <Widget>[
Container(
color: Colors.green,
child: const Text(
"ABC",
style: TextStyle(fontSize: 16.0),
),
),
Container(
color: Colors.red,
child: const Text(
"あいう",
style: TextStyle(fontSize: 16.0),
),
),
],
),
);
}
}
確かにガタガタになりましたね。
ここでstrutStyleプロパティの出番です。
この値(今回はheight)を調整することによって・・・
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: Row(
children: <Widget>[
Container(
color: Colors.green,
child: const Text(
"ABC",
style: TextStyle(fontSize: 16.0),
strutStyle: StrutStyle(
fontSize: 16.0,
height: 1.5, // この値を0.1ずつ変えて調整するようですね。
),
),
),
Container(
color: Colors.red,
child: const Text(
"あいう",
style: TextStyle(fontSize: 16.0),
strutStyle: StrutStyle(
fontSize: 16.0,
height: 1.5,
),
),
),
],
),
);
}
}
きれいにそろいましたね。
最後に
デバッグでガタガタになったらstrutsStyleプロパティで調整すると覚えます。
環境によってheightの値が異なったりするようです。私の環境では1.5できれいに揃いました。
今日はここまで！