【Flutter】文字の表示(重ねて表示とか色々紹介)【日本語】

Flutterの文字の表示について色々試していきます。

文字の表示はアプリを作るうえで基本中の基本なので、しっかり覚えていきます。

※他のプログラミングに関する記事はこちら

スポンサーリンク

前提

Flutter導入後の初期状態から始めます。

過去にFlutterの導入方法を簡単にまとめていますので、まだ導入が済んでいない場合は以下を参照してください。

簡単導入~サンプルアプリのデバック起動まで

備忘録ついでにFlutterの導入手順について簡単にメモしていきます。 本記事でサンプルアプリのデバック起動までやります。 所要時間30分~60分程度。 他のプログラミングに関する記事はこちら スポンサーリンク […]

スポンサーリンク

早速色々試す

文字の表示(基礎)

まずは基本的な文字の表示からです。

Flutter導入直後は「main.dart」ファイルに色々な記載がされていますが、まずはそれを全削除し以下コピペします。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World',
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
        ),
        body: Text(
          'Hello World'
          ),
      ),
    );
  }
}

 

すると以下みたいに、少しわかりにくいですが画面左上に「Hello World」が表示されます。

 

テキストの表示をしているのは、14行目から16行目の以下の記載です。

body: Text(
  'Hello World'
  ),

 

コメントを追加すると、↓のような処理になってます(一先ず「ふーん」程度で)

// 静的なページを作るためのStatelessWidgetを使うためにインポートしてます
// flutterで開発する場合、基本いれておく必要があるパッケージです
import 'package:flutter/material.dart';

// void main()から処理がスタートします。runAppでMyAppクラスを呼び出してます。
void main() => runApp(MyApp());

// MyAppクラスです。
// StatelessWidgetをextendsしてます。
// 静的なページを作成する場合はStatelessWidgetをextendsし、
// 動的なページを作成する場合はStatefullWidgetをextendsしますが、
// とりあえず深く考えなくていいと思います。
class MyApp extends StatelessWidget {

  // buildをoverride(上書き)します
  // buildは色々な条件で起動するメソッドです
  @override
  Widget build(BuildContext context) {

    // MaterialAppを返します
    // MaterialAppは、アプリの基礎的な情報を持つものというか、そんな感じです
    return MaterialApp(

      // MaterialAppのtitleプロパティにHello Worldを指定しています。
      // titleプロパティの情報は、タスクマネージャー上や「最近使ったアプリ」で表示される名称らしく、iOSでは使われない情報らしいです
      title: 'Hello World',

      //homeプロパティには最初に表示させる内容を指定します。
      //homeプロパティにScaffold(ページ)を設定しています。
      home: Scaffold(

        // ScaffoldのappBarプロパティです。
        // appBarプロパティは画面上部に出る表題のようなものです。
        // 今回は使用しないので、背景色を真っ白にとりあえずしてます。
        appBar: AppBar(
          backgroundColor: Colors.white,
        ),

        // Scaffoldのbodyプロパティです。
        // bodyプロパティにText()を指定することで、文字を表示させてます。
        body: Text(
          'Hello World'
          ),
      ),
    );
  }
}

 

長ったらしく書いてますが、今回はbodyプロパティの情報のみを色々いじってくので、それ以外の部分はとりあえず気にしなくて問題ないです。

スポンサーリンク

 

縦並びで表示

縦並びに文字を表示させるには、Columnを使います。

Columnはchidren(子要素)にいくつもウィジェット(文字を表示させるText()もウィジェットの1つ)を設定できます。

ウィジェットとかいうと難しく感じますが、要はウィジェット=機能みたいなものです。

以下、例です(body部分のみ抜粋、それ以外は変えてません)

body: Column(
  children: <Widget>[
      Text('1行目'),
      Text('2行目'),
      Text('3行目'),      
  ],
),

 

するとこうなります。

