[코딩애플] 쉬운 플러터 3강 : 박스잘그려야 앱 잘만듭니다

Wrap with container 클릭하면 자동으로 감싸준다
아래 Bar에 height을 주고 싶은데 넣을 수 있는 속성이 없어서 Container를 이용한다.

 

Container 남용 방지를 위해서 계속 Lint 라는 것이 밑줄을 긋는다 
이게 방해되면 설정에서 제거하면 되지만, 이렇게 밑줄이 뜨는 이유는 대용할 수 있는 코드가 있기 때문 

Container박스가 무겁기 때문에 Container 대신에 SizedBox를 이용한다

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {


    return MaterialApp(
      home: Scaffold( //앱을 상단 중간 하단으로 나누어준다
        appBar: AppBar(
            title: Text('앱임')
        ),
        body: Container(
          child: Text('안녕')
        ),
        bottomNavigationBar: BottomAppBar(
          child: SizedBox(
            height: 70,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Icon(Icons.phone), Icon(Icons.message), Icon(Icons.contact_page),
              ]
            ),
          )
        ),
     )
    );
  }
}

즉 해당 코드로 숙제를 완료할 수 있다. 

 

박스 디자인 하는 법 
많은 UI들을 만들기 위함

margin 바깥 여백을 주고 싶을 때 EdgeInsets.all을 이용한다.

margin: EdgeInsets.all(20),

return MaterialApp(
  home: Scaffold(  
    appBar: AppBar( title: Text('앱임') ),
    body: Container(
      width: 500, height: 500, color: Colors.blue,
      margin: EdgeInsets.all(40),
      padding: EdgeInsets.all(20),
      child: Text('hello'),
    )
      )
);

 

왼쪽 위 오른쪽 아래 다른 값으로 마진 넣고 싶을 때

margin: EdgeInsets.fromLTRB(20,50,0,0),

 

박스에 테두리를 주는 법
찌끄레기 데코들은 decoration: 을 이용한다.

border 넣는 법 

decoration: BoxDecoration(
  border: Border.all(color: Colors.red)
),

그리고 만나볼 수 있는 에러 화면

아마 색상을 두 번 정해서 그런 것 같다. 
따라서 Container 내에 크기만 입력하고 색상은 위에서 삭제하면 된다. 

 

body: Align(
          alignment: Alignment.bottomLeft,

Center로 중앙정렬하거나 
Align을 이용해서 정렬할 수 있다. 

박스를 가로로 꽉 채우고 싶을 경우에는 
무한히 준다는 의미에서 double.infinity를 사용한다. 

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {


    return MaterialApp(
      home: Scaffold(  
        appBar: AppBar( title: Text('앱임') ),
        body: Align(
          alignment: Alignment.bottomLeft,
          child: Container(
            width: double.infinity, height: 500,
            decoration: BoxDecoration(
              border: Border.all(
                  color: Colors.black,
              ),
              boxShadow: [
                BoxShadow(
                  color: Colors.green,
                  spreadRadius: 5,
                  blurRadius: 8,
                )
              ]
            ),
            margin: EdgeInsets.fromLTRB(20,20,20,50),
            padding: EdgeInsets.all(20),
            child: Text('hello'),
          ),
        )
          )
    );
  }
}

 

스스로 만들고 싶은 박스들을 만들어보는 것도 재밌겠다