[Flutter] Box 그리기, Typography와 Button Layout 만들기

Container

-정렬 : Center() / Align(alighment:Alignment._____)

- 박스 width 꽉차게 하는 법 : width:double.infinity

- margin 주는 법  margin : EdgeInsets.all()  / EdgeInsets.fromLTRB(_,_,_,_)

- padding 주는 법 padding: EdgeInsets.all()

- 다른 css decoration : BoxDecoration 

   +border : Border.all()

   +boxshadow

   +shape : BoxShape.circle

   +borderRadius

-박스 폭 조절

  1) Flexible(flex:1, child: )  - 비율 조절, 안드로이드의 width:0, weight:1 같은 역할

  2) Expandere(flex :1, child:) - 하나의 박스만 가로폭을 꽉채우는 법

body: Container(
  width: 100,
  height: 100,
  margin: EdgeInsets.all(20),
  padding: EdgeInsets.all(10),
  decoration: BoxDecoration(
    // shape: BoxShape.circle,
    color: Colors.blue, // 여기서 컨테이너의 색을 설정합니다.
    boxShadow:[
      BoxShadow(
        color: Colors.grey.withOpacity(0.7),
        blurRadius: 5.0,
        spreadRadius: 0.0,
        offset: const Offset(0,7),
      )
    ] ,
    border: Border.all(
      color: Colors.red, // 테두리의 색
      width: 2, // 테두리의 두께
    ),
    borderRadius: BorderRadius.all(
        Radius.circular(5.0) // POINT
    ),
  ),
  child: Text('안녕하세요'),
)

 

Typography

- Text style 지정 Text( ' ' . style: TextSyle())

- 컬러 지정 color : Colors.red 또는 Color(0xff색상코드) 또는 Color.fromRGBD

- fontWeight : FontWeignht.w800

- fontSize 등등 

child: Text('안녕하세요',
      style: TextStyle(color: Color(0xffffc0cb), fontSize: 20, fontWeight: FontWeight.w700))
)

 

Icon 

-color, size 만 지정 가

Icon(Icons.star, color:Colors.red, size: 100,)

 

*내가 연습한 전체 코드

body: Column(
  children: [ Text('안녕하세요',
      style: TextStyle(color: Color(0xffffc0cb), fontSize: 20, fontWeight: FontWeight.w700)),
  Icon(Icons.star, color:Colors.red, size: 100,)
  ]
)

 

 

 

Button

1) TextButton

2) IconButton

3) ElevatedButton

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

 

AppBar

-title: 왼쪽 제목

-leading: 왼쪽에 넣을 아이콘

-actions:[우측에 넣을 아이콘]

appBar: AppBar(
  actions: [Icon(Icons.star), Icon(Icons.star), Icon(Icons.star)],
  leading: Icon(Icons.star), //왼쪽에 넣을 아이콘 서랍버튼 만들때 사용
  title: Text('앱임', style: TextStyle(color: Colors.red),),
  ),

 

++당근 AppBar & Container 클론 코딩

예시 그림

 

home: Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.white,
    actions:[
      Icon(Icons.search, color: Colors.black,),SizedBox(width: 10),
      Icon(Icons.menu, color: Colors.black),SizedBox(width: 10),
      Icon(Icons.notifications_outlined, color: Colors.black), SizedBox(width: 10),],
    title: Row(
      children: [
        Text('금호동 3가', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),),
        Icon(Icons.expand_more, color: Colors.black,)
      ],
    )
    ),
  body: Container(
    height: 150,
    padding: EdgeInsets.all(5),
    child: Row(
      children:[
        Flexible(flex:1, child: Image.asset('assets/dslr.jpg')),
        Flexible(flex:2, child:Container(
          padding: EdgeInsets.all(5),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('캐논 DESLR 100D (단렌즈, 충전기, 16기가 SD 포함',
                style:TextStyle(fontSize: 20)),
              Text('지역 이름 • 끌올 10분 전', style: TextStyle(color: Colors.black38, fontSize: 12),),
              Text('100000원', style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Icon(Icons.favorite_border, color: Colors.black38, size: 20,),
                  Text('4', style: TextStyle(color: Colors.black38),),
                ],
              )
            ],
          ),
        )),
      ]
    ),
  )
)