preface

This article will document some solutions and tips for developing the interface using the Widgets provided by Flutter. Before this, I want to say that there is a milestone named Golas in the Github warehouse issue of Flutter. Now the progress of resolution is 30%. If you encounter some disgusting problems during development, I suggest you go here first, if you find the same problem and it is exactly 70% of the unsolved. Let’s not lose time on this problem.

The body of the

Question:

InkWell sets the background color causing the water ripple effect to disappear

new Container(
  color: Colors.red,
  child: new InkWell(
    onTap: (){},
  ),
);
Copy the code

Solution:

The problem here is actually in the Container, InkWell is the Material component. The effect of using Containe is to cover Up Inkwell rather than give him a background color. The correct answer is (similar problems can be mostly solved with this method) :

new Material(
  color: Colors.red,
  child: new InkWell(),
)
Copy the code

The problem

TextFiled Cursor problem. Take a look at the code causing the problem.

class _MyHomePageState extends State<MyHomePage> { var _text = ''; @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new TextField( controller: new TextEditingController.fromValue(new TextEditingValue(text: _text)), autofocus: true, )), floatingActionButton: new FloatingActionButton( onPressed: () { setState(() { _text = "flutter"; }); }, tooltip: 'Autocomplete', child: new Icon(Icons.add), ), ); }}Copy the code

Click FloatingButton again and you will see that the cursor is at the top of the input box.

To solve

This problem is easy to solve, but it feels weird to set the cursor position every time you set a text.

class _MyHomePageState extends State<MyHomePage> { var _text = ""; @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new TextField( controller: new TextEditingController.fromValue(new TextEditingValue( text: _text, selection: new TextSelection.collapsed(offset: _text.length))), autofocus: true, )), floatingActionButton: new FloatingActionButton( onPressed: () { setState(() { _text = "flutter"; }); }, tooltip: 'Autocomplete', child: new Icon(Icons.add), ), ); }}Copy the code

The problem

TextFiled set TextAlign to Center and the Right cursor will fail (Center has been fixed)

Dynamic figure

To solve

That’s a tricky question. There is no good solution at the moment. Sometimes the UI out of this design, you can refer to wechat nickname modification, click to jump to the next interface input content in save back.

tip

Sometimes the UI has an information entry page, and many entries have the same appearance and length, but some are input boxes, some are click and select. We’re probably going to use TextFiled when we’re extracting the UI in time. But TextField has its own click response. At this point, we actually have two views that help us offset the hit response from the TextField.

Usage:

new AbsorbPointer(
        child: new TextField(
          controller: new TextEditingController(
            text: "flutter",
          ),
        ),
      ),
Copy the code

The difference between AbsorbPointer and IgnorePointer is that the AbsorbPointer itself can also respond to click events, whereas IgnorePointer itself cannot. The example code is not shown here. If you are interested in the GestureDetector, try wrapping the AbsorbPointer and IgnorePointer respectively.

The last

I will continue to pay attention to the problems in the article, and will update in time if there are better solutions.