スポンサーリンク

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

Flutter
スポンサーリンク

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

本記事を読んでいただき感謝です。サイトを訪れていただいた方はプログラミング勉強中かと思いますのでプログラミング勉強のコツを合わせてご紹介。

スポンサーリンク
スポンサーリンク
スポンサーリンク

ブログに関しては500円程度かかりますが、それ以外は無料です。知識の吸収と並行してアウトプットは非常に効率が良いです。テックアカデミーに関しては講座レベルが高いにも関わらず、無料体験や人気口座も大幅値下げがあるので、重点的に学びたいものを無料体験してみてください。

転職時にも、エンジニアからテックアカデミー・Paizaは認知度が高いので、未経験入社採用を行う際履歴書で目に留まります。特にPaizaのスキルレベルA・SなどはIT業界でも評価されます。

テックアカデミー・Paizaの無料登録ができる期間中にぜひご利用してみてください。私も活用経験ありです。

Flutter
スポンサーリンク
スポンサーリンク
ともぶろぐ

コメント

  1. […] 先ほどまでの状態だとボタンのみの表示になっていたので「Column」という構造(リスト表示のようなもの)を用いてページを作成していきます。「Column」の使い方に関してはこちらのリンクページからきになる方はご参照ください。 […]

タイトルとURLをコピーしました