플러터(Flutter) - 위젯 여러개 만들기[children]

안녕하세요 놀이방 사장입니다.

 

이번 포스팅은 플러터

위젯 여러개만들기입니다.

지금까지는 child를 이용해서 하나의 위젯만 만들었습니다.

이제는 여러개의 위젯을 만들어볼려고 합니다.

 

이때 필요한 옵션은

Row와 Column입니다.

그리고 child가 아닌 children을 이용해 배열 형태를 사용해야합니다.

 

저번 포스팅에 이어서 소스를 작성하고 있습니다.

만약 앞에 소스를 알고 싶으시면 이전 포스팅을 보고 와주세요

 

@override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: Text('Material Design App'),),
      floatingActionButton: FloatingActionButton(child: Icon(Icons.add),
        onPressed: (){
        },
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            
          ],
        ),
      ),
    );
  }
}

 

스캐폴드안에 body를 선언하고 그 안에 Container의 child로 Column을 지정하고

다시 Column안에 children을 이용해 위젯 목록을 배열 형태로 나열할 기본 골격을 만들어줍니다.

 

class _MaterialFlutterApp extends State<MaterialFlutterApp>{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: Text('Material Design App'),),
      floatingActionButton: FloatingActionButton(child: Icon(Icons.add),
        onPressed: (){
        },
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Icon(Icons.android),
            Text('android')
          ],
        ),
      ),
    );
  }
}

 

 

배열 안에 여러가지 위젯을 넣어주면 됩니다.

지금은 아이콘이랑 텍스트를 추가해주었습니다.

 

현재 위젯이 왼쪽상단으로 가 있기 때문에 중앙에 오도록 정렬하겠습니다.

가로정렬 -> child : Center()

세로로도 정렬할려면 Column안쪽에 mainAxisAlignment를 선언해주어야함

class _MaterialFlutterApp extends State<MaterialFlutterApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Material Design App'),),
        floatingActionButton: FloatingActionButton(child: Icon(Icons.add),
          onPressed: () {},
        ),
        body: Container(
          child: Center(
            child: Column(
              children: <Widget>[
                Icon(Icons.android),
                Text('android')
              ],
            mainAxisAlignment: MainAxisAlignment.center,
            ),
          ),
        ),
    );
  }
}

 

 

위젯 구성

 

 

이상으로 포스팅을 마치겠습니다.