【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part07 基本的なウィジェット
「基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part07 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part06 基本的なウィジェット
引き続き、基本的なウィジェットについて学びます。
基本的なウィジェット
Text,RichTextウィジェット
textWidthBasis
1行以上のテキストの幅を決める方法を指定・・・するとのことです。
どういうことなのでしょう?
こちらのサイトに例がありました。
Flutter:テキストウィジェットのガイド (ichi.pro)
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>[
Text(
'長いながいーーーーーーーーーーーーーーーーいテキストで構成されたとてもながーーーーーい文章',
style: TextStyle(
backgroundColor: Colors.yellow,
),
),
Center(
child: Text(
'長いながいーーーーーーーーーーーーーーーーいテキストで構成されたとてもながーーーーーい文章',
textWidthBasis: TextWidthBasis.longestLine,
style: TextStyle(
backgroundColor: Colors.pink,
),
)),
],
),
);
}
}
実行してみたのですが・・・前回同様になにも変化なしでした(´・ω・`)
最後に
まだウィジェットについて学習が浅いので確認方法がよくわからない状態のようです。
精進せねば。
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません