Flutter: いろいろなListView

プログラミング
スポンサーリンク




こんにちは、おみです。

今回は、FlutterのListViewを使用して、色々な形式でテキストを表示していきたいと思います。

 

 

スポンサーリンク

テキストをそのまま表示

まずは、テキストをそのまま表示する方法です。

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'リストビューを表示',
      home: MyHomePage(title: 'リストビューを表示'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  final List<String> list = ["テキスト1", "テキスト2", "テキスト3"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: ListView.builder(
          padding: EdgeInsets.all(10.0),
          itemCount: list.length,
          itemBuilder: (context, index) => _buildButtonsTileView(list[index]),
        ));
  }

  // テキストをそのまま一覧表示
  Widget _buildTextView(String text) {
    return Text(text);
  }
}

 

 

テキストを四角で囲って表示

このままでは見栄えが悪いので、とりあえず四角で囲って表示しましょう。

CardというWidgetを使用することで、実装できます。

// テキストを四角で囲って一覧表示
Widget _buildCardView(String title) {
  return Card(
    child: Text(title),
  );
}

 

 

テキストにサブタイトルをつけて表示する

四角で囲うことで、少しは見栄えが良くなりましたがどうせならもう少し内容を増やしたいです。

ListTileを使ってみましょう

// サブタイトルを追加して一覧表示
Widget _buildListTileView(String title) {
  return ListTile(
    title: Text(title),
    subtitle: Text("サブタイトル"),
  );
}

 

 

上の2つをまとめる

先ほど出てきたCardの中にListTileを入れて表示してみましょう。

それっぽくなってきます。

// テキストにサブタイトルをつけて四角で囲って一覧表示
Widget _buildListTileView2(String title) {
  return Card(
      child: ListTile(
        title: Text(title),
        subtitle: Text("サブタイトル"),
      ));
}

 

 

 

タップした時に処理を行えるようにする

タップした時に、何らかの処理が起動するようにしてみましょう。

InkWellを使用します。

// タップしたときの処理を指定して一覧表示
Widget _buildInkWellView(String title) {
  return InkWell(
    onTap: () async {
      Fluttertoast.showToast(msg: title);
    },
    child: new Card(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ListTile(
              title: Text(title),
              subtitle: Text("サブタイトル"),
            )
          ],
        )),
  );
}

 

 

ボタンをつける

要素の右側に、ボタンを1つつけてみましょう。

ListTileのtrailingで指定します。

// ボタン付きのタイルを一覧表示
Widget _buildButtonTileView(String title) {
  return Card(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListTile(
            title: Text(title),
            subtitle: Text("サブタイトル"),
            trailing: IconButton(
              icon: Icon(Icons.check_circle),
              onPressed: () {
                Fluttertoast.showToast(msg: title);
              },
            ),
          )
        ],
      ));
}

 

 

ボタンを複数つける

ボタンを複数つけてみましょう。

Wrapにボタンを複数格納します。

// 複数のボタン付きのタイルを一覧表示
Widget _buildButtonsTileView(String title) {
  return Card(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListTile(
            title: Text(title),
            subtitle: Text("サブタイトル"),
            trailing: Wrap(
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.check_circle),
                  onPressed: () {
                    Fluttertoast.showToast(msg: title);
                  },
                ),
                IconButton(
                  icon: Icon(Icons.check_circle),
                  onPressed: () {
                    Fluttertoast.showToast(msg: title);
                  },
                ),
              ],
            ),
          )
        ],
      ));
}

 

 

 

 

 

 

コメント

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