42

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;
  }
}
iBob101
  • 1,460
  • 3
  • 14
  • 20
  • Can you give an example Android or iOS application which has this behavior? Or an example iOS or Android API we should expose via Flutter's default Keyboard wrapper? If so we're happy to do so! And welcome a feature request at https://github.com/flutter/flutter/issues/new – Eric Seidel Apr 06 '17 at 02:56
  • Sure - www.swipesapp.com is a todo site with an IOS app that supports this when you add a new task. – iBob101 Apr 07 '17 at 11:43
  • Or how about the standard Notes app on the iPhone? Start a new note and the keyboard starts with shift pressed, as I would like. – iBob101 Apr 07 '17 at 13:57

2 Answers2

79

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
   ),
)
pat64j
  • 1,041
  • 8
  • 8
6

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.

Eric Seidel
  • 3,282
  • 1
  • 15
  • 22