2020.03.11 2020.08.15

29.【クイズアプリ開発】選択肢のボタンデザインを整える

tamappe

今回は選択肢のボタンのデザインを綺麗にしていきます。
それとボタンをタップしたときの処理も書いていきます。

想定しているデザイン

Table of Contents

ボタンの角丸実装

まずはRaisedButtonに角丸を実装します。
過去記事に角丸を実装する方法について書いていますので復習します。

Tamappe Life Log

21. Flutterでの画像表示と枠線、角丸を付ける方法について

🕒️February 22, 2020

今回はFlutterで画像を表示させる方法とWidgetに枠線や角丸を付ける方法について学習します。SwiftUIでも同じようなことを書きました。画像の表示Flutter公式では次のリンクが参考になります。まずはプロジェクトファイルに画像を追加します。Imageを配置して画像(地球)を読み込みます。(参考画像の URL)ja.wikipedia.org画像をダウンロードしてきます。Flutterプロジェクトファイルのルート直下にassetsフォルダを追加します。assetsフォルダにimageの画像ファイルをドラッグアンドドロップします。これでプロジェクトファイルにimage...

ClipRRectを使ってborderRadiusプロパティで角丸の度合いを調整します。

ClipRRect(
      borderRadius: BorderRadius.circular(Constants().answerButtonHeight / 2),
      child: SizedBox(
          width: double.infinity,
          height: Constants().answerButtonHeight,
          child: RaisedButton(
            child: Text(questions[questionIndex][keyString]),
            onPressed: null,
          )
      ),
    )

値のConstants()は定数クラスから参照しています。

constants.dart

class Constants {
  /// 問題文ウィジェットの高さ
  final double questionAreaHeight = 70.0;
  /// 回答の選択肢ボタンの高さ
  final double answerButtonHeight = 50.0;
}

ボタンの高さが50なので、半分の25を指定すればきれいな角丸が完成します。

ボタンの色変更

次にRaisedButtonに色をつけます。
Sketchのデザインの指定色は#D6D7D7なので16進数で指定します。

FlutterのColorクラスには16進数で指定できます。

const color = const Color(0xffD6D7D7)

0xffは意味合いは違いますが#と同じものと思っていいでしょう。
Color(0xff[16進数])で16進数の色を反映できます。

Colorの16進数実装

ですが、実際のプロジェクトでその都度0xffを書くのは煩わしいと思います。
なので、何かしら簡略化する方法はないものかを調査してみたらさすがに議論されていました。

Stack Overflow
10 Pockets
How do I use hexadecimal color strings in Flutter?
https://stackoverflow.com/questions/50081213/how-do-i-use-hexadecimal-color-strings-in-flutter
How do I convert a hexadecimal color string like #b74093 to a Color in Flutter? I want to use a HEX color code in Dart.

こちらのところから

class HexColor extends Color {
  static int _getColorFromHex(String hexColor) {
    hexColor = hexColor.toUpperCase().replaceAll("#", "");
    if (hexColor.length == 6) {
      hexColor = "FF" + hexColor;
    }
    return int.parse(hexColor, radix: 16);
  }

  HexColor(final String hexColor) : super(_getColorFromHex(hexColor));
}

を拝借します。

新しいファイルhex_color.dartを追加して下記のコードを書きます。

hex_color.dart

import 'package:flutter/material.dart';

class HexColor extends Color {
  static int _getColorFromHex(String hexColor) {
    hexColor = hexColor.toUpperCase().replaceAll("#", "");
    if (hexColor.length == 6) {
      hexColor = "FF" + hexColor;
    }
    return int.parse(hexColor, radix: 16);
  }

  HexColor(final String hexColor) : super(_getColorFromHex(hexColor));
}

これを使うことで

HexColor('#D6D7D7')

と書けるようになります。

ボタンのタップイベント

そして、最後にRaisedButtonのタップイベントの処理を実装します。
ボタンタップしたら問題のindexを+1にして画面を更新させればいいわけですね。

main.dartにその更新の処理を記載します。

void _answerQuestion() {
    setState(() {
      _questionIndex++;
    });
  }

まだproviderと言った高等技術は使えませんのでsetState()を呼ぶことで画面を更新させることにします。
あとはこの_answerQuestionをボタンの引数で渡してやればいいでしょう。

最終的にanswer_button.dartを次のように書き直します。

answer_button.dart

import 'package:flutter/material.dart';
import 'package:flutter_quiz_app/utils/hex_color.dart';
import '../utils/constants.dart';

class AnswerButton extends StatelessWidget {
  final int questionIndex;
  final List<Map<String, Object>> questions;
  final Function answerQuestion;
  final String keyString;

  AnswerButton(
      {this.questionIndex,
      this.questions,
      this.answerQuestion,
      this.keyString});

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(Constants().answerButtonHeight / 2),
      child: SizedBox(
          width: double.infinity,
          height: Constants().answerButtonHeight,
          child: RaisedButton(
            color: HexColor('#D6D7D7'),
            child: Text(questions[questionIndex][keyString]),
            onPressed: answerQuestion,
          )
      ),
    );
  }
}

final Function answerQuestion;という関数型のプロパティを用意してonPressedに代入します。
あとはmain.dartで実装した_answerQuestionをRaisedButtonのanswerQuestionに渡してやればOKです。

結果的にmain.dartは次のように変更されます。

main.dart

import 'package:flutter/material.dart';
import './utils/constants.dart';
import './widget/answer_button.dart';
import './widget/question_view.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  /// 問題文のindex
  var _questionIndex = 0;

  var _questions = [
    {
      'question':
          'The weather in Merizo is very (x) year-round, though there are showers almost daily from December through March.',
      'a': 'agreeable',
      'b': 'agree',
      'c': 'agreement',
      'd': 'agreeably',
      'correctAnswer': 'A'
    },
    {
      'question':
          '(x) for the competition should be submitted by November 28 at the latest.',
      'a': 'Enter',
      'b': 'Entered',
      'c': 'Entering',
      'd': 'Entries',
      'correctAnswer': 'D'
    }
  ];

  void _answerQuestion() {
    setState(() {
      _questionIndex++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('文法問題'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              height: Constants().questionAreaHeight,
              color: Colors.red,
              child: Center(
                child: Text(
                  '(x)に入る単語を答えよ。',
                  style: TextStyle(fontSize: 20),
                ),
              ),
            ),
            Container(
              height: Constants().questionAreaHeight,
              color: Colors.green,
              child: Center(
                child: Text(
                  'Q${_questionIndex + 1}',
                  style: TextStyle(fontSize: 18),
                ),
              ),
            ),
            QuestionView(questionIndex: _questionIndex, questions: _questions),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.fromLTRB(50.0, 30.0, 50.0, 50.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    AnswerButton(
                        questions: _questions,
                        questionIndex: _questionIndex,
                        answerQuestion: _answerQuestion,
                        keyString: 'a'),
                    AnswerButton(
                        questions: _questions,
                        questionIndex: _questionIndex,
                        answerQuestion: _answerQuestion,
                        keyString: 'b'),
                    AnswerButton(
                        questions: _questions,
                        questionIndex: _questionIndex,
                        answerQuestion: _answerQuestion,
                        keyString: 'c'),
                    AnswerButton(
                        questions: _questions,
                        questionIndex: _questionIndex,
                        answerQuestion: _answerQuestion,
                        keyString: 'd'),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

これでビルドすると選択肢のボタンのデザインが角丸に変わっているはずです。
またボタンをタップすると次の問題に切り替わります。