[Flutter basic] Container/Row/Column 사용해 구글 검색 페이지 구현하기 튜토리얼

지금까지 배운 Container 와 Row/Column을 사용해 

구글의 메인화면인 검색 페이지를 구현 해보려한다.

 

 

 

화면을 구현할때 우선 어떻게 그려낼지 생각해보고 작업을 진행하는게 좋다.

 

해당 UI는 크게 세개로 나뉘어 진다.

구글로고 / 입력창 / 텍스트 

1. 이 세개는 세로로 그려져 있기 때문에 Column 을 사용하는것이 좋겠다.

그리고 정렬을 가운데 정렬을 하면 될것이다.

 

 

2. 검색창에는 돋보기 모양의 이미지가 있음을 확인 할수있다.

검색창을 크게 Container로 두고

그 안에 child로 이미지를 넣은후

왼쪽으로 배치하면 될것이다.

 

3. 그리고 맨 아래에 있는 텍스트(google 제공 서비스:  English ) 는 

텍스트와 버튼 으로 나뉘어진다

세로로 그리면 되므로 Row를 활용 할수있을것이다.

 

 

그럼 우선 1번 먼저 코드를 짜보자

세개로 나뉘어진 UI들은 Container로 구현 하여 좀더 명확하게

잘 그려지고 있는지 확인하며 구현할것이다. 

 

body: Column(
          children: [
            Container(
              color: Colors.red,
              width: 250,
              height: 100,
            ),
            Container(
              color: Colors.blue,
              width: 400,
              height: 70,
            ),
            Container(
              color: Colors.yellow,
              width: 250,
              height: 60,
            ),
          ],
        ),

사이즈는 대강 비슷하게 설정했고 각각 잘 그려지고 있는지 확인하기 위해 색을 입혔다.

Column 안에있는 세개 컨테이너들이 기본값으로

가로 기준선상 가운데 정렬이 되어있어

건들 필요는 없으나 너비 사이즈가 가장 큰 파란색을 기준으로 

Column 자체의 너비가 지정되어 왼쪽으로 치우쳐져있어 가운데로 이동할 필요가 있어 보인다.

그리고 세개의 컨테이너들의 위아래 공간을 만들어줘야 할것같다.

 

Column 자체를 가운데로 보내기 위해서는

Column을 Container 로 감싼후에 가운데 정렬을 해주면 가능하다.

위 아래 공간을 위해 각각 컨테이너에 top margin을 설정해주면 좋을것같다.

body: Container(
        alignment: Alignment.center,
        child: Column(
          children: [
            Container(
              margin: EdgeInsets.only(top: 20),
              color: Colors.red,
              width: 250,
              height: 100,
            ),
            Container(
              margin: EdgeInsets.only(top: 20),
              color: Colors.blue,
              width: 400,
              height: 70,
            ),
            Container(
              margin: EdgeInsets.only(top: 20),
              color: Colors.yellow,
              width: 250,
              height: 60,
            ),
          ],
        ),
      ),

이렇게 Container 와 Column 을 가지고 전체적인 와꾸가 잡혔다.

빨간 컨테이너에는 로고 이미지만 넣어주면 된다.

이미지는 파일을 넣거나 URL을 넣어줘서 구현하는 방법이 있다.

파일을 받아서 하기는 귀찮으니

Url을 넣는 방식으로 구현하려면 쉽게 Image.network("이미지 주소" ) 를 통해 구현하면 된다.

 Container(
                margin: EdgeInsets.only(top: 20),
                width: 250,
                height: 100,
                child: Image.network(
                    "https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png")),

 

 

이제 검색창을 구현해보자 

파란색을 빼고 border를 회색으로 설정 해주고 border의 테두리를

조금 둥글게 해주자

 Container(
              margin: EdgeInsets.only(top: 20),
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey),
                  borderRadius: BorderRadius.circular(30)),
              width: 400,
              height: 50,
            ),

 

 

안에 검색 아이콘과 textField가 들어갈것이지만

TextField는 복잡하니 패스하고 Container를 넣어주도록 하자

child: Row(
                children: [Icon(Icons.search), Container()],
              ),

돋보기 아이콘이 왼쪽으로 너무 붙어있어 답답하니 왼쪽 마진을 줘서 

떼도록 하자. 아이콘 자체에 마진 기능이 업으므로

아이콘을 컨테이너로 감싼후 마진을 줘야한다.

 Container(
              margin: EdgeInsets.only(top: 20),
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey),
                  borderRadius: BorderRadius.circular(30)),
              width: 400,
              height: 50,
              child: Row(
                children: [
                  Container(
                      margin: EdgeInsets.only(left: 10),
                      child: Icon(Icons.search)),
                  Container()
                ],
              ),
            ),

\

 

끝이 다가 오고있다.

마지막 텍스트와 버튼을 구현해보자

아까 생각했던 데로 Row안에 둘을 넣어보자.

Container(
              margin: EdgeInsets.only(top: 20),
              color: Colors.yellow,
              width: 250,
              height: 60,
              child: Row(
                children: [
                  Text("Google 제공 서비스 : "),
                  Text(
                    "English",
                    style: TextStyle(color: Colors.blue),
                  )
                ],
              ),
            ),

ㅇ

여기서 수정해야할것이 두가지가 보일것이다.

1. 가운데 정렬이 안됨

2. 버튼이 아니라 텍스트로 구현되므로 버튼기능이 안됨 (English) 

버튼이 아니라 Text를 파란색으로 바꿔서 구현한 이유는

Flutter 에 GestureDetector라는 좋은 기능이 있기 때문이다.

어떤 UI던 GestureDetector 로 감싸주면 버튼기능을 수행할수있다.

 child: Row(
                children: [
                  Text("Google 제공 서비스 : "),
                  GestureDetector(
                    onTap: () {
                      print("click");
                    },
                    child: Text(
                      "English",
                      style: TextStyle(color: Colors.blue),
                    ),
                  )
                ],
              ),

 

이제 Row를 가운데로 보내주기 위해 

row의 정렬 방식으로 바꾸면 된다.

Row를 감싸고 있는 컨테이너 에서 가운데 정렬을 하면 되지 않을까? 싶지만 

그건 안된다. 

Row는 이미 가장 큰 영역을 차지하고있다. (가로)

즉 노란 컨테이너 영역 모두를 차지하고있다 (가로만)

그러므로 Row안에서 자식들을 가운데 정렬해줘야 한다.

row의 가로 기준선 정렬은? Main 이다. 

MainAxisAlignment 를 center 로 변경해주자 

 

 

Container(
              margin: EdgeInsets.only(top: 20),
              width: 250,
              height: 60,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text("Google 제공 서비스 : "),
                  GestureDetector(
                    onTap: () {
                      print("click");
                    },
                    child: Text(
                      "English",
                      style: TextStyle(color: Colors.blue),
                    ),
                  )
                ],
              ),
            ),