플러터 기초 02

플러터는 위젯 안에 위젯을 넣기가 가능하다.

예를 들어 center 라는 위젯 안에 container 를 넣을수 있다.

 

위젯은 대문자로 시작하고 소괄호가 뒤에 붙어 있다.

다음과 같은 형태로 넣을 수 있다.

 

Center(

  child : Container(width : 00, height: 00, color: Colors.red),

}

 

Scaffold 라는 위젯은 상중하로 나눠준다.

다만  상하는 필수가 아니지만 바디는 필수다.

AppBar() 는 상단바 간단히 넣고싶을 때 쓰는 기본 위젯이며 title 파라미터를 가질 수 있다. 
BottomAppBar() 는 하단바 넣고싶을 때 쓰는 기본 위젯이며 child 파라미터를 가질 수 있다. 

소괄호 안에서 ctrl + space 누르면 사용가능한 파라미터 확인가능하다. 

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Container(),
        bottomNavigationBar: BottomAppBar(),
      )
    );
  }
}

 

Row 위젯 사용법

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Row(
          children: const [
            Icon(Icons.star),
            Icon(Icons.star),
            Icon(Icons.star),
          ],
        ),
      )
    );
  }
}

Row를 Colum 으로 바꾸면 가로가 아닌 세로로 항목을 나열한다.

 

const 는 사용해도 안해도 크게 문제되지 않는다. 다만 경고중이 나오는게 싫다면 analysis_option.yaml 파일의 rules:를 수정하면 된다.

 

rules 항목에 다음을 추가한다.

prefer_const_literals_to_create_immutables: false

보통 박스는 Container 위젯을 사용하는데 width, height, child 정도만 사용하려면 SizedBox 를 사용하는편이 좋다.

 

박스를 사용하는 간단한 예제이다.

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: 150, height: 150, color: Colors.blue,
          margin: EdgeInsets.all(20),
        ),
      )
    );
  }
}

margin 은 바깥 여백을 주는 것이고. all 파라미터는 모든 방향에 대해 마진을 같은 크기만큼 주는것이다.

따로 주고 싶다면 fromLTRB 파라미터를 사용한다.

박스에 대한 상세 조정은 decoration 을 사용한다.

 

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('제목출'),),
        body: Container(
          width: 150, height: 150,
          margin: EdgeInsets.fromLTRB(20,20,0,0),
          decoration: BoxDecoration(
            color: Colors.amber,
            border: Border.all(color: Colors.red),
            borderRadius: BorderRadius.circular(10),
          ),
        ),
      )
    );
  }
}