【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part01 基本的なウィジェット
「基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part01 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( Dart編 ) part45 その他の重要な機能
今回からFlutterのウィジェットについて学習していきます。
基本的なウィジェット
Textウィジェット
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) {
var _name = 'Raika';
// ★
var txt = Text(
'$_name さんこんにちは! はうあーゆー?', // 表示する文字列
textAlign: TextAlign.center, // 中央に揃える
overflow: TextOverflow.ellipsis, // テキストが長い文字列の場合、3点リーダー(...)が自動で付与されます
style: TextStyle(fontWeight: FontWeight.bold), // 太文字
);
return Scaffold(
appBar: AppBar(title: const Text('First Page')),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/second');
},
child: txt,
),
),
);
}
}
実行するとこのようになります。
RichTextウィジェット
文字列内でstyleが混在する場合にしようします。
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) {
var _name = 'Raika';
var txt = Text(
'$_name さんこんにちは! はうあーゆー?',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.bold),
);
// ★今回はこちらを使っています。
var rich = Text.rich(TextSpan(text: 'こんにちは', children: <TextSpan>[
TextSpan(text: ' 美しい ', style: TextStyle(fontStyle: FontStyle.italic)),
TextSpan(text: ' 世界 ', style: TextStyle(fontWeight: FontWeight.bold)),
]));
return Scaffold(
appBar: AppBar(title: const Text('First Page')),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/second');
},
child: rich,
),
),
);
}
}
実行してみました。
最後に
やはり画面があるほうが楽しいですね。
もう一つ、Dartを学習して分かったのはFlutterでもウィジェットオブジェクトを変数に格納して後で使えるということです。
Flutter学習当初は「ネストばかりで読みづらい・・・」と思っていたのでした。
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません