Ad

How To Random Select A String From List After Tabbing Button

- 1 answer

I would like to press a button and pick a random string from my list to display somewhere on the screen.

Currently, the convoTopic variable within the builder is running an error.

Any help is appreciated!

Below is my truncated code:


final List<String> ConvoTopics = [
'blah blah',
'black sheep',
'balh bath'
];

class ConvoPage extends StatefulWidget {

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

class _ConvoPageState extends State<ConvoPage> 

  @override
  Widget build(BuildContext context) {
    void generateConvoTopic() {
      final _random = Random();
      var convoTopic = ConvoTopics[_random.nextInt(ConvoTopics.length)];
      print(convoTopic);
    }

    return Scaffold(
      backgroundColor: Color(0xff04072E),
      appBar: AppBar(
        title: Text('Convo', style: TextStyle(color: Colors.white)),
        backgroundColor: Color(0xff04072E),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(children: <Widget>[
            Container(
                child: Align(
                    alignment: Alignment.center,
                    child: Text(convoTopic,
                    ),
// where randomized string appears
              ),
            ),
            ElevatedButton(
            
              onPressed: () async {
                generateConvoTopic();
              },
    // button's function is to randomize convo topic
              child: Container(
                child: Text('Get Convo'),
              ),
            ),
:
:
:

Ad

Answer

Your approach is mostly correct.

Three small things you were missing were

  1. You should define your generateConvoTopic in your State class rather than the build method.

  2. Your convoTopic should be a State class variable. You are currently defining it inside a function inside the build method. So it will only be accessible inside your function but you need to update it and read it, so it will go in State class.

  3. You should call setState whenever you want to update any variable of your State class. In your case, the convoTopic after you follow step 2.

  4. List item

;

final List<String> ConvoTopics = ['blah blah', 'black sheep', 'balh bath']
class ConvoPage extends StatefulWidget {
  @override
  _ConvoPageState createState() => _ConvoPageState();
}

class _ConvoPageState extends State<ConvoPage> {
  String convoTopic;

  void generateConvoTopic() {
    setState(() {
      convoTopic = ConvoTopics[Random().nextInt(ConvoTopics.length)];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xff04072E),
      appBar: AppBar(
        title: Text('Convo', style: TextStyle(color: Colors.white)),
        backgroundColor: Color(0xff04072E),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
            child: Column(children: <Widget>[
              Container(
                child: Align(
                  alignment: Alignment.center,
                  child: Text(convoTopic),
                ),
              ),
              ElevatedButton(
                onPressed: () async {
                  generateConvoTopic();
                },
                child: Container(
                  child: Text('Get Convo'),
                ),
              ),
    ]))));
  }
}
Ad
source: stackoverflow.com
Ad