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

Flutter

2021.01.04

今回の記事は入門用Flutterに関する記事で、変数の記述方法とその変数を使って文字表示を行う方法について記載していきまます。

まだまだ慣れていないところが多いので初心者を抜けきれていない状態です。

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

では早速記事に進んでいきます。

Flutterで変数宣言の方法と使い方について
Flutterで宣言した変数をテキストに表示する

Flutterで変数宣言の方法と使い方について

まずはFlutterというよりもDartの基本文法ですね。宣言方法は下記のように行います。

int    const1 = 10;
double const2 = 12.3;
String const3 = 'abc';
bool   const4 = true;
//基本形
//見やすいようにスペースを余分にとっています。
var free = "free"
//変数

今回はテキストに文字をしゅつりょくするので、文字列型の「String」をつかいます。

ではAndroid Studioのmain.dartファイルに記入をお行っていきましょう。

Flutterで宣言した変数をテキストに表示する

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

どこに注目すれば良いかというと「ここ１」と書いているところで宣言をしており、その後に「ここ２」と書いているところで文字列の変数の値をページ上部に表示しております。

かなり簡単な実装になっております。がこのように変数を使用できるということがわかればまずはOKでしょう。

この他にもFlutter関連の記事を多数記載しております。きになるものあればご参照ください。