[Flutter] 레이아웃 연습 - 숨고

레이아웃 연습할 겸 따라하던 숨고 디자인을 완성했다

물론 첫 페이지 ㅋㅋㅋ

 

여태까지 배운 것들을 이용하려고 했는데 

커스텀 위젯을 인자를 받아서 입력하여 이용하기도 했다.

BoxDecoration, Padding, SizedBox, TextColor
Column, Row 그리고 TextButton, Expand, Flexible의 차이도 조금이나마 파악했고,

crossAxisAlignment와 mainAxisAlignment의 차이도 완벽하게 이해했다

 

그리고 마지막으로 SingleChildScrollView를 이용해서 스크롤 기능도 이용했다.

import 'package:flutter/material.dart';

void main(){
  runApp(const Soomgo());
}

class Soomgo extends StatelessWidget {
  const Soomgo({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey[300],
        appBar: AppBar(
          backgroundColor: Colors.white,
          title: Text('받은 요청', style: TextStyle(color: Colors.black,)),
          actions: [Icon(Icons.notifications_none_outlined, color: Colors.black,),
          SizedBox(
            width: 18,
          ),],
        ),
        body: SingleChildScrollView(
          child:
            Column(
              children: [
                Advertisement(),
                Post(),
                Post(),
                Post(),
                ],
            ),
        )
      ),
    );
  }
}

class InfoButton extends StatelessWidget {
  // const InfoButton({Key? key}) : super(key: key);
  final String info;

  InfoButton(this.info);

  @override
  Widget build(BuildContext context) {
    return TextButton(onPressed: (){},
      child: Text('$info',
              style: TextStyle(color: Colors.grey)),
                        style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.grey[200]),),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(
        color: Colors.white,
      ),
      child: Padding(
        padding:
        const EdgeInsets.all(15.0),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(10.0),
          child: DecoratedBox(
            decoration: BoxDecoration(color: Colors.red,),
            child:
            SizedBox(
              width: double.infinity,
              child: Image.asset('ad.png'),
            ),
          ),
        ),
      ),
    );
  }
}


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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: 8,
        ),
        DecoratedBox(
          decoration: BoxDecoration(color: Colors.white,),
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: SizedBox(
              child:
              Column(
                children: [
                  Row(
                    children: [
                      Text('영어 과외', style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900,)),
                    ],
                  ),
                  SizedBox(height: 8,),
                  Row(
                    children: [
                      Text('경기 안산시 단원구 초지동', style: TextStyle(fontSize: 15,)),
                      Text(' · ', style: TextStyle(fontSize: 15,)),
                      Text('권경미', style: TextStyle(fontSize: 15,)),
                    ],
                  ),
                  SizedBox(height: 3,),
                  Row(
                    children: [
                      Text('받은 견적 ', style: TextStyle(fontSize: 15,)),
                      Text('3개', style: TextStyle(fontSize: 15,)),
                      Text(' · ', style: TextStyle(fontSize: 15,)),
                      Text('5시간 전', style: TextStyle(fontSize: 15,)),
                    ],
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  SizedBox(
                    child: Column(
                      children: [
                        Row(
                          children: [
                            InfoButton('자기개발'),
                            SizedBox(width: 3),
                            InfoButton('실무 능력 향상'),
                            SizedBox(width: 3),
                            InfoButton('30대'),
                            SizedBox(width: 3),
                            InfoButton('여자'),
                          ],
                        ),
                        SizedBox(
                          height: 3,
                        ),
                        Row(
                          children: [
                            InfoButton('회화 (Speaking)'),
                            SizedBox(width: 3),
                            InfoButton('비즈니스'),
                            SizedBox(width: 3),
                            InfoButton('토요일'),
                            SizedBox(width: 3),
                            InfoButton('오전 (9시~12시)'),
                          ],
                        ),
                        SizedBox(
                          height: 3,
                        ),
                        Row(
                          children: [
                            InfoButton('고수가 있는 곳으로 갈게요'),
                            SizedBox(width: 3),
                            InfoButton('카페/스터디룸'),
                            SizedBox(width: 3),
                            InfoButton('제가 영어로 최대한 말...'),
                          ],
                        ),
                        // DecoratedBox(decoration: BoxDecoration(color: Colors.grey,),
                        //   child:
                        //     SizedBox(
                        //   height: 10,
                        // ),),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        SizedBox(
          height: 1,
        ),
        SizedBox(
          height: 40,
          child: DecoratedBox(
            decoration: BoxDecoration(color: Colors.white,),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(
                  flex: 3,
                  child:
                  TextButton(onPressed: (){}, child: Text('삭제', style: TextStyle(fontSize: 16, color: Colors.grey[700],)),),
                ),
                Container(
                  color: Colors.grey[400],
                  width: 0.5,
                ),
                Expanded(
                  flex: 5,
                  child:
                  TextButton(onPressed: (){}, child: Text('자세히 보기', style: TextStyle(fontSize: 16,)),),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

 

데이터를 받아서 직접 디자인하게 된다면 어떤 부분을 수정해야 할까?

제목, 배우고 싶은 과목 부분
이름, 지역, 과외를 신청할 때 클릭하게 되는 것들 - 회색 버튼들,
그리고 해당 공고가 몇 시간 전에 올라왔는지, 고수들에게 얼마나 많은 견적을 받았는 지  실시간으로 데이터가 변경되어야 한다!또 여러 과목들 중에서 분류를 제공할 수 있어야겠다