Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【Flutter】アプリ内のページの背景色をつけてListView表示してみた。

More than 1 year has passed since last update.

開発環境
⭐️Flutter
(flutter_macos_v1.9.1+hotfix.5-stable)

⭐️Android Studio 3.5.1
⭐️Xcode11.2 beata

↓↓↓実際に動かした動画です。
https://twitter.com/nonnonkapibara/status/1188395571918200833

↓↓↓TOBE 
アプリ内のページの背景色、薄いピンクを設定しました。
スクリーンショット 2019-10-27 10.57.37.png

↓↓↓実際の画面は、こんな感じです。
(図は、Androidのエミレーター起動のキャプチャです。)

スクリーンショット 2019-10-27 11.04.06.png

スクリーンショット 2019-10-27 11.04.50.png

スクリーンショット 2019-10-27 11.05.22.png

スクリーンショット 2019-10-27 11.06.06.png

ここからは、詳細説明です。

準備

英語の単語をListViewに表示し、ListViewに表示するチェックON、OFFのアイコンを設定するので準備をする。

「pubspec.yaml」のdev_dependenciesに
「cupertino_icons: ^0.1.2」と「english_words: ^3.1.0」を入力する

  cupertino_icons: ^0.1.2
  english_words: ^3.1.0

スクリーンショット 2019-10-27 10.40.56.png

dev_dependenciesの設定

「cupertino_icons: ^0.1.2」と「english_words: ^3.1.0」それぞれ
「Packages get」 を選択する

「cupertino_icons: ^0.1.2」「Packages get」 を選択する
スクリーンショット 2019-10-27 10.45.19.png

「english_words: ^3.1.0」「Packages get」 を選択する
スクリーンショット 2019-10-27 11.00.59.png

import定義

main.dartに「import 'package:english_words/english_words.dart';」を入力する

import 'package:english_words/english_words.dart';

スクリーンショット 2019-10-27 10.47.47.png

■main.dart

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

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'のんちゃん Demo',
      theme: ThemeData(
        primaryColor: Colors.pink,
        scaffoldBackgroundColor: Colors.pink[50] ,
      ),
      home: RandomWords(),
    );
  }
}

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final Set<WordPair> _saved = Set<WordPair>();
  final _biggerFont = const TextStyle(fontSize: 18.0);

  Widget _buildSuggestions() {
    return ListView.builder(
        padding: const EdgeInsets.all(16.0),
        itemBuilder: (context, i) {
          if (i.isOdd) return Divider();

          final index = i ~/ 2;
          if (index >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(10)); /*4*/
          }
          return _buildRow(_suggestions[index]);
        });
  }

  Widget _buildRow(WordPair pair) {
    final bool alreadySaved = _saved.contains(pair);
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: Icon(
        alreadySaved ? Icons.check_box : Icons.check_box_outline_blank,
        color: alreadySaved ? Colors.deepPurpleAccent : null,
      ),
      onTap: () {
        setState(() {
          if (alreadySaved) {
            _saved.remove(pair);
          } else {
            _saved.add(pair);
          }
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('のんちゃん Demo List View'),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.list), onPressed: _pushSaved),
        ],
      ),
      body: _buildSuggestions(),
    );
  }

  void _pushSaved() {
    Navigator.of(context).push(
      MaterialPageRoute<void>(
        builder: (BuildContext context) {
          final Iterable<ListTile> tiles = _saved.map(
                (WordPair pair) {
              return ListTile(
                title: Text(
                  pair.asPascalCase,
                  style: _biggerFont,
                ),
              );
            },
          );
          final List<Widget> divided = ListTile.divideTiles(
            context: context,
            tiles: tiles,
          ).toList();

          return Scaffold(
            appBar: AppBar(
              title: Text('チェックON List'),
            ),
            body: ListView(children: divided),
          );
        },
      ),
    );
  }
}

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => RandomWordsState();
}

完成!!

以下は、iPhone11 Proのシュミレーター起動のキャプチャです。
スクリーンショット 2019-10-27 10.12.21.png

スクリーンショット 2019-10-27 10.12.33.png

スクリーンショット 2019-10-27 10.12.45.png

※下記のFlutterのSampleを元に、作りました。
Write Your First Flutter App, part 1
https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1/#0

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away