Flutter 박스 디자인(margin, padding, decoration, 정렬) & 버튼 속성

margin, padding

body: Container(
    margin: EdgeInsets.fromLTRB(left, top, right, bottom)
    padding: EdgeInsets.fromLTRB(10, 20, 30, 40),
    child: Text('안녕'),
        ),

• margin: EdgeInsets.all(30) : 상하좌우 여백
• padding: EdgeInsets.fromLTRB(10, 20, 30, 40) : 좌,상,우,하
• EdgeInsets.all(30) 이렇게 하면 모든 곳에 여백을 줄 수 있다.

• Row(), Column()은 안되고 Container() 에만 여백을 줄 수 있다.

• Row() 에 여백주고 싶으면 Container() 위젯을 안쪽이나 바깥쪽이나 아무데나 추가하면 됩니다.

---

decoration

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //Image.asset('assets/dog.png')
      home: Scaffold(
          appBar: AppBar(title: Text('앱임'),),
          body: Container(
            width: 150, height: 50,
            margin: EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: Colors.blue,
              border: Border.all(color: Colors.black),
              borderRadius: BorderRadius.circular(10),
            ),
            child: Text('test'),
          )
      ),
    );
  }
}

*주의

decoration을 선언했다면 Container바로 아래의 color를 선언하였을 시 에러가 발생.
color 속성은 decoration 내부에 선언할 것.

---

위젯 정렬하기

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //Image.asset('assets/dog.png')
      home: Scaffold(
          appBar: AppBar(title: Text('앱임'),),
          body: Align(
            alignment: Alignment.centerLeft,
            child: Container(
              width: 150, height: 50, color: Colors.blue,

            ),
          )
      ),
    );
  }
}

• 정렬하고 싶은 위젯을 Align으로 감싸면 됨.
• alignment: 코드로 시작하면 된다.
• 아래는 alignment: Alignment.centerLeft 코드 효과이다.

---

가로로 꽉차게

• width : double.infinity
• 부모 위젯의 크기를 넘어가지 않는 선에서 꽉 채워줌

---

버튼 속성

• TextButton
• ElevatedButton
• IconButton

TextButton( child: Text('버튼임'), onPressed: (){} )
ElevatedButton( child: Text('버튼임'), onPressed: (){} )
IconButton( icon: Icon(), onPressed: (){} )

버튼 안의 파라미터는 child, onPressed 두 개 있어야함