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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Web Training',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage()
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  String genderAns = "男性";
  bool haveDog = false;
  double feel = 0.4;
  TextEditingController favoriteNumberController;

  @override
  void initState() {
    super.initState();
    favoriteNumberController = new TextEditingController(text: "334");
  }

  @override
  void dispose() {
    favoriteNumberController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: SingleChildScrollView(
      child: Column(
        children: [
          Container(
            width: 800.0,
            height: 500.0,
            margin: EdgeInsets.all(16.0),
            color: Colors.red,
            child: Center(
              child: Text(
                "運勢占い",
                style: TextStyle(color: Colors.white, fontSize: 50.0),
              ),
            ),
          ),
          Text(
            "質問1. 性別を教えて下さい",
            style: TextStyle(fontSize: 30.0),
          ),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text("男性"),
              Radio(
                value: "男性",
                groupValue: genderAns,
                onChanged: (String value) {
                  setState(() {
                    genderAns = value;
                  });
                },
              ),
              Text("女性"),
              Radio(
                value: "女性",
                groupValue: genderAns,
                onChanged: (String value) {
                  setState(() {
                    genderAns = value;
                  });
                },
              ),
            ],
          ),
          Text(
            "質問2. 犬を飼っていますか?",
            style: TextStyle(fontSize: 30.0),
          ),
          Switch(
            value: haveDog,
            onChanged: (value) {
              setState(() {
                haveDog = value;
              });
            },
          ),
          Text(
            "質問3. 現在の気分は?",
            style: TextStyle(fontSize: 30.0),
          ),
          Text("${(feel * 100).round()}"),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text("悪い"),
              Slider(
                value: feel,
                onChanged: (value) {
                  setState(() {
                    feel = value;
                  });
                },
              ),
              Text("良い")
            ],
          ),
          Text(
            "質問4. 好きな数字は?",
            style: TextStyle(fontSize: 30.0),
          ),
          Container(
            width: 400.0,
            child: TextField(
              controller: favoriteNumberController,
              textAlign: TextAlign.center,
            ),
          ),
          Text(
            "質問5. チェックしてみてください",
            style: TextStyle(fontSize: 30.0),
          ),
          Checkbox(
            value: haveDog,
            onChanged: (value) {
              setState(() {
                haveDog = value;
              });
            },
          ),
          RaisedButton(
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) {
                    return ResultPage(genderAns, haveDog, feel,
                        favoriteNumberController.text);
                  },
                ),
              );
            },
            color: Colors.red,
            child: Text(
              "結果を見る",
              style:
                  TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
            ),
          )
        ],
      ),
    )));
  }
}

class ResultPage extends StatelessWidget {
  String _gender;
  bool _haveDog;
  double _feel;
  String _favoriteNumber;

  String resultValue;

  ResultPage(String gender, bool haveDog, double feel, String favoriteNumber) {
    _gender = gender;
    _haveDog = haveDog;
    _feel = feel;
    _favoriteNumber = favoriteNumber;

    if (_haveDog) {
      resultValue = "大吉!";
    } else {
      resultValue = result[Random().nextInt(result.length)];
    }
  }

  List<String> result = ["大吉!", "中吉!", "吉!", "凶", "大凶!!!"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text("結果は..."),
            Text(
              resultValue,
              style: TextStyle(color: Colors.red, fontSize: 60.0),
            ),
            FlatButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: Text("戻る"),
            ),
            Text("性別"),
            Text(_gender),
            Text("犬を飼っているか"),
            Text("$_haveDog"),
            Text("今の気分"),
            Text("$_feel"),
            Text("好きな数字"),
            Text("$_favoriteNumber"),
          ],
        ),
      ),
    );
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.