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

Question

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;
  }
}

Solution 1

The starting-lowercase was a bug in our iOS implementation of Flutter's keyboard wrapper, which has since been fixed as of today!

I filed a bug for making this configurable (so you can disable the autocapitalize sentences behavior) here: https://github.com/flutter/flutter/issues/9363

Please don't hesitate to reach out if this does not resolve your issue.

Solution 2

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
   ),
)

Solution 3

Here is the complete list of behaviors of TextInputAction class

textCapitalization: TextField provides options for capitalizing the text entered by the user.

1. TextCapitalization.sentences: This is the most common type of capitalization, and the first letter of each sentence is converted to uppercase.

   TextField(
    textCapitalization: TextCapitalization.sentences,
   ),
   

2. TextCapitalization.characters: Capitalize all characters in the sentence.

   TextField(
    textCapitalization: TextCapitalization.characters,
   ),
   

3. TextCapitalization.words: Capitalize the first letter of each word.

   TextField(
    textCapitalization: TextCapitalization.words,
   ),
   

4. Enable or disable autocorrection for a specific TextField. Use the AutoCorrect field to set it up. This also disables input suggestions.

   TextField(
 
     autocorrect: false,
   ),

   

Note: Only supports text keyboards, other keyboard types will ignore this configuration. Capitalization is locale-aware.