Flutter 개발 잡동사니

<클릭 안되는 녀석들을 클릭되도록 만드는 방법>

• InkWell : 사용자의 동작을 감지했을 때 잉크가 퍼지는 듯한 애니메이션 효과 https://api.flutter.dev/flutter/material/InkWell-class.html
• GestureDetector : 사용자의 동작을 감지 시 애니메이션 효과 없음 https://api.flutter.dev/flutter/widgets/GestureDetector-class.html

<이미지>
1. pubspec.yaml 파일 설정 후 Pub get

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

2. 적용
   Image(image: AssetImage('assets/background.png'));

+) fit 옵션

• BoxFit.none : 기본. 원본 크기 유지. 원본에서 영억 크기만큼의 중앙 보여줌.
• BoxFit.contain : 원본. 가로 세로 비율 유지.
• BoxFit.fill : 비율이 변경되며 지정 영역 꽉 채우기.
• BoxFit.fitWidth : 너비에 맞춰 확대/축소. 위아래 여백 발생.
• BoxFit.fitHeight : 높이에 맞춰 확대/축소. 좌우 잘릴 수 있음.
• BoxFit.cover : 비율 유지하며 지정한 영역을 꽉 채우고, fitWidth와 fitHeight을 상황에 따라 선택.
• 원본 크기 유지. 원본으로부터 해당 영역 크기만큼 가운데를 출력.

<Icon 배경색>

Container(
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.red,
                ),
                child: IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.camera),
                ),
              ),

<동그란 테두리>

• 전체 지정

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red,
    ),
    borderRadius: BorderRadius.all(Radius.circular(20))
  ),
  child: ...
)

• 개별 지정

Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
            topRight: Radius.circular(40.0),
            bottomRight: Radius.circular(40.0),
            topLeft: Radius.circular(40.0),
            bottomLeft: Radius.circular(40.0)),
      ),
      child: ...
    ),

<Checkbox 설정>

Checkbox(
  checkColor: Colors.white,
  activeColor: Colors.green,
  side:
      BorderSide(width: 2, color: Colors.green),
  value: _isChecked,
  onChanged: (value) {
    setState(() {
      _isChecked = value;
    });
  },
),

<텍스트 입력창>

TextFormField(
  decoration: const InputDecoration(
    border: OutlineInputBorder(),
    textAlign: TextAlign.end, //입력 위치 오른쪽
    enabledBorder: OutlineInputBorder(
       borderSide: BorderSide(
       color: Colors.green,
    ))
  ),
  //클릭된 상태의 테두리
  focusedBorder: OutlineInputBorder(
         borderSide: BorderSide(
            color: Colors.orange,
         ),
      ),
  
  // 커서 설정
  cursorColor: Colors.orange,
  cursorWidth: 3,
  showCursor: true //커서 숨길려면 false
)

<TextField 기본 여백>

TextField(
  keyboardType: TextInputType.number,
  controller: textController,
  decoration: InputDecoration(
    isDense: true, //추가
    border: OutlineInputBorder(),
    contentPadding: EdgeInsets.all(10), //전부 10 padding 부여
  ),
),

<버튼 종류>

• TextButton
  TextButton( onPressed: () { }, icon: Icon(Icons.add, size: 18), label: Text("TEXT"), child: Text("TEXT BUTTON"), )
• OutlinedButton
  OutlinedButton( onPressed: () { }, child: Text("OUTLINED BUTTON"), )
• ElevatedButton
  ElevatedButton( onPressed: () { }, child: Text('ELEVATED BUTTON'), )
• ToggleButtons

final isSelected = <bool>[false, false, false]; ToggleButtons( 
	color: Colors.black.withOpacity(0.60), 
    selectedColor: Colors.black, 
	selectedBorderColor: Colors.black, 
    fillColor: Colors.black.withOpacity(0.08),
    splashColor: Colors.black.withOpacity(0.12),
    hoverColor: Colors.black.withOpacity(0.04),
    borderRadius: BorderRadius.circular(2.0),
    constraints: BoxConstraints(minHeight: 30.0),
    isSelected: isSelected, 
    onPressed: (index) { 
    	setState(() { 
        	isSelected[index] = !isSelected[index]; 
        }); 
    }, 
    children: [ 
    	Padding( padding: EdgeInsets.symmetric(horizontal: 16.0), child: Text('BTN 1'), ), 
        Padding( padding: EdgeInsets.symmetric(horizontal: 16.0), child: Text('BTN 2'), ), 
       Padding( padding: EdgeInsets.symmetric(horizontal: 16.0), child: Text('BTN 3'), 
       ), 
   ], 
)

• IconButton

var isSelected = false; 
var icon = Icons.favorite_border; 
IconButton( icon: Icon(icon), color: Colors.white, onPressed: () { 
	setState(() { 
    	isSelected = !isSelected; 
    	icon = isSelected ? Icons.favorite : Icons.favorite_border; 
        }); 
    }, 
)

<Floating Action Button 기본>

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("FAB"),
      ),
      floatingActionButton: FloatingActionButton(onPressed: () {

      },),
    );
  }

<효과 버튼>

SizedBox(
            width: 57.w,
            height: 57.h,
            child: MaterialButton(
                color: Colors.deepOrangeAccent,
                shape: CircleBorder(),
                onPressed: () {  },
                child: Icon(Icons.camera_alt_outlined, color: Colors.white,),
              ),
            ),