如何在Flutter中创建一个字符串输入字段?

huangapple go评论78阅读模式
英文:

How to create a string input field flutter?

问题

我的模拟器看起来像

如何在Flutter中创建一个字符串输入字段?

将键盘类型更改为文本,将输入值更改为文本字段名称。

英文:

My emulator looks like

如何在Flutter中创建一个字符串输入字段?

How to create a string input field flutter?

Change the keyboard type as text and input value as a string for the text field name.

答案1

得分: 0

更改

keyboardType: TextInputType.text

检查我的main.dart文件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Color hexToColor(String code) {
      return new Color(int.parse(code.substring(1, 7), radix: 16) + 0xFF000000);
    }

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "End User Page",
      home: new Material(
        child: new Container(
          padding: const EdgeInsets.all(30.0),
          color: Colors.white,
          child: new Container(
            child: new Center(
              child: new Column(
                children: [
                  new Padding(padding: EdgeInsets.only(top: 140.0)),
                  new Text(
                    'Name:',
                    style: new TextStyle(color: hexToColor("#F2A03D"), fontSize: 25.0),
                  ),
                  new Padding(padding: EdgeInsets.only(top: 50.0)),
                  new TextFormField(
                    decoration: new InputDecoration(
                      labelText: "Enter Name",
                      fillColor: Colors.white,
                      border: new OutlineInputBorder(
                        borderRadius: new BorderRadius.circular(25.0),
                        borderSide: new BorderSide(),
                      ),
                    ),
                    validator: (val) {
                      if (val.length == 0) {
                        return "Name cannot be empty";
                      } else {
                        return null;
                      }
                    },
                    keyboardType: TextInputType.text,
                    style: new TextStyle(
                      fontFamily: "Poppins",
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

输出:

如何在Flutter中创建一个字符串输入字段?

干杯!

英文:

Change

 keyboardType: TextInputType.text

Check my main.dart file

import 'package:flutter/material.dart';void main() => runApp(new MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    Color hexToColor(String code) {
      return new Color(int.parse(code.substring(1, 7), radix: 16) + 0xFF000000);
    }return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: "End User Page",
        home: new Material(
            child: new Container (
                padding: const EdgeInsets.all(30.0),
                color: Colors.white,
                child: new Container(
                  child: new Center(
                      child: new Column(
                          children : [
                            new Padding(padding: EdgeInsets.only(top: 140.0)),
                            new Text('Name:',
                              style: new TextStyle(color: hexToColor("#F2A03D"), fontSize: 25.0),),
                            new Padding(padding: EdgeInsets.only(top: 50.0)),
                            new TextFormField(
                              decoration: new InputDecoration(
                                labelText: "Enter Name",
                                fillColor: Colors.white,
                                border: new OutlineInputBorder(
                                  borderRadius: new BorderRadius.circular(25.0),
                                  borderSide: new BorderSide(
                                  ),
                                ),
                                //fillColor: Colors.green
                              ),
                              validator: (val) {
                                if(val.length==0) {
                                  return "Name cannot be empty";
                                }else{
                                  return null;
                                }
                              },
                              keyboardType: TextInputType.text,
                              style: new TextStyle(
                                fontFamily: "Poppins",
                              ),
                            ),
                          ]
                      )
                  ),)


            )
        )
    );}
}

Output:

如何在Flutter中创建一个字符串输入字段?

Cheers!

huangapple
  • 本文由 发表于 2020年1月6日 17:54:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/59609927.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定