ブラウザでFlutter!!- 2 縦、横に並べる。
レイアウトについてまとめていきたいと思います。まず基本のテンプレートから始めます。
これを実行すると画面上には"Hello World"が表示されます。
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Welcome to Flutter'),
),
body: const Center(
child: Text('Hello World'),
),
),
);
}
}
Column (縦に並べる)・・Row (横に並べる)を設置する場合は"Column"のところを"Row"に変えてやればOKです。
基本の書き方は
Column(
children: const <Widget>[
//some widgets
],
)
ということで、
の()内にColumnの内容を入れます。
全体のコードは
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Welcome to Flutter'),
),
body: Center(
child: Column(
children: const <Widget>[
Text('Hello'),
Text('Flutter'),
],
)
),
),
);
}
}
表示させると
上の方にくっついてしまいます。これを中央に持ってくには
を追加します。
child: Column(
mainAxisSize: MainAxisSize.min,
children: const <Widget>[
Text('Hello'),
Text('Flutter'),
],
)
とすると
中央に配置されます。あと他の方法で"mainAxisAlignment"を使って、
としtも中央に配置されます。こちらの方は位置を指定するもので"mainAxisSize:"は余白の調整で中央に来るように設定できるようです。
ColumnとRowではMainの設定がColumnは縦方向、Rowでは横方向となることを覚えておけば良さそうです。
おまけ。
文字の大きさなどは"style: TextStyle()"で設定します。
Text('Flutter',style: TextStyle(fontSize: 30,),),
文字色は
Text('Flutter',style: TextStyle(fontSize: 30,),color: Colors.blue),
こんな感じになります。
この記事が気に入ったらサポートをしてみませんか?