Flutter 플러터에서 행의 요소 간 간격 설정하기, Set the space between Elements in Row Flutter

질문

코드:

new Container(
          alignment: FractionalOffset.center,
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              new FlatButton(
                child: new Text('Don\'t have an account?', style: new TextStyle(color: Color(0xFF2E3233))),
              ),
              new FlatButton(
                child: new Text('Register.', style: new TextStyle(color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),),
                onPressed: moveToRegister,
              )
            ],
          ),
        ),  

그리고 결과는 여기 있습니다: https://dartpad.dev/?id=6bbfc6139bdf32aa7b47eebcdf9623ba

화면 중앙의 공간 없이 두 개의 FlatButton 요소를 옆에 놓는 방법은 무엇인가요?

답변

그것을 수행하는 많은 방법이 있습니다. 여기 몇 가지를 나열합니다:

1. 특정 공간을 설정하려면 SizedBox를 사용하십시오.

   Row(
     children: <Widget>[
       Text("1"),
       SizedBox(width: 50), // 폭을 지정합니다.
       Text("2"),
     ],
   )
   

   

---

2. 둘 다 가능한 한 멀리 떨어져 있도록하려면 Spacer를 사용하십시오.

   Row(
     children: <Widget>[
       Text("1"),
       Spacer(), // Spacer 사용
       Text("2"),
     ],
   )
   

   

---

3. 필요에 따라 mainAxisAlignment을 사용하십시오:

   Row(
     mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 필요한 대로 사용하십시오.
     children: <Widget>[
       Text("1"),
       Text("2"),
     ],
   )
   

   

---

4. Row 대신 Wrap을 사용하고 일부 spacing을 지정하십시오.

   Wrap(
     spacing: 100, // 여기에서 간격을 설정합니다.
     children: <Widget>[
       Text("1"),
       Text("2"),
     ],
   )
   

   

---

5. Row 대신 Wrap을 사용하고 alignment을 지정하십시오.

   Wrap(
     alignment: WrapAlignment.spaceAround, // 정렬을 설정합니다.
     children: <Widget>[
       Text("1"),
       Text("2"),
     ],
   )