Asri
Asri

Reputation: 325

Unable to update Text Flutter Dart

I am trying to a question but it is not updating as I setState. When I press the raised button, the questionNumber variable will update and show a different questionText. However even after I press it, the text value is not updating.

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

class QuestionPage extends StatefulWidget {
  static const pageId = 'QuestionPage';

  @override
  _QuestionPageState createState() => _QuestionPageState();
}

class _QuestionPageState extends State<QuestionPage> {
  @override
  Widget build(BuildContext context) {
    QuizBrain quizBrain = QuizBrain();

    void nextQuestion() {
      setState(() {
        quizBrain.nextQuestion();
      });
    }

    return SafeArea(
        child: Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Center(
            child: Text('Questions'),
          ),
          Text(quizBrain.getQuestionText()),
          RaisedButton(
            onPressed: nextQuestion,
            child: Text('Next Qns'),
          ),
        ],
      ),
    ));
  }
}

and this is my QuestionBrain:

import 'Questions.dart';

class QuizBrain {
  int _questionBankNumber = 0;

  List<Question> _questionBank = [
    Question('Why is the world round?', 'Dummy answer1', 'Dummy answer2',
        'Dummy answer3', 'Dummy answer4', 'Dummy answer1'),
    Question('Is the sun blue in colour?', 'Dummy answer1', 'Dummy answer2',
        'Dummy answer3', 'Dummy answer4', 'Dummy answer1'),
    Question('How often does the rooster moo?', 'Dummy answer1',
        'Dummy answer2', 'Dummy answer3', 'Dummy answer4', 'Dummy answer1')
  ];

  void nextQuestion() {
    if (_questionBankNumber < _questionBank.length - 1) {
      _questionBankNumber++;
    }
  }
}


Upvotes: 0

Views: 306

Answers (2)

Arhaam Patvi
Arhaam Patvi

Reputation: 670

I made a few minor changes and this seems to be working:

class QuestionPage extends StatefulWidget {
  static const pageId = 'QuestionPage';

  @override
  _QuestionPageState createState() => _QuestionPageState();
}

class _QuestionPageState extends State<QuestionPage> {
  String q;
  QuizBrain quizBrain;

  _QuestionPageState() {
    quizBrain = QuizBrain();
    q = quizBrain.getQuestionText();
  }
  @override
  Widget build(BuildContext context) {
    void nextQuestion() {
      setState(() {
        quizBrain.nextQuestion();
        q = quizBrain.getQuestionText();
      });
    }

    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Center(
              child: Text('Questions'),
            ),
            Text(q),
            RaisedButton(
              onPressed: nextQuestion,
              child: Text('Next Qns'),
            ),
          ],
        ),
      ),
    );
  }
}

QuizBrain:

class QuizBrain {
  int _questionBankNumber = 0;

  List<Question> _questionBank = [
    Question('Why is the world round?', 'Dummy answer1', 'Dummy answer2',
        'Dummy answer3', 'Dummy answer4', 'Dummy answer1'),
    Question('Is the sun blue in colour?', 'Dummy answer1', 'Dummy answer2',
        'Dummy answer3', 'Dummy answer4', 'Dummy answer1'),
    Question('How often does the rooster moo?', 'Dummy answer1',
        'Dummy answer2', 'Dummy answer3', 'Dummy answer4', 'Dummy answer1')
  ];

  void nextQuestion() {
    if (_questionBankNumber < _questionBank.length - 1) {
      _questionBankNumber++;
    }
  }

//ASSUMPTION
  String getQuestionText() {
    return _questionBank[_questionBankNumber].q;
  }
}

class Question {
  String q;
  String ans1;
  String ans2;
  String ans3;
  String ans4;
  String ans5;
  Question(this.q, this.ans1, this.ans2, this.ans3, this.ans4, this.ans5);
}

Upvotes: 1

Dhaval Patel
Dhaval Patel

Reputation: 409

I think you can change object position like below:-

class _QuestionPageState extends State<QuestionPage> {
  QuizBrain quizBrain = QuizBrain(); //Change object build method to global.

  @override
  Widget build(BuildContext context) {

    void nextQuestion() {
      setState(() {
        quizBrain.nextQuestion();
      });
    }

    return SafeArea(
        child: Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Center(
            child: Text('Questions'),
          ),
          Text(quizBrain.getQuestionText()),
          RaisedButton(
            onPressed: nextQuestion,
            child: Text('Next Qns'),
          ),
        ],
      ),
    ));
  }
}

Upvotes: 1

Related Questions