【Flutter】Columnを使ってテキストやボタンをリスト形式で表示する方法。〜 Flutter画面表示入門〜

Flutter

2021.01.04

今回の記事はFlutterを使って画面表示を行う際に非常に役立つcolumnの使い方をご紹介します。使い方としてはSwiftから入った私のような方にとってはColumnはTableViewに近いような用途になります。

使い方に初めはクセを感じたので初心者に分かりやすいよに解説を行います。

FlutterのColumnの使い方
Columnを使ってページ作成

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関連の記事を最近あげ始めたので是非参照にしていただけると幸いです。