今回の記事はFlutterを使って画面表示を行う際に非常に役立つcolumnの使い方をご紹介します。使い方としてはSwiftから入った私のような方にとってはColumnはTableViewに近いような用途になります。
使い方に初めはクセを感じたので初心者に分かりやすいよに解説を行います。
FlutterのColumnの使い方
簡単にせつ名するとColumnは入れ子のようなものです。

イメージはこんな感じです。
全体的に見て「body」という中に「Column」を入れます。その「Column」は行のような役割になっているので行ごとに「container」にChildreという形で各部品を入れていく流れになっております。
Columnを使ってページ作成
では実際にページを作っていきましょう。
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(new MaterialApp(home: new MyApp()));
}
var b_word = "テスト中です。";
var ok = false;
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:
Text(b_word),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
//color: Colors.blue,
child: Text('テストです。', style: TextStyle(fontSize: 50))),
Container(
//color: Colors.blue,
child: RaisedButton(
child: Text(b_word),
onPressed: () {
if (ok == false) {
print("false");
ok = true;
} else {
print("true");
ok = false;
}
//SystemNavigator.pop();
}
)
),
]
),
),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
print("###");
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
),
);
}
}
解説を行ってきます。
まずコード中部にある「Column」の下に前章で説明した「container」を設置して、その部分にボタンとテキストを入れております。ボタンにはクリックするとコンソール画面に「false」「true」を交互に表示する仕組みにしております。
今回の記事は以上ですが、他にもFluttre関連の記事を最近あげ始めたので是非参照にしていただけると幸いです。
コメント
[…] 先ほどまでの状態だとボタンのみの表示になっていたので「Column」という構造(リスト表示のようなもの)を用いてページを作成していきます。「Column」の使い方に関してはこちらのリンクページからきになる方はご参照ください。 […]