【Flutter】変数を使って文字表示を行う方法。

今回の記事はFlutterに関する記事で、変数の記述方法とその変数を使ってアプリ画面に文字表示を行う方法について記載します。Flutter初心者でもわかるように実際に動くアプリのサンプルソースをベースに説明していきます。Flutterの変数を使う方法を知りたい方は是非参考にしてみてください。

今回の流れは、「変数の宣言方法紹介と使い方」→「宣言した変数を使って文字をテキストに表示」という流れで進めていきます。

変数の使い方
アプリ画面で変数を画面表示

変数の使い方

変数に関しては、FlutterというよりもDartの基本文法についてです。

//見やすいようにスペースを余分にとっています。
var free = "free"

上記のようにvarを使用することで、変数を定義できます。値は変数なため、ソースによって変更できます。

アプリ画面で変数を画面表示

下記ソースでアプリで変数を画面表示することができます。

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

var test = "buton";//ここ１

class MyApp extends StatelessWidget {
  @override

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:
          Text(test),//ここ２
      ),
      body: Center(
      ),
    );
  }
}

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(
      ),
    );
  }
}

ここ１
変数を宣言している箇所です。

ここ２
文字列の変数値をアプリ画面に表示

この2つのポイントのみが重要です。簡単です。

【Flutter】変数を使ってアプリ画面に文字表示を行う方法。

変数の使い方

アプリ画面で変数を画面表示

コメント