Флаттер флажок нежелательного сенсорного пространства

Question

Я попытался создать экран входа в систему с помощью флаттера, там я добавил флажок «Запомнить меня», но я не смог правильно выровнять его,

Флажок флаттера занимал нежелательное пространство вокруг себя, чтобы обеспечить удобство работы с пользователем.

Вот как показывает мой макет,

Проверьте ниже код,

        new Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  new Row(
                    children: <Widget>[
                      new Checkbox(
                        activeColor: Colors.grey,
                        value: _isChecked,
                        onChanged: (bool value) {
                          _onChecked(value);
                        },
                      ),
                      new GestureDetector(
                        onTap: () => print("Remember me"),
                        child: new Text(
                          "Remember me",
                          style: new TextStyle(color: Colors.white70),
                        ),
                      )
                    ],
                  ),
                  new Text(
                    "Forgot password ?",
                    style: new TextStyle(color: Colors.white70),
                  )
                ],
              ),

Answer 1

Этого можно добиться, настроив виджет «Флажок».

1. Создайте CustomCheckbox, используя точный код из flutter / packages / flutter / lib / src / material / checkbox.dart .

2. Добавить новое поле в виджет CustomCheckbox

        final bool useTapTarget;
   

3. Обязательно добавьте новое поле в конструктор со значением по умолчанию, равнымtrue.

        this.useTapTarget = true
   

4. Измените метод построения в методе _CheckboxState .Добавьте этот блок кода над обратным вызовом.

        Size noTapTargetSize = Size(CustomCheckbox.width, 
        CustomCheckbox.width);
        final BoxConstraints additionalConstraints = 
        BoxConstraints.tight(widget
           .useTapTarget? size : noTapTargetSize);
   

5. Наконец, используйте свой виджет CustomCheckbox в своем коде и установите для своего настраиваемого поля значение false, чтобы удалить заполнение материала.пример

   Container(
           margin: EdgeInsets.only(right: 15),
           child:CustomCheckbox(
               value: _checked,
               materialTapTargetSize: null,
               onChanged: _onCheckBoxChange,
               useTapTarget: false,
               activeColor: Colors.teal),
         )
   

Answer 2

Попробуйте тогда,

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'NonStopIO',
      theme: new ThemeData(
        primarySwatch: Colors.red,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _rememberMeFlag = false;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('NonStopIO'),
      ),
      body: new Container(
        color: Colors.black38,
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Container(
              margin: new EdgeInsets.symmetric(vertical: 5.0, horizontal: 35.0),
              color: Colors.white70,
              height: 50.0,
            ),
            new Container(
              margin: new EdgeInsets.symmetric(vertical: 5.0, horizontal: 35.0),
              color: Colors.white70,
              height: 50.0,
            ),
            new Container(
                margin: new EdgeInsets.symmetric(vertical: 5.0, horizontal: 20.0),
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    new Row(
                      children: <Widget>[
                        new GestureDetector(
                          child: new Row(
                            children: <Widget>[
                              new Checkbox(
                                value: _rememberMeFlag,
                                onChanged: (value) => setState(() {
                                      _rememberMeFlag = !_rememberMeFlag;
                                    }),
                              ),
                              new Text(
                                "Remember me",
                                style: new TextStyle(color: Colors.white70),
                              )
                            ],
                          ),
                          onTap: () => setState(() {
                                _rememberMeFlag = !_rememberMeFlag;
                              }),
                        ),
                      ],
                    ),
                    new Container(
                      margin: new EdgeInsets.only(right: 15.0),
                      child: new Text(
                        "Forgot password ?",
                        style: new TextStyle(color: Colors.white70),
                      ),
                    )
                  ],
                )),
            new Container(
              margin: new EdgeInsets.symmetric(vertical: 5.0, horizontal: 35.0),
              color: Colors.orange,
              height: 50.0,
            ),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Здесь я настроил поле , чтобы выровнять флажок и ЗабылТекст пароля.