우리 팀의 경우, 현재 피그마로 작업한 ui가 있는 상태이다.
세세한 버튼 설정이나 꾸미기 설정 같은 경우 피그마에서 가져올 수 있다면 참 좋겠다는 생각을 했었는데, 마침 피그마에서 플러터 코드로 자동생성이 가능한 기능이 있다고 한다.
figma 플러그인에서 figma to code를 이용하면 된다고 하는데, 한 번 사용해보자.
간단하게 버튼을 선택해서 코드가 어떻게 생성되는지 보기로 하였다.
다음과 같이 생성된 rectangle에 적용된 속성들이 코드로 나오는 것을 볼 수 있다.
참고로 말하자면 ElabatedButton같은 버튼 속성들은 코드로 생성이 안된다!
그래서 꾸미기 속성 정도를 참고할 때 사용하는 것이 가장 유용하게 사용이 가능하지 않을까 싶다.
그렇다면 이제 직접 적용해보자!
현재 화면이다. 이 화면의 "송금하기" 버튼을 위의 코드를 활용해서 바꿔보도록 하겠다.
음...elebatedButton 자체가 형식이 있어서 나와 있는 그대로 Container를 사용할 경우 이렇게 겹쳐져서 나오나보다
일부 속성만 따와서 다시 생성해보자.
성공했다!
전체 코드를 다 쓰지는 않았고, 우선 Elabated 버튼에서 정의된 속성값들을 가져올때 pigma fluggins에서 자동으로 생성해준 코드를 일부 활용하는 방법으로 설정했다.
Container(
width: 346,
height: 73,
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
decoration: ShapeDecoration(
color: Color(0xFF4B4A48),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'확인',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontFamily: 'Noto Sans KR',
fontWeight: FontWeight.w500,
height: 0,
),
),
],
),
)피그마에서 생성해준 코드
SizedBox(
width: 346,
height: 73,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
backgroundColor: Color(0xFF4B4A48),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const ConnectBlue()));
},
child: const Text("송금 확인",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontFamily: 'Noto Sans KR',
fontWeight: FontWeight.w500,
height: 0,
color: Colors.white,
),
),
),
),내가 직접 적용한 코드
보면 알 수 있듯이, ElevatedButton.styleFrom과 같은 부분처럼 바꿔서 적용한 것 빼고 스타일 코드(TextStyle, borderRadius, backgroundColor)는 자동 생성헤준 코드를 활용했다.
디자인 요소가 워낙 많아서 하나하나 알아보고 적용하는데 시간이 걸렸는데, 이 기능을 이용하면 어렵지 않게 적용할 수 있을 것 같다:)
참고
