[flutter] figma to code 이용해보기

▶ 지난번 figma2flutter 플러그인이 실패하고 찾아본 다른 플러그인을 소개한다.

https://ddoance.tistory.com/311

[flutter] figma2flutter 이용해보기

 

 

 

1. 바꾸고자 하는 프레임 선택 

 

 

2. Actions 탭 > Plugin > figma to code 클릭 

 

 

3. 계속 버튼 클릭

 

 

4. 그러면 코드가 생성된다. 

 

 

 

import 'package:flutter/material.dart';

void main() {
  runApp(const FigmaToCodeApp());
}

// Generated by: https://www.figma.com/community/plugin/842128343887142055/
class FigmaToCodeApp extends StatelessWidget {
  const FigmaToCodeApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: const Color.fromARGB(255, 18, 32, 47),
      ),
      home: Scaffold(
        body: ListView(children: [
          Iphone16ProMax1(),
        ]),
      ),
    );
  }
}

class Iphone16ProMax1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: 440,
          height: 956,
          clipBehavior: Clip.antiAlias,
          decoration: BoxDecoration(
            color: Color(0xFFA65537),
            boxShadow: [
              BoxShadow(
                color: Color(0x3F000000),
                blurRadius: 4,
                offset: Offset(0, 4),
                spreadRadius: 0,
              )
            ],
          ),
          child: Stack(
            children: [
              Positioned(
                left: 108,
                top: 545,
                child: Container(
                  width: 236,
                  height: 45,
                  padding: const EdgeInsets.all(12),
                  clipBehavior: Clip.antiAlias,
                  decoration: ShapeDecoration(
                    color: Color(0xFF2C2C2C),
                    shape: RoundedRectangleBorder(
                      side: BorderSide(width: 1, color: Color(0xFF2C2C2C)),
                      borderRadius: BorderRadius.circular(8),
                    ),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        'Button',
                        style: TextStyle(
                          color: Color(0xFFF5F5F5),
                          fontSize: 16,
                          fontFamily: 'Inter',
                          fontWeight: FontWeight.w400,
                          height: 1,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Positioned(
                left: 108,
                top: 608,
                child: Container(
                  width: 236,
                  height: 45,
                  padding: const EdgeInsets.all(12),
                  clipBehavior: Clip.antiAlias,
                  decoration: ShapeDecoration(
                    color: Color(0xFF2C2C2C),
                    shape: RoundedRectangleBorder(
                      side: BorderSide(width: 1, color: Color(0xFF2C2C2C)),
                      borderRadius: BorderRadius.circular(8),
                    ),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        'Button',
                        style: TextStyle(
                          color: Color(0xFFF5F5F5),
                          fontSize: 16,
                          fontFamily: 'Inter',
                          fontWeight: FontWeight.w400,
                          height: 1,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Positioned(
                left: 120,
                top: 296,
                child: Container(
                  width: 200,
                  height: 200,
                  clipBehavior: Clip.antiAlias,
                  decoration: BoxDecoration(),
                  child: Stack(
                    children: [
                      Positioned(
                        left: 4.53,
                        top: 40.14,
                        child: Container(
                          width: 190.94,
                          height: 119.70,
                          child: Stack(),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Positioned(
                left: 147,
                top: 208,
                child: SizedBox(
                  width: 162,
                  height: 106,
                  child: Text(
                    '뀨...?',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 50,
                      fontFamily: 'Roboto',
                      fontWeight: FontWeight.w400,
                      height: 0.48,
                      letterSpacing: 0.50,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

 

 

5. 하지만 실행했더니 에러 발생. 디버깅을 시작한다. 

 

위 오류 해결책은 다음과 같다 ▶

https://ddoance.tistory.com/314

[flutter] no directionary widget found