Flutter: is there any possibility to send the button value to the text field?

user_13711415 0
Viewed 777

I am Writing a small quiz game, in which I am pressing the button and these buttons are going to the empty text fields, I don't know how to send the text of the button to the text fields.

enter image description here

here is my code :

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: NinjaCard()));

class NinjaCard extends StatefulWidget {
  @override
  _NinjaCardState createState() => _NinjaCardState();
}

class _NinjaCardState extends State<NinjaCard> {
  String result = "";
  String shaka = "";
  var text;
  String str;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(title: Text('Animals'), backgroundColor: Colors.green),
      body: Padding(
        padding: EdgeInsets.all(15),
        child: Column(
          children: <Widget>[
            Center(
              child: Image.asset('lib/photo-1495594059084-33752639b9c3.jpg'),
            ),
            SizedBox(width: 10, height: 10),
            Row(children: <Widget>[
              Container(
                color: Colors.grey,
                width: 40.0,
                child: Text('$result', style: TextStyle(fontSize: 10.0, height: 2.0, color: Colors.black)),
              ),
              SizedBox(width: 10),
              Container(
                color: Colors.grey,
                width: 40.0,
                child: Text('$shaka', style: TextStyle(fontSize: 10.0, height: 2.0, color: Colors.black)),
              ),
              SizedBox(width: 15),
              Row(
                children: <Widget>[
                  SizedBox(
                    width: 50,
                    child: RaisedButton(
                      onPressed: () {},
                      color: Colors.green,
                      splashColor: Colors.red,
                      child: Text('S', style: TextStyle(backgroundColor: Colors.green, fontSize: 20, color: Colors.white)),
                    ),
                  ),
                  SizedBox(width: 15),
                  SizedBox(
                    width: 50,
                    child: RaisedButton(
                      onPressed: () {},
                      color: Colors.green,
                      splashColor: Colors.red,
                      child: Text('T', style: TextStyle(backgroundColor: Colors.green, fontSize: 20, color: Colors.white)),
                    ),
                  ),
                  SizedBox(width: 15),
                ],
              ),
            ]),
          ],
        ),
      ),
    );
  }
}
dart flutter navigation
1 Answers

In a simple case, I would go with a stateful widget and array of letters. Of course, it could be created and sized dynamically, below I only explain the basic idea with some simplifications (no duplicate checks, no shuffling):

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App',
      home: GuessTheWordWidget(),
    );
  }
}

class GuessTheWordWidget extends StatefulWidget {
  @override
  _GuessTheWordWidgetState createState() => _GuessTheWordWidgetState();
}

class _GuessTheWordWidgetState extends State<GuessTheWordWidget> {
  String _word = 'Goldfish';
  List<String> _input = List.generate(8, (_) => '');
  int _position = 0;

  void _press(int rune) {
    setState(() {
      if (_position < _input.length) {
        print('Position ${_position}, rune: ${String.fromCharCode(rune)}');
        _input[_position++] = String.fromCharCode(rune);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('App'),
      ),
      body: Center(
          child: Column(children: <Widget>[
        Expanded(
            child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: _input
                    .map((letter) => Container(
                          margin: const EdgeInsets.all(15.0),
                          padding: const EdgeInsets.all(3.0),
                          decoration: BoxDecoration(
                              border: Border.all(color: Colors.blueAccent)),
                          child: Text(letter),
                        ))
                    .toList())),
        Expanded(
            child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: _word.runes
                    .map((rune) => RaisedButton(
                          onPressed: () => _press(rune),
                          child: Text(String.fromCharCode(rune),
                              style: TextStyle(fontSize: 20)),
                        ))
                    .toList())),
      ])),
    );
  }
}

screenshot

Go play with this code at DartPad: https://dartpad.dev/69bae58772305c74f1688193076ecaef!

user_7505100
Related