eee-IT____에잇

SafeArea : 위젯들에 의해 그려지는 이미지? 들이 휴대폰의 안전한 공간에 그려지도록 자동적으로 padding을 추가하여 출력을 해준다.

body: Text(
  'SageArea가 없는 위젯사용'
),

body: SafeArea(
  child: Text('safeArea 위젯적용'),
	)
),

SafeArea 위젯을 사용하면 휴대폰 기기별로 예외 처리는 하지 않아도, 화면이 안전 영역에서 그려지도록 자동으로 padding을 추가하여 출력한다.

Image : Image 위젯은 서버에 있는 이미지를 사용하는 네트워크 이미지와 앱에 저장된 이미지를 사용하는 AssetImage가 있습니다.

1. 네트워크 이미지 : image.network

네트워크 이미지는 말 그대로 서버에 저장되어 있는 이미지를 보여주는 방식으로 앱 용량을 줄일 수 있는 방법이다.

home: Scaffold(
	body: Image.network('해당 경로')
),

2. 로컬 이미지: AssetImage

플러터에서 로컬 이미지를 앱에 보여주기 위해서는 assets폴더가 필요하고 assets폴더의 이미지를사용하기 위해서는 pubspec.yaml파일을 수정해야한다.

pubspec.yaml 파일 assets 경로설정

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
     - assets/img/

body: Image(
  image: AssetImage('assets/img/dog.jpg'),
  width: 300,
  height: 400,
  fit: BoxFit.fill,
),

Icon : 플러터에서는 머티리얼 아이콘관 쿠퍼티노 아이콘을 기본 아이콘으로 제공하고 있다.

appBar: AppBar(
  actions: [
    IconButton(
        onPressed: () {},
        icon: Icon(
          Icons.forest,
          size: 30,
          color: Colors.white
        ),
    ),
    IconButton(
      onPressed: () {},
      icon: Icon(
        Icons.forest,
      ),
    ),
  ],
  title: Text(
    'widget 연습',
    style: TextStyle(color: Colors.white),
  ),
  backgroundColor: Colors.blue,
),

Text 위젯은 플러터에서 가장 많이 사용하는 위젯으로 화면에 문자열을 보여주는 위젯

Style : Text 위젯에 스타일 적용

• letterspacing : 글자 간격 조정
• wordspacing : 단어 사이 간격 조정
• shadows : 그림자 효과
• decoration :텍스트 꾸미기
• TextDirection : 텍스트 정렬 방향
• Overflow : 텍스트 오버플로우 

decoration

child: const Text(
    'Flutter Text Widget',
    style: TextStyle(
      color: Colors.orange,
      fontWeight: FontWeight.bold,
      fontStyle: FontStyle.italic,
      fontSize: 30.0,
      letterSpacing: 10.0
    ),
),

shadow

style: TextStyle(
  color: Colors.orange,
  fontWeight: FontWeight.bold,
  fontStyle: FontStyle.italic,
  fontSize: 30.0,
  letterSpacing: 10.0,
  shadows: [
    Shadow(
      color: Colors.black54, // 그림자 색상
      offset: Offset(1,2),   // 그림자 오프셋
      blurRadius: 20,         // 그림자 크기(퍼지는 정도)
    )
  ]
),

decoration

.
.
.
생략

decoration: TextDecoration.underline,
decorationColor: Colors.blueGrey,
decorationStyle: TextDecorationStyle.double,

TextDirection

'Flutter Text Widget',
textDirection: TextDirection.rtl, // 왼쪽에서 오른쪽 정렬

maxLines: 1,
overflow: TextOverflow.ellipsis, // 한줄이 넘어가는 텍스트는 ...으로 표시

ellipsis : ... 표시
fade : 하단을 흐리게 표시
clip : 한줄에 보여질 수 있는 문자열만 출력

Text.rich(고급 텍스트 스타일) : 여러 텍스트로 나눠서 스타일을 각각 적용할 수 있다.

Text.rich(
  TextSpan(
    text: 'How ',
    style: Theme.of(context).textTheme.headline4,
    children: <TextSpan> [
      TextSpan(
        text: 'are ',
        style: TextStyle(
          fontSize: 35,
          fontStyle: FontStyle.italic, color: Colors.orange,
        ),
      ),
      TextSpan(
        text: 'you ',
        style: TextStyle(
          fontSize: 35,
          fontStyle: FontStyle.italic, color: Colors.red,
        ),
      ),
    ],
  ),
),

Container 위젯의 테두리, 박스 모양, 색상 등의 스타일을 적용하려면  decoration 속성의 BoxDecoration 클래스를 사용한다.

• border : 컨테이너의 테두리 스타일을 변경한다.
• borderRadius : 테두리의 모서리를 둥글게 변경한다.
• gradient : 컨테이너 내부 색상에 그라데이션 효과를 줄 수 있다.
• boxShadow : 그림자 효과를 줄 수 있고, 그림자 색상 위치 등 변경한다.

1)테두리 : border

body: Container(
  margin: EdgeInsets.all(30),
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.green,
      width: 10,
    ),
  ),
),

2) 둥근 모서리 : borderRadius

body: Container(
  margin: EdgeInsets.all(30),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(
      Radius.circular(40),
    ),
    border: Border.all(
      color: Colors.green,
      width: 10,
      strokeAlign: BorderSide.strokeAlignInside,
    ),
  ),
),

3) 그라데이션 효과 : gradient

decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [Colors.purpleAccent, Colors.white],
    ),
    borderRadius: BorderRadius.all(
      Radius.circular(40),
    ),
    border: Border.all(
      color: Colors.green,
      width: 2,
      strokeAlign: BorderSide.strokeAlignInside,
    ),
),

4) 그림자 효과 : boxShadow

boxShadow: [
  BoxShadow(
      color:Colors.grey,
      spreadRadius: 4.0,
    blurRadius: 10.0,
    blurStyle: BlurStyle.normal,
  ),
],

margin은 Container 위젯을 기준으로 바깥쪽에 여백을 설정하여 다른 위젯과 간격을 조정할 수 있고, padding은 Container 위젯의 안쪽에 여백을 주어 Container 위젯이 담고 있는 하위 위젯의 간격을 조정한다.

1) EdgeInsets 클래스

margin과 padding의 여백값 설정은 주로 EdgeInsets 클래스를 사용한다. 즉 여백값을 설정하는 클래스이다.

• EdgeInsets.all() : 상,하,좌,우에 동일한 여백값을 설정한다.
• EdgeInsets.only() : left, top, right, bottom으로 방향을 지정한다.
• EdgeInsets.fromLTRB() : 좌, 상, 우, 하 순서로 여백값을 지정한다.

body: Container(
  margin: EdgeInsets.all(50),
  color: Colors.yellow,
),

body: Container(
  margin: EdgeInsets.only(top: 100),
  color: Colors.yellow,
),

body: Container(
  margin: EdgeInsets.fromLTRB(30, 80, 20, 200),
  color: Colors.yellow,
),

body: Container(
  color: Colors.yellow,
  margin: EdgeInsets.all(50),
  padding: EdgeInsets.all(30),
  child: Container(
    color: Colors.orange,
  ),
),

Container

Container 위젯은 플러터에서 제공하는 기본 위젯 중 하나로, 하나의 위젯만 담을 수 있는 박스 형태의 위젯이다.

Container 위젯을 사용하면 사각형 모양의 박스 안에 위젯을 배치하고, 하위 위젯의 배경색, 모양, 크기를 번경하거나 간격을 조정하며, 박스의 테두리 선과 같은 스타일을 조정할 수 있다

Container 위젯은 하위 위젯을 가지면 하위 위젯에 맞게 크기를 가지지만, 없다면 최대한 큰 박스를 만드는 특징이 있다.

class MyApp extends StatelessWidget{
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: Text(
              '위젯 실습',
              style: TextStyle(
                color: Colors.white,
              ),
          ),
        ),
        body: Container(
          color: Colors.yellow,
        )
      ),
    );
  }
}

body: Container(
          color: Colors.yellow,
          child: Text(
            'Container 위젯에 Text 위젯을 추가한 경우'
          ),
        ),

아니면 width와 height를 설정해서 크기를 지정한다.

body: Container(
  width: 100,
  height: 100,
  color: Colors.yellow,
)

state(상태) : 위젯이 생성되고 생명주기 동안 변경될 수 있는, 위젯이 가지는 데이터를 말한다.

StatelessWidget : 상태없는 위젯으로, 정적인 위젯이며 어떠한 상태도 유지하지 않는다.

데이터는 가질 수 있지만 위젯이 살아있는 동안은 이 데이터가 변경되지 않거나 변경되더라도 화면을 다시 그리는 이벤트가 발생하지 않는다.

StatefulWidget : 상태를 가지는 위젯. 사용자와 상호작용을 통해 데이터가 변경되면 변경된 데이터를 시각적으로 보여주기 위해 빌드를 수행하여 다시 화면에 그려준다.

위젯 생명주기 동안 상태를 가지고 이를 관리한다. 상태를 관리하기 위해서 항상 State 객체를 만든다.

State 객체를 생성하여 화면을 그리고 이벤트를 처리하는 책임을 State클래스에 위임한다.

상태가 변경되면 리빌드하고 화면을 다시 그리는 위젯이다.

StatefulWidget의 주요 함수

• createState() : 상태객체를 생성
• initState() : 상태객체가 생성되고 BuildContext가 트리의 특정 위치에 연결(마운트)되고 상태 객체의 initState()호출, 위젯을 처음 초기화할 때 딱 한번만 호출
• build() : 위젯을 그리는 함수이며 변경이 있을 때마다 호출
• setState() : 상태객체의 내부 상태가 변경되었을 때 호출하는 함수, 내부적으로 build() 함수를 호출하여 변경된 결과를 화면에 다시 그림
• dispose() : 위젯 트리에서 상태객체가 완전히 제거될 때 호

MaterialApp / Scaffold

MaterialApp  : 앱의 가장 바깥 틀을 이루고 있는 위젯, 앱 화면 전체를 감싸는 가장 상위 위젯으로 시각화에는 관여하지 않고 사용자의 눈에도 보이지 않는다.

앱에 폰트, 크기 ,색상 들의 테마를 적용할 수 있고 앱의 설정과 기능을 제공

Scaffold :  눈에 보이고 시각화에 관여하는 안쪽 들에 해당한다.

MaterialApp 안쪽에 앱의 눈에 보이는 요소들을 배치하여 사용자에게 아름답고 편리한 레이아웃을 제공한다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: Text(
            'Flutter Demo Home Page',
            style: TextStyle(
              color: Colors.white,
            ),
          ),
          leading: Icon(Icons.traffic),
        ),
      ),
    );
  }
}