mainAxisAlignmentプロパティでやっていることは「body内の一番上から順番に縦に並べる」という処理ですがmainAxisAlignment、については以下サイトが綺麗にまとめておりましたので、興味がある方はご参照頂ければ。

Qiita

Flutterでレイアウトを組み立てる際、ColumnとRowはほぼ必ず使う。 そのColumnとRowでmainAxi…

 

横並びで表示

横並びに文字を表示させるにはRowを使います。

Columnとほぼ使い方が同じ。

body: Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
      Text('1行目'),
      Text('2行目'),
      Text('3行目'),      
  ],
),

スポンサーリンク

 

文字の中央寄せ

中央寄せにする場合はCenterを使います。

Centerのchild(子要素)に中央寄せしたいウィジェットを設定することで、そのウィジェットが中央寄せされます。

例として、Columnを中央寄せにしてみました。

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    children: <Widget>[
        Text('1行目'),
        Text('2行目'),
        Text('3行目'),      
    ],
  ),
),

 

文字に余白を設定する

余白を設定する方法はいくつも存在しますが、今回は2つの方法でやってみます。

1つ目の方法はSizedBoxを挟みます。

この方法はかなり簡単なので、ちょっとした余白が欲しいんだよな程度であればこれがよさげです。

body: Column(
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
      SizedBox(height:100.0),
      Text('1行目'),
      Text('2行目'),
      Text('3行目'),      
  ],
),

 

2つ目の方法はContainerウィジェットを使います。

Containerを使う場合は、marginを設定した上で余白をつけるパーツをChildrenに設定します。

body: Container(
  margin: EdgeInsets.only(top: 70.0),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    children: <Widget>[
        Text('1行目'),
        Text('2行目'),
        Text('3行目'),      
    ],
  ),
),

 

Containerは余白をつけるmargin以外にも寄せの方向を決められるalignmentや背景色をつけるcolorなど、色々なプロパティがあるので便利です。

試しにContainerを使って中央寄せの背景グリーンにしてみると、こんな感じです。

body: Container(
  margin: EdgeInsets.only(top: 70.0),
  alignment: Alignment.center,
  color: Colors.green,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    children: <Widget>[
        Text('1行目'),
        Text('2行目'),
        Text('3行目'),      
    ],
  ),
),

スポンサーリンク

 

文字に色をつける

文字色の変更はTextウィジェットのstyleを指定してあげれば変わります。

というか、文字に関する表示変更(大きさだったり、Boldだったり)はTextウィジェットの持つ何かしらのプロパティをいじれば簡単に変えれます。

今回は文字色を赤にしてみます。

body: Column(
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
      Text(
        '1行目',
        style:TextStyle(
          color: Colors.red,
        ),
      ),
      Text('2行目'),
      Text('3行目'),      
  ],
),

 

文字を重ねる(相対的ではなく絶対的な配置を行う)

文字を絶対的な配置をしたくなるケースは多分かなり多いと思います。

位置を指定して文字を表示させる場合はStackを使います。

これを使うと文字を重ねたり、なんてこともできます。

body: Stack(
  children: <Widget>[
    Positioned(
      top: 0.0,
      left: 0.0,
      child: Text("左上に文字")
    ),
    Positioned(
      top: 0.0,
      right: 0.0,
      child: Text("右上に文字")
    ),
    Positioned(
      top: 5.0,
      left: 5.0,
      child: Text("重ねて表示も可能")
    ),
  ],
),

 

最後に

以上、文字の表示についてでした。

文字の表示はアプリを作るうえで必要不可欠だと思うので、基礎的な部分ではありますが重要だと思います。

他のプログラミングに関する記事

プログラミングまとめ

プログラミングに関する記事です。 言語とかツールごとにまとめています。 スポンサーリンク [adcode] Flutter ・簡単導入~サンプルアプリのデバック起動まで ・文字の表示(重ねて[…]

IMG

スポンサーリンク