Флаттер, извлекающий ввод меток из кнопок в текстовое поле

#flutter #user-input

Вопрос:

Вот мой код. Теперь я хочу, чтобы при нажатии кнопки «Повышенная кнопка» в текстовое поле отображалось то число, которое помечено на кнопке. Как вы можете видеть, у меня есть два текстовых поля, также мне нужно сделать их выбираемыми. Когда вы нажимаете на текстовое поле, вы фокусируете их и можете ввести номер.

Приложение представляет собой калькулятор очков для карточной игры, показанной здесь.

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

class GameScreen extends StatelessWidget {
  const GameScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // ignore: prefer_typing_uninitialized_variables
    return Scaffold(
        body: SafeArea(
            child: Column(children: <Widget>[
      const Spacer(),
      // ignore: avoid_unnecessary_containers
      SizedBox(
          height: 100,
          child: Row(children: const [
            Expanded(
                child: Text(
              "MI",
              style: TextStyle(fontSize: 50),
            )),
            Expanded(
                child: Text(
              "VI",
              style: TextStyle(fontSize: 50),
            )),
          ])),
      const Spacer(),
      Row(
        children: [TextField(), TextField()],
      ),
      const Spacer(),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Column(
            children: [
              // ignore: deprecated_member_use
              ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                      padding: const EdgeInsets.only(
                          top: 20, bottom: 20, right: 20, left: 20)),
                  child: const Text('CONTACTS',
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 30,
                          fontWeight: FontWeight.bold))),
            ],
          ),
          Column(
            children: [
              ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                      padding: const EdgeInsets.only(
                          top: 20, bottom: 20, right: 50, left: 50)),
                  child: const Text('POINTS',
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 30,
                          fontWeight: FontWeight.bold))),
            ],
          )
        ],
      ),
      const Spacer(),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Column(
            children: [
              ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                      padding: const EdgeInsets.only(
                          top: 20, bottom: 20, right: 50, left: 50)),
                  child:
                      const Text('7', style: TextStyle(color: Colors.white))),
            ],
          ),
          Column(
            children: [
              ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                      padding: const EdgeInsets.only(
                          top: 20, bottom: 20, right: 50, left: 50)),
                  child:
                      const Text('8', style: TextStyle(color: Colors.white))),
            ],
          ),
          Column(
            children: [
              ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                      padding: const EdgeInsets.only(
                          top: 20, bottom: 20, right: 50, left: 50)),
                  child:
                      const Text('9', style: TextStyle(color: Colors.white))),
            ],
          )
        ],
      ),
      const Spacer(),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Column(
            children: [
              ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                      padding: const EdgeInsets.only(
                          top: 20, bottom: 20, right: 50, left: 50)),
                  child:
                      const Text('4', style: TextStyle(color: Colors.white))),
            ],
          ),
          Column(
            children: [
              ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                      padding: const EdgeInsets.only(
                          top: 20, bottom: 20, right: 50, left: 50)),
                  child:
                      const Text('5', style: TextStyle(color: Colors.white))),
            ],
          ),
          Column(
            children: [
              ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                      padding: const EdgeInsets.only(
                          top: 20, bottom: 20, right: 50, left: 50)),
                  child:
                      const Text('6', style: TextStyle(color: Colors.white))),
            ],
          )
        ],
      ),
      const Spacer(),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Column(
            children: [
              ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                      padding: const EdgeInsets.only(
                          top: 20, bottom: 20, right: 50, left: 50)),
                  child:
                      const Text('1', style: TextStyle(color: Colors.white))),
            ],
          ),
          Column(
            children: [
              ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                      padding: const EdgeInsets.only(
                          top: 20, bottom: 20, right: 50, left: 50)),
                  child:
                      const Text('2', style: TextStyle(color: Colors.white))),
            ],
          ),
          Column(
            children: [
              ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                      padding: const EdgeInsets.only(
                          top: 20, bottom: 20, right: 50, left: 50)),
                  child:
                      const Text('3', style: TextStyle(color: Colors.white))),
            ],
          )
        ],
      ),
      const Spacer(),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Column(
            children: [
              ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                      padding: const EdgeInsets.only(
                          top: 20, bottom: 20, right: 40, left: 40)),
                  child: const Text('Del 1',
                      style: TextStyle(color: Colors.white))),
            ],
          ),
          Column(
            children: [
              ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                      padding: const EdgeInsets.only(
                          top: 20, bottom: 20, right: 50, left: 50)),
                  child:
                      const Text('0', style: TextStyle(color: Colors.white))),
            ],
          ),
          Column(
            children: [
              ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                      padding: const EdgeInsets.only(
                          top: 20, bottom: 20, right: 40, left: 40)),
                  child: const Text('Clear',
                      style: TextStyle(color: Colors.white))),
            ],
          )
        ],
      ),
      const Spacer(),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Column(
            children: [
              ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                      padding: const EdgeInsets.only(
                          top: 20, bottom: 20, right: 70, left: 70)),
                  child: const Text('SAVE GAME',
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 40,
                          fontWeight: FontWeight.bold))),
            ],
          ),
        ],
      ),
      const Spacer(),
    ])));
  }
}```

 

Ответ №1:

Это простой пример, чтобы получить Button текст TextField !Измените его в соответствии с вашими требованиями.

объявить TextEditingController s:

 TextEditingController cont1 = TextEditingController(),
      cont2 = TextEditingController();
 

И способ сборки:

 @override
  Widget build(BuildContext context) {
    return Column(children: [
      Row(
        children: [
        Expanded(
          child: TextField(
            controller: cont1,
            //other params
          ),
        ),
          const Spacer(flex: 1),
        Expanded(
          child: TextField(
            controller: cont2,
            //other params
          ),
        ),
      ]),
      ElevatedButton(
          onPressed: () {
            setState((){ //or other state management
              cont1.text = "8";
            });
          },
          style: ElevatedButton.styleFrom(
              padding: const EdgeInsets.only(
                  top: 20, bottom: 20, right: 50, left: 50)),
          child: const Text('8', style: TextStyle(color: Colors.white))),
    ]);
  }