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

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

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文件

  1. import 'package:flutter/material.dart';
  2. void main() => runApp(new MyApp());
  3. class MyApp extends StatelessWidget {
  4. @override
  5. Widget build(BuildContext context) {
  6. Color hexToColor(String code) {
  7. return new Color(int.parse(code.substring(1, 7), radix: 16) + 0xFF000000);
  8. }
  9. return MaterialApp(
  10. debugShowCheckedModeBanner: false,
  11. title: "End User Page",
  12. home: new Material(
  13. child: new Container(
  14. padding: const EdgeInsets.all(30.0),
  15. color: Colors.white,
  16. child: new Container(
  17. child: new Center(
  18. child: new Column(
  19. children: [
  20. new Padding(padding: EdgeInsets.only(top: 140.0)),
  21. new Text(
  22. 'Name:',
  23. style: new TextStyle(color: hexToColor("#F2A03D"), fontSize: 25.0),
  24. ),
  25. new Padding(padding: EdgeInsets.only(top: 50.0)),
  26. new TextFormField(
  27. decoration: new InputDecoration(
  28. labelText: "Enter Name",
  29. fillColor: Colors.white,
  30. border: new OutlineInputBorder(
  31. borderRadius: new BorderRadius.circular(25.0),
  32. borderSide: new BorderSide(),
  33. ),
  34. ),
  35. validator: (val) {
  36. if (val.length == 0) {
  37. return "Name cannot be empty";
  38. } else {
  39. return null;
  40. }
  41. },
  42. keyboardType: TextInputType.text,
  43. style: new TextStyle(
  44. fontFamily: "Poppins",
  45. ),
  46. ),
  47. ],
  48. ),
  49. ),
  50. ),
  51. ),
  52. ),
  53. );
  54. }
  55. }

输出:

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

干杯!

英文:

Change

  1. keyboardType: TextInputType.text

Check my main.dart file

  1. import 'package:flutter/material.dart';void main() => runApp(new MyApp());
  2. class MyApp extends StatelessWidget{
  3. @override
  4. Widget build(BuildContext context){
  5. Color hexToColor(String code) {
  6. return new Color(int.parse(code.substring(1, 7), radix: 16) + 0xFF000000);
  7. }return MaterialApp(
  8. debugShowCheckedModeBanner: false,
  9. title: "End User Page",
  10. home: new Material(
  11. child: new Container (
  12. padding: const EdgeInsets.all(30.0),
  13. color: Colors.white,
  14. child: new Container(
  15. child: new Center(
  16. child: new Column(
  17. children : [
  18. new Padding(padding: EdgeInsets.only(top: 140.0)),
  19. new Text('Name:',
  20. style: new TextStyle(color: hexToColor("#F2A03D"), fontSize: 25.0),),
  21. new Padding(padding: EdgeInsets.only(top: 50.0)),
  22. new TextFormField(
  23. decoration: new InputDecoration(
  24. labelText: "Enter Name",
  25. fillColor: Colors.white,
  26. border: new OutlineInputBorder(
  27. borderRadius: new BorderRadius.circular(25.0),
  28. borderSide: new BorderSide(
  29. ),
  30. ),
  31. //fillColor: Colors.green
  32. ),
  33. validator: (val) {
  34. if(val.length==0) {
  35. return "Name cannot be empty";
  36. }else{
  37. return null;
  38. }
  39. },
  40. keyboardType: TextInputType.text,
  41. style: new TextStyle(
  42. fontFamily: "Poppins",
  43. ),
  44. ),
  45. ]
  46. )
  47. ),)
  48. )
  49. )
  50. );}
  51. }

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:

确定