107、Flutter 编写手动批题的app

 

该模块分为三个文件

main.dart  ------------------------------------------》用来绘制前端界面

story.dart  ------------------------------------------》用来定制PO对象

story_brain.dart ----------------------------------》用来编写交互逻辑

 

main.dart

在一个StatefulWidget里面嵌套了一个StatefulWidget 

在StatefulWidget 里面有

Scaffold --->Container---->SafeArea----->Column---->三个Expanded

 

Expanded1-----------》Center------>Text

Expanded2-----------》FlatButton---->Text

Expanded3-----------》Visibility-------》FlatButton---->Text

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

//TODO: Step 15 - Run the app and see if you can see the screen update with the first story. Delete this TODO if it looks as you expected.

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

class Destini extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: StoryPage(),
    );
  }
}

//TODO: Step 9 - Create a new storyBrain object from the StoryBrain class.

class StoryPage extends StatefulWidget {
  _StoryPageState createState() => _StoryPageState();
}

class _StoryPageState extends State<StoryPage> {
  StoryBrain storyBrain = StoryBrain();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        //TODO: Step 1 - Add background.png to this Container as a background image.
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/background.png'),
            fit: BoxFit.cover,
          ),
        ),

        //TODO: Step 1 - Add background.png to this Container as a background image
        padding: EdgeInsets.symmetric(vertical: 50.0, horizontal: 15.0),
        constraints: BoxConstraints.expand(),

        child: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Expanded(
                flex: 12,
                child: Center(
                  child: Text(
                    //TODO: Step 10 - use the storyBrain to get the first story title and display it in this Text Widget.
                    storyBrain.getStory(),
                    style: TextStyle(
                      fontSize: 25.0,
                    ),
                  ),
                ),
              ),
              Expanded(
                flex: 2,
                child: FlatButton(
                  onPressed: () {
                    //Choice 1 made by user.
                    setState(() {
                      storyBrain.nextStory(1);
                    });

                    //TODO: Step 18 - Call the nextStory() method from storyBrain and pass the number 1 as the choice made by the user.
                  },
                  color: Colors.red,
                  child: Text(
                    //TODO: Step 13 - Use the storyBrain to get the text for choice 1.
                    storyBrain.getChoice1(),
                    style: TextStyle(
                      fontSize: 20.0,
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: 20.0,
              ),
              Expanded(
                flex: 2,
                //TODO: Step 26 - Use a Flutter Visibility Widget to wrap this FlatButton.
                //TODO: Step 28 - Set the "visible" property of the Visibility Widget to equal the output from the buttonShouldBeVisible() method in the storyBrain.
                child: Visibility(
                  child: FlatButton(
                    onPressed: () {
                      //Choice 2 made by user.
                      setState(() {
                        storyBrain.nextStory(2);
                      });
                      //TODO: Step 19 - Call the nextStory() method from storyBrain and pass the number 2 as the choice made by the user.
                    },
                    color: Colors.blue,
                    child: Text(
                      //TODO: Step 14 - Use the storyBrain to get the text for choice 1.
                      storyBrain.getChoice2(),
                      style: TextStyle(
                        fontSize: 20.0,
                      ),
                    ),
                  ),
                  visible: storyBrain.buttonShouldBeVisible(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

 

story.dart用来存储po对象

class Story{

  String storyTitle;

  String choice1;

  String choice2;

  Story({String storyTitle,String choice1,String choice2}){

    this.storyTitle = storyTitle;
    this.choice1 = choice1;
    this.choice2 = choice2;

  }

}

 

story_brain.dart用来制定交互的逻辑

import 'story.dart';

//TODO: Step 6 - import the story.dart file into this file.
class StoryBrain {

  int _storyNumber=0;


  bool buttonShouldBeVisible(){

    if (_storyNumber == 0 || _storyNumber == 1 || _storyNumber == 2) {
      return true;
    } else {
      return false;
    }

  }


  nextStory(int userChoice){

    if (userChoice == 1 && _storyNumber == 0) {
      _storyNumber = 2;
    } else if (userChoice == 2 && _storyNumber == 0) {
      _storyNumber = 1;
    } else if (userChoice == 1 && _storyNumber == 1) {
      _storyNumber = 2;
    } else if (userChoice == 2 && _storyNumber == 1) {
      _storyNumber = 3;
    } else if (userChoice == 1 && _storyNumber == 2) {
      _storyNumber = 5;
    } else if (userChoice == 2 && _storyNumber == 2) {
      _storyNumber = 4;
    }


    if(_storyNumber==3 ||_storyNumber==5 ||_storyNumber==4){
      _storyNumber = 0;
    }


  }


  String getChoice1(){

    return _storyData[_storyNumber].choice1;

  }

  String getChoice2(){

    return _storyData[_storyNumber].choice2;

  }

  String getStory(){

    return _storyData[_storyNumber].storyTitle;
  }


  List<Story> _storyData = [
    Story(
        storyTitle:
        'Your car has blown a tire on a winding road in the middle of nowhere with no cell phone reception. You decide to hitchhike. A rusty pickup truck rumbles to a stop next to you. A man with a wide brimmed hat with soulless eyes opens the passenger door for you and asks: "Need a ride, boy?".',
        choice1: 'I\'ll hop in. Thanks for the help!',
        choice2: 'Better ask him if he\'s a murderer first.'),
    Story(
        storyTitle: 'He nods slowly, unphased by the question.',
        choice1: 'At least he\'s honest. I\'ll climb in.',
        choice2: 'Wait, I know how to change a tire.'),
    Story(
        storyTitle:
        'As you begin to drive, the stranger starts talking about his relationship with his mother. He gets angrier and angrier by the minute. He asks you to open the glovebox. Inside you find a bloody knife, two severed fingers, and a cassette tape of Elton John. He reaches for the glove box.',
        choice1: 'I love Elton John! Hand him the cassette tape.',
        choice2: 'It\'s him or me! You take the knife and stab him.'),
    Story(
        storyTitle:
        'What? Such a cop out! Did you know traffic accidents are the second leading cause of accidental death for most adult age groups?',
        choice1: 'Restart',
        choice2: ''),
    Story(
        storyTitle:
        'As you smash through the guardrail and careen towards the jagged rocks below you reflect on the dubious wisdom of stabbing someone while they are driving a car you are in.',
        choice1: 'Restart',
        choice2: ''),
    Story(
        storyTitle:
        'You bond with the murderer while crooning verses of "Can you feel the love tonight". He drops you off at the next town. Before you go he asks you if you know any good places to dump bodies. You reply: "Try the pier".',
        choice1: 'Restart',
        choice2: '')
  ];



}