[6] Flutter

Container

• ex06

import 'package:flutter/material.dart';

class ExContainer extends StatelessWidget {
  const ExContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Text(
              'Flutter',
              style: TextStyle(backgroundColor: Colors.amber, fontSize: 40),
            ),
            Container(
              // child 요소는 필수적인 요소는 아니다!
              child: Text('flutter',
                style: TextStyle(
                    fontSize: 40
                ),
              ),
              color: Colors.green,
              // Container 위젯은 크기를 가지고 있지 않다면
              // 전체적으로 크기를 잡을 수 있다.
              // width: 80,
              // height: 80,
            ),
          ],
        ),
      ),
    );
  }
}

• ex07

import 'package:flutter/material.dart';

class Container02 extends StatelessWidget {
  const Container02({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          // Container 위젯 사용시 주의사항!
          // color 속성은 단독적으로 사용하거나
          // 아니면 decoration 속성에 포하하여 사용해야한다.
          width: 200,
          height: 200,
          // color: Colors.deepOrangeAccent,
          margin: EdgeInsets.fromLTRB(10, 0, 0, 0),

          decoration:  BoxDecoration(
            border: Border.all(color: Colors.black),
            color:  Colors.deepOrangeAccent,
            // borderRadius: BorderRadius.all(Radius.circular(10))
            borderRadius: BorderRadius.circular(15),
          ),
          child: Center(
            child: Text('Container',
              style: TextStyle(fontSize: 30),
              // textAlign: TextAlign.center,)
            ),
          ),
        ),
      ),
    );
  }
}

• ex09

import 'package:flutter/material.dart';
class Ex09Container extends StatelessWidget {
  const Ex09Container({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Container(
            // double.infinity : 화면에 맞춰 넓이를 지정하는 기능
            width: double.infinity,
            height: 80,
            color: Colors.green,
            margin: EdgeInsets.all(14),
          )),
    );
  }
}

Icon

• ex08

import 'package:flutter/material.dart';

class ExIcon extends StatelessWidget {
  const ExIcon({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                // 첫번째 아이콘 생성
                Container(
                  width: 120,
                  height: 120,
                  decoration: BoxDecoration(
                    color: Colors.green[500],
                    borderRadius: BorderRadius.circular(40),
                  ),
                  margin: EdgeInsets.fromLTRB(32, 32, 0, 0),
                  child: Icon(Icons.call, color: Colors.white, size: 80),
                ),
                // 첫번째 아이콘 생성 종료
                // 두번째 아이콘 생성
                Container(
                  width: 120,
                  height: 120,
                  decoration: BoxDecoration(
                    color: Colors.red[500],
                    borderRadius: BorderRadius.circular(40),
                  ),
                  margin: EdgeInsets.fromLTRB(32, 32, 0, 0),
                  child: Icon(
                    Icons.camera_alt_outlined,
                    color: Colors.white,
                    size: 80,
                  ),
                ),
              ],
            ),
            // 두번째 Row
            Row(
              children: [
                // 첫번째 아이콘 생성
                Container(
                  width: 120,
                  height: 120,
                  decoration: BoxDecoration(
                    color: Colors.yellow[500],
                    borderRadius: BorderRadius.circular(40),
                  ),
                  margin: EdgeInsets.fromLTRB(32, 32, 0, 0),
                  child: Icon(Icons.call, color: Colors.white, size: 80),
                ),
                // 첫번째 아이콘 생성 종료
                // 두번째 아이콘 생성
                Container(
                  width: 120,
                  height: 120,
                  decoration: BoxDecoration(
                    color: Colors.blue[500],
                    borderRadius: BorderRadius.circular(40),
                  ),
                  margin: EdgeInsets.fromLTRB(32, 32, 0, 0),
                  child: Icon(
                    Icons.camera_alt_outlined,
                    color: Colors.white,
                    size: 80,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

SizeBox

• ex10

import 'package:flutter/material.dart';
class ExSizedbox extends StatelessWidget {
  const ExSizedbox({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                Text('첫 번째 text 영역'),
                // SizeBox를 사용하는 목적
                // 1. 위젯과 위젯간의 공간을 보존하기 위해 사용
                // 2. Container와 같은 위젯들의 크기를 잡기 위해

                // 1번을 목적으로 사용한 경우
                SizedBox(
                  width: 30,
                ),
                Text('두 번째 text 영역'),
              ],
            ),

            // 2번을 목적으로 사용한 경우
            SizedBox(
              child: ElevatedButton(onPressed: () {}, child: Text('button')),
              width: 200,
              height: 200,
            ),
          ],
        ),
      ),
    );
  }
}

카카오톡 로그인하기 버튼

ex11

import 'package:flutter/material.dart';
class ExBanner extends StatelessWidget {
  const ExBanner({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Container(
            decoration: BoxDecoration(
              color: Colors.yellowAccent,
              borderRadius: BorderRadius.circular(16)
            ),
            width: double.infinity,
            height: 60,
            margin: EdgeInsets.all(16),
            child: Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset('images/klogo.png',width: 30, height: 30,),
                  SizedBox(width: 20,),
                  Text('카카오톡으로 로그인하기'),
                ],
              ),
            ),
      )),
    );
  }
}

Flexible

ex12

import 'package:flutter/material.dart';

class ExFlexible extends StatelessWidget {
  const ExFlexible({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Column(
            children: [
              Text('flexible, expanded 미사용'),
              Row(
                children: [
                  Container(width: 300, height: 50, color: Colors.red,),
                  Container(width: 300, height: 50,color: Colors.orange,),
                ],
              ),
              SizedBox(height: 20,),
              Text('flexible/FlexFit.loose 사용'),
              Row(
                children: [
                  // Flexible : 화면에서 차지해야 하는 영역내에서만 비율적으로 배치하는 위젯
                  // fit : FlexFit.loose 기본값으로 생략이 가능하다.
                  Flexible(fit : FlexFit.loose,child: Container(width: 300, height: 50, color: Colors.red,)),
                  Flexible(child: Container(width: 200, height: 50,color: Colors.orange,)),
                ],
              ),

              SizedBox(height: 20,),
              Text('flexible/FlexFit.tight 사용'),
              Row(
                children: [
                  // fit : FlexFit.tight 웹만해서 여백을 보존하지 않는 기능
                  Flexible(fit : FlexFit.tight,child: Container(width: 100, height: 50, color: Colors.red,)),
                  Flexible(fit : FlexFit.tight,child: Container(width: 100, height: 50,color: Colors.orange,)),
                ],
              ),
            ],
          )
      ),
    );
  }
}