[ Flutter ] Border, Color Style 및 Layout 설정

가운데 타이틀을 넣고 우측 하단에 버튼을 만드는 레이아웃 설정하기

---

Layout

영역 레이아웃 설계

 

Padding(
      padding: const EdgeInsets.all(16.0),
      child: Container(
        height: 120,
        decoration: buildDecoration(),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('타이틀'),
              Container(
                margin: EdgeInsets.fromLTRB(0, 20, 32.0, 0),
                alignment: Alignment.centerRight,
                child: Text('버튼'),
              )
            ],
          ),
        ),
      ),
    );

 

BoxDecoration의 경우 다른 컴포넌트들과 공용으로 쓰일것 같아 다른 파일로 분리하여 사용

BoxDecoration buildDecoration() {
  return const BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.all(Radius.circular(24.0)),
  );
}

---

Color

Flutter의 경우 색상코드는 헥사 코드로 만들어줘야한다.

따라서 색상코드를 입력하면 알아서 헥사코드로 바꿔주는 함수를 추가

Color hexToColor(String hexString) {
  final buffer = StringBuffer();
  buffer.write('ff');
  buffer.write(hexString);
  return Color(int.parse(buffer.toString(), radix: 16)); // 16진수로 변환하여 Color 객체 생성
}

 

color: Color(0xfff2f4f6) -> color: hexToColor('f2f4f6') 으로 변경하여 적용

 

StringBuffer를 사용하는 이유

 

• 성능: 각각의 문자열은 기존 문자열에 새로운 부분을 추가한 새로운 인스턴스를 만들기 때문에 메모리 사용과 성능에 부담을 줄 수 있음. 반면에 StringBuffer는 문자열을 효율적으로 처리하며, 이는 메모리 사용과 성능을 향상시킬 수 있음
• 가독성 및 유지보수: StringBuffer를 사용하면 코드의 가독성이 향상될 수 있음. 문자열을 여러 부분으로 나누어서 추가하거나 조작할 수 있으며, 이는 복잡한 문자열 연산을 보다 명확하게 표현할 수 있음.
• 쓰레드 안전성: StringBuffer는 쓰레드 안전성을 제공, 동시에 여러 쓰레드에서 문자열을 조작하려고 할 때, StringBuffer를 사용하면 안전하게 조작할 수 있음. 반면에 + 연산자는 스레드 간 충돌이 발생할 수 있는 경우가 있음.

 

 

 

child: Scaffold(
          backgroundColor: hexToColor('#f2f4f6'),
          body: Column(
            children: [
            // 컴포넌트 들어갈 자리
            ],
          ))
        ),