[Flutter/플러터 공부] 컨테이너 위젯 만들고 간단히 꾸미기

 이제 플러터 공부해보고자 하는 초보가 하고 배운 것 하나씩 적어보려고 합니다.

 틀린 부분도 있을 수 있으니 유념하여 봐주세요. 

 Container 간단히 꾸미는 정도의 내용이라 별도의 CustomContainer 로 Class 를 만들어 진행해봤습니다. 

 

  MaterialApp 과 Scaffold

 MaterialApp은 Material Design을 사용할 수 있게 하는 클래스입니다. 많은 파라미터 중에서 필수적인 것은 home(widget)입니다. home은 app을 실행할 때 가장 먼저 나오는 페이지(위젯)입니다. 

 또한 MaterialApp() 클래스를 사용하게 되면 Scaffold 를 사용할 수 있는데 화면을 구성하는 뼈대 형태라고 이해할 만합니다. 화면 구성에 들어가는 위젯들과 요소들을 감싸는 레이아웃을 만들어 줍니다. 

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      home: Scaffold(
       
      ),
    ),
  );
}

 

 Scaffold에 appBar 와 body 구성하기

 Scaffold 에 appBar 와 body 를 추가하고 우선 app title 을 만듭니다. app title 은 물론 마음대로 만들면 되는데 여기서는 Container 꾸미는 게 목적이므로 'Container' 라고 지었습니다. 

 그 후 body 에 Container 를 만들면 됩니다. 다만 Container 만 Class 로 따로 빼서 몇가지를 꾸미려 합니다. 

 아래와 같이 만들어 놓으면 body: CustomContainer() 에 오류가 발생합니다. 당연히 CustomContainer Class 를 정의하지 않았기 때문입니다. 

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Container'),
        ),
        body: CustomContainer(), //CustomContainer Class를 별도로 만들어 body로 불러옵니다.
      ),
    ),
  );
}

 

 Container 만들고 간단히 꾸미기

 박스(Container) 에 컬러와 텍스트를 넣어 최초 생성을 했습니다. 

 이제 박스에 몇가지 데코레이션을 통해 꾸미도록 하겠습니다. 

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Container'),
        ),
        body: CustomContainer(), //CustomContainer Class를 별도로 만들어 body로 불러옵니다.
      ),
    ),
  );
}

//StatelessWidget 으로 CustomContainer Class 를 만듭니다.
class CustomContainer extends StatelessWidget {
  const CustomContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      //리턴값을 Container 로 선언하는 것으로 Container 가 만들어집니다.
      color: Colors.amber, //컬러와 텍스트를 적용하면 컨테이너 박스가 하나 만들어 집니다.
      child: Text('Studying Flutter'),
    );
  }
}

 

 Container 만들고 간단히 꾸미기

Container 위치, 크기, 간격(padding, margin) 등을 Container 위젯 자체에 선언하고, decoration 으로 박스 컬러, 테두리, 테두리라운드, 그림자를 만들었습니다. 

또한 child 위젯을 추가하여 박스 안에 또다른 박스를 하나 더 생성하였습니다. 

이렇게 박스 안에, 혹은 박스 좌우위아래로 박스(Container)를 추가하여 레이아웃을 만들 수 있습니다. 

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Container'),
        ),
        body: CustomContainer(), //CustomContainer Class를 별도로 만들어 body로 불러옵니다.
      ),
    ),
  );
}

//StatelessWidget 으로 CustomContainer Class 를 만듭니다.
class CustomContainer extends StatelessWidget {
  const CustomContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      //Container를 Center 위젯으로 감싸줍니다.
      child: Container(
        width: 200.0,
        //박스의 크기를 조정합니다.
        height: 200.0,
        padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
        // margin: EdgeInsets.symmetric(vertical: 24, horizontal: 30),
        // 박스를 가운데 배치를 할 예정이기 때문에 margin 공부 목적상 주석 처리 하였습니다.
        decoration: BoxDecoration(
            //BoxDecoration 으로 아래처럼 박스 자체 꾸미기가 가능합니다.
            color: Colors.amber,
            border: Border.all(
                color: Colors.red, width: 5, style: BorderStyle.solid),
            borderRadius: BorderRadius.circular(20.0),
            boxShadow: [
              BoxShadow(
                  color: Colors.black.withOpacity(0.5),
                  offset: Offset(6, 6),
                  blurRadius: 10,
                  spreadRadius: 10),
              BoxShadow(
                  color: Colors.blue.withOpacity(0.5),
                  offset: Offset(-6, -6),
                  blurRadius: 10,
                  spreadRadius: 10),
            ]),
        child: Center(
            child:
                Container(color: Colors.red, child: Text('Studying Flutter'))),
      ),
    );
  }
}