Как я могу расположить изображение на краю экрана

Question

У меня есть экран регистрации в моем приложении флаттера, и дизайн у меня выглядит следующим образом:

Проблема, с которой я пытаюсь добиться этого дизайна, заключается в выравнивании полос изображение в левом нижнем углу экрана до края. Я попытался добиться этого, используя следующий код.

body: ListView(
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(30.0),
        child: Column(
          children: <Widget>[
            Form(
              child: Column(
                children: <Widget>[
                  TextFormField(
                    controller: nameController,
                    textInputAction: TextInputAction.next,
                    focusNode: _nameNode,
                  ),
                  TextFormField(
                    controller: phoneController,
                    keyboardType: TextInputType.phone,
                    textInputAction: TextInputAction.next,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      Stack(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(left: 95),
            child: RaisedButton(
              child: Padding(
                padding: const EdgeInsets.all(10.0),
                child: Text(
                  "Register",
                ),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(right: 0, top: 25),
            child: Image.asset("assets/images/stripes.png",height: 240.0,width:130.0,fit: BoxFit.cover,),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 80, top: 100),
            child: Column(
              children: <Widget>[
                Text(
                  "Have an account already",
                ),
                FlatButton(
                  child: Text(
                    "Login here",
                  ),
                ),
              ],
            ),
          ),
        ],
      ),      
    ],
  ),

Я удалил некоторые виджеты, но это то, что я пытался, и я получил следующий результат: здесь

Как видите, изображение полос не начинается с края экрана. Я также пытался использовать виджет positioned. Таким образом, я сделал виджет positioned дочерним для виджета stack следующим образом

body: Stack(
    children: <Widget>[
      Positioned(
        bottom: -133,
        left: -205,
        height:300.0,
        width:430.0,
        child: Image.asset('assets/images/stripes.png')
      ),
      ListView(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(30.0),
            child: Column(
              children: <Widget>[
                Form(
                  child: Column(
                    children: <Widget>[
                      TextFormField(
                        controller: nameController,
                        textInputAction: TextInputAction.next,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Stack(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(left: 95),
                child: RaisedButton(
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Text(
                      "Register",
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(left: 80, top: 100),
                child: Column(
                  children: <Widget>[
                    Text(
                      "Have an account already",
                    ),
                    FlatButton(
                      child: Text(
                        "Login here",
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),      
        ],
      ),
    ]
  ),

Это выравнивает изображение по краю экрана. Но поскольку я использую виджет Stack, он покрывает другие виджеты при прокрутке страницы. Вы можете проверить изображение здесь . Я удалил много виджетов для создания минимального кода, но основные задействованные виджеты все еще там. Есть ли способ добиться дизайна? Любая помощь будет оценена. Спасибо.

Answer 1

Вам нужно будет обрезать изображение перед его размещением в приложении, но вы можете сделать это следующим образом:

  body: Stack(children: <Widget>[
    Align(
        alignment: Alignment.bottomLeft,
        child: Image.asset('assets/images/stripes.png')),
    ListView(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(30.0),
          child: Column(
            children: <Widget>[
              Form(
                child: Column(
                  children: <Widget>[
                    TextFormField(
                      textInputAction: TextInputAction.next,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        Stack(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(left: 95),
              child: RaisedButton(
                onPressed: () {},
                child: Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Text(
                    "Register",
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 80, top: 100),
              child: Column(
                children: <Widget>[
                  Text(
                    "Have an account already",
                  ),
                  FlatButton(
                    onPressed: () {},
                    child: Text(
                      "Login here",
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    ),
  ]),

Answer 2

В строках заполнения вам нужно удалить const: padding: EdgeInsets.only (left, top, botom, right) и попробовать использовать столбец crossAxisAlignment: CrossAxisAlignment.start, Надеюсь, вы можете оставить ссылку на Github