Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I configure auto-capitalization behavior in Flutter's text entry fields?

I'm experimenting with Flutter development on Windows. I have a simple test app with an InputField. I would like the first keyboard entry to be a capital letter but can't see a way of achieving that (e.g. launching the keyboard with shift pressed) that at the moment. Any ideas?

Code (a bit simplified) is:

import 'package:flutter/material.dart';  void main() {   runApp(new MaterialApp(       theme: new ThemeData.dark(),       home: new MainScreen()   )); }  class MainScreen extends StatelessWidget {   @override   Widget build(BuildContext context) {     return new Scaffold(         appBar: new AppBar(             leading: new IconButton(                 icon: new Icon(Icons.menu),                 tooltip: 'Navigation menu',                 onPressed: null,             ),             title: new Text('Test'),         ),         body: new NewTest(),     );   } }  /// Widget class NewTest extends StatefulWidget {   @override   _NewTestInputState createState() => new _NewTestInputState(); } /// State class _NewTestInputState extends State<NewTest> {   InputValue _currentInput;    void _handleInputChange(InputValue input) {     if (input != _currentInput){       setState(() {         _currentInput = input;       });     }   }    void _handleInputSubmitted(InputValue input) {     setState(() {       _currentInput = const InputValue();     });   }    @override   Widget build(BuildContext context) {     InputField _widget = new InputField(         value: _currentInput,         hintText: 'Enter text',         keyboardType: TextInputType.text,         autofocus: true,         onChanged: _handleInputChange,         onSubmitted: _handleInputSubmitted,         style: new TextStyle(fontSize: 20.0),     );     Container _container = new Container(         child: _widget,         decoration: new BoxDecoration(             border: new Border.all(                 color: Colors.green[300],                 width: 2.0,             ),         ),         padding: new EdgeInsets.all(16.0),     );     return _container;   } } 
like image 342
iBob101 Avatar asked Mar 12 '17 12:03

iBob101


People also ask

How do you auto capitalize in text?

Or use Word's keyboard shortcut, Shift + F3 on Windows or fn + Shift + F3 for Mac, to change selected text between lowercase, UPPERCASE or capitalizing each word.

How do you capitalize text flutters?

As we all know, Flutter is a framework created using the dart programming language. Dart has a method toUpperCase() that is used to capitalize the String text. The basic syntax for that is as below. So we can also use this in our Flutter Text() widget to transform the text to uppercase letters.

How do you auto capitalize the first letter in HTML?

Just include → style="text-transform:capitalize;" inside your input tag. Same solution as other answers.


1 Answers

Flutter has a textCapitalization property for textfields. Set this property to TextCapitalization.sentences or any of the available values eg .characters or .words Like so:

TextField(    keyboardType: TextInputType.text,    **textCapitalization: TextCapitalization.sentences,**    style: TextStyle(       fontSize: 30.0,       color: Colors.black,       fontWeight: FontWeight.bold    ), ) 
like image 95
pat64j Avatar answered Sep 23 '22 04:09

pat64j