20230816 TIL

Today 요약

[✅] 프로그래머스 코딩테스트 1문제

[✅] flutter 위젯 영상 1개

[✅] flutter 강의 2개 

[✅] 간단 코드챌린지 1개

---

배운 점

1) ConstrainedBox

ConstrainedBox class - widgets library - Dart API

• flutter 위젯 크기 설정 기능이 위치와 부모에 최적화되어 있다곤 하지만 디자인에 딱 맞게 넓이와 높이를 조정하고 싶을 때 사용
• 자식위젯의 넓이와 높이 최대및 최소값을 설정할 수있다
• 텍스트 위젯의 크기나 버튼의 크기, 반응형일시 여러 크기를 적용 할 수 있다

ConstrainedBox(
	constraints :BoxConstraints(
    	maxWidth:40,
        maxHeight:100,
    ),
    child:Container(),
)

 

2) flutter 반응형

final isWebScreen = MediaQuery.of(context).size.width > Breakpoint.lg;

.. Utils.getWinWidth(context) > Breakpoint.md ? a : b,

• isWebScreen 변수 설정 : MediaQuery.of(context).size.width 값을 breactPoint.lg와 비교 ( 현재 화면 너비가 lg보다 크면 isWebScreen 은 true
• Utils.getwinWidth(context)  :  현재 화면 너비를 가져오는 함수

3) BorderRadius top만

Container(
	decoration:BoxDecoration(
    	borderRadius:BorderRadius.only(
        	topLeft:Radius.circular(), 
            topRight:Radius.circular(), 
        )
    )
)

4) Chip class

Chip class - material library - Dart API

• 머터리얼  디자인 칩
• 속성, 텍스트, 엔터티 작업을 나타내는압축 요소
• null이 아닌 onDeleted 콜백을 제공시 칩 삭제버튼이 포함된다

Chip(
  avatar: CircleAvatar(
    backgroundColor: Colors.grey.shade800,
    child: const Text('AB'),
  ),
  label: const Text('Aaron Burr'),
)

 

InputChip class - material library - Dart API

import 'package:flutter/material.dart';

void main() => runApp(const ChipApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
      home: const InputChipExample(),
    );
  }
}

class InputChipExample extends StatefulWidget {
  const InputChipExample({super.key});

  @override
  State<InputChipExample> createState() => _InputChipExampleState();
}

class _InputChipExampleState extends State<InputChipExample> {
  int inputs = 3;
  int? selectedIndex;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('InputChip Sample'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Wrap(
              alignment: WrapAlignment.center,
              spacing: 5.0,
              children: List<Widget>.generate(
                inputs,
                (int index) {
                  return InputChip(
                    label: Text('Person ${index + 1}'),
                    selected: selectedIndex == index,
                    onSelected: (bool selected) {
                      setState(() {
                        if (selectedIndex == index) {
                          selectedIndex = null;
                        } else {
                          selectedIndex = index;
                        }
                      });
                    },
                    onDeleted: () {
                      setState(() {
                        inputs = inputs - 1;
                      });
                    },
                  );
                },
              ).toList(),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  inputs = 3;
                });
              },
              child: const Text('Reset'),
            )
          ],
        ),
      ),
    );
  }
}

---

거하게 쉬고 오랜만에 공부하니까 뭔가 알던것도 까먹고 .. !!다시 열심히 천천히 공부해야지