0

Нужно поле ввода при переходе на которое открывалась бы цифровая клавиатура и в которое можно было ббы вводить только цифры.
Позволяют ли это сделать Material виджеты?
Ряд обсуждений на github'е подтверждают, что Flutter поддерживает такую возможность.

Как это можно реализовать?

1 ответ 1

0

Все просто.
Все данные функции поддерживает обычный TextField

Для того, чтобы при переходе на данное поле отображалась цифровая клавиатура необходимо указать тип клавиатуры:

keyboardType: TextInputType.number

Однако, это не накладывает никаких ограничений на содержимое поля и это не спасет Вас от вставленных пользователем (Ctrl+C / Ctrl+V) символов, символов установленных программным путем и пр.

Для этого необходимо установить фильтр на вводимые данные.

inputFormatters: <TextInputFormatter>[
    FilteringTextInputFormatter.digitsOnly // С таким фильтром могут быть введены только числа
]

В итоге это поле можно объявить так:

new TextField(
    decoration: new InputDecoration(labelText: "Введите Ваше число"),
    keyboardType: TextInputType.number,
    inputFormatters: <TextInputFormatter>[
        FilteringTextInputFormatter.digitsOnly // С таким фильтром могут быть введены только числа
    ],
),

Рабочий пример

main.dart

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      home: new HomePage(),
      theme: new ThemeData(primarySwatch: Colors.blue),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new HomePageState();
  }
}

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.white,
      body: new Container(
          padding: const EdgeInsets.all(40.0),
          child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new TextField(
            decoration: new InputDecoration(labelText: "Введите Ваше число"),
            keyboardType: TextInputType.number,
            inputFormatters: <TextInputFormatter>[
    FilteringTextInputFormatter.digitsOnly // С таким фильтром могут быть введены только числа
],
          ),
        ],
      )),
    );
  }
}

введите сюда описание изображения

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.