Figma Design in Dart Code exportieren?

Ravensouth · 17. Dezember 2022

Ich bin gerade dabei eine App zu entwickeln. Hierfür habe ich mit dem Mockup angefangen. Figma eignet sich ganz gut dazu.

Ich habe mit ein paar Plugins meine Figma Screens in Dart Code exportiert. Nur irgendwie lässt sich der ganze Spaß so nicht fehlerfrei ausführen.

Ich bin relativ neu in Dart und Flutter. Vielleicht könnt ihr mir da helfen

Beispielcode von einer Seite:

Code:

import 'package:flutter/material.dart';


class HomeWidget extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
          // Figma Flutter Generator HomeWidget - FRAME
            return Container(
      width: 390,
      height: 844,
      decoration: BoxDecoration(
          color : Color.fromRGBO(255, 255, 255, 1),
  ),
      child: Stack(
        children: <Widget>[
          Positioned(
        top: 125,
        left: 20,
        child: Container(
        width: 350,
        height: 538,
        decoration: BoxDecoration(
          borderRadius : BorderRadius.only(
            topLeft: Radius.circular(35),
            topRight: Radius.circular(35),
            bottomLeft: Radius.circular(35),
            bottomRight: Radius.circular(35),
          ),
      image : DecorationImage(
          image: AssetImage('assets/images/Depositphotos_18783257stockphotocloseupportraitofahappy1.png'),
          fit: BoxFit.fitWidth
      ),
  )
      )
      ),Positioned(
        top: 0,
        left: 0,
        child: Container(
        width: 390,
        height: 121,
        decoration: BoxDecoration(
          gradient : LinearGradient(
          begin: Alignment(6.123234262925839e-17,1),
          end: Alignment(-1,6.123234262925839e-17),
          colors: [Color.fromRGBO(255, 122, 0, 1),Color.fromRGBO(255, 59, 32, 1),Color.fromRGBO(255, 0, 107, 1)]
        ),
  )
      )
      ),Positioned(
        top: 775,
        left: 0,
        child: Container(
        width: 390,
        height: 69,
        decoration: BoxDecoration(
          borderRadius : BorderRadius.only(
            topLeft: Radius.circular(50),
            topRight: Radius.circular(50),
            bottomLeft: Radius.circular(0),
            bottomRight: Radius.circular(0),
          ),
      boxShadow : [BoxShadow(
          color: Color.fromRGBO(216, 216, 216, 0.25999999046325684),
          offset: Offset(-6,0),
          blurRadius: 47
      )],
      color : Color.fromRGBO(255, 255, 255, 1),
  )
      )
      ),Positioned(
        top: 599,
        left: 44,
        child: Text('Miriam, 27', textAlign: TextAlign.center, style: TextStyle(
        color: Color.fromRGBO(255, 255, 255, 1),
        fontFamily: 'Noto Sans',
        fontSize: 30,
        letterSpacing: 0,
        fontWeight: FontWeight.normal,
        height: 0.6333333333333333
      ),)
      ),Positioned(
        top: 626,
        left: 44,
        child: Text('30 km (Erfurt)', textAlign: TextAlign.center, style: TextStyle(
        color: Color.fromRGBO(255, 255, 255, 1),
        fontFamily: 'Noto Sans',
        fontSize: 15,
        letterSpacing: 0,
        fontWeight: FontWeight.normal,
        height: 1.2666666666666666
      ),)
      ),Positioned(
        top: 52,
        left: 128,
        child: Container(
      width: 134,
      height: 36,
     
      child: Stack(
        children: <Widget>[
          Positioned(
        top: 0,
        left: 0,
        child: Text('Hot', textAlign: TextAlign.center, style: TextStyle(
        color: Color.fromRGBO(255, 255, 255, 1),
        fontFamily: 'Noto Sans',
        fontSize: 32,
        letterSpacing: 0 /*percentages not used in flutter. defaulting to zero*/,
        fontWeight: FontWeight.normal,
        height: 1
      ),)
      ),
        ]
      )
    )
      ),Positioned(
        top: 796,
        left: 115,
        child: Container(
        width: 28,
        height: 28,
        decoration: BoxDecoration(
          image : DecorationImage(
          image: AssetImage('assets/images/Swipe1.png'),
          fit: BoxFit.fitWidth
      ),
  )
      )
      ),Positioned(
        top: 796,
        left: 48,
        child: Container(
        width: 28,
        height: 28,
        decoration: BoxDecoration(
          image : DecorationImage(
          image: AssetImage('assets/images/Radar11.png'),
          fit: BoxFit.fitWidth
      ),
  )
      )
      ),Positioned(
        top: 796,
        left: 182,
        child: Container(
        width: 28,
        height: 28,
        decoration: BoxDecoration(
          image : DecorationImage(
          image: AssetImage('assets/images/Playtaste11.png'),
          fit: BoxFit.fitWidth
      ),
  )
      )
      ),Positioned(
        top: 796,
        left: 249,
        child: Container(
        width: 28,
        height: 28,
        decoration: BoxDecoration(
          image : DecorationImage(
          image: AssetImage('assets/images/Facebooknachricht11.png'),
          fit: BoxFit.fitWidth
      ),
  )
      )
      ),Positioned(
        top: 796,
        left: 316,
        child: Container(
        width: 28,
        height: 28,
        decoration: BoxDecoration(
          image : DecorationImage(
          image: AssetImage('assets/images/Crush1.png'),
          fit: BoxFit.fitWidth
      ),
  )
      )
      ),Positioned(
        top: 60,
        left: 21,
        child: Container(
        width: 28,
        height: 28,
        decoration: BoxDecoration(
          image : DecorationImage(
          image: AssetImage('assets/images/User1.png'),
          fit: BoxFit.fitWidth
      ),
  )
      )
      ),Positioned(
        top: 62,
        left: 341,
        child: Container(
        width: 30,
        height: 30,
        decoration: BoxDecoration(
          image : DecorationImage(
          image: AssetImage('assets/images/Filterschwarz1.png'),
          fit: BoxFit.fitWidth
      ),
  )
      )
      ),Positioned(
        top: 574,
        left: 289,
        child: SvgPicture.asset(
        'assets/images/rectangle125.svg',
        semanticsLabel: 'rectangle125'
      );
      ),Positioned(
        top: 594,
        left: 297,
        child: Container(
        width: 44,
        height: 29,
        decoration: BoxDecoration(
          image : DecorationImage(
          image: AssetImage('assets/images/Brief1.png'),
          fit: BoxFit.fitWidth
      ),
  )
      )
      ),Positioned(
        top: 687,
        left: 225,
        child: Container(
        width: 75,
        height: 75,
        decoration: BoxDecoration(
          image : DecorationImage(
          image: AssetImage('assets/images/Herzgrn1.png'),
          fit: BoxFit.fitWidth
      ),
  )
      )
      ),Positioned(
        top: 687,
        left: 92,
        child: Container(
        width: 75,
        height: 75,
        decoration: BoxDecoration(
          image : DecorationImage(
          image: AssetImage('assets/images/Kreuzrot3.png'),
          fit: BoxFit.fitWidth
      ),
  )
      )
      ),Positioned(
        top: 700,
        left: 37,
        child: Container(
        width: 50,
        height: 50,
        decoration: BoxDecoration(
          image : DecorationImage(
          image: AssetImage('assets/images/Backblau1.png'),
          fit: BoxFit.fitWidth
      ),
  )
      )
      ),Positioned(
        top: 700,
        left: 305,
        child: Container(
        width: 50,
        height: 50,
        decoration: BoxDecoration(
          image : DecorationImage(
          image: AssetImage('assets/images/Blitzlila1.png'),
          fit: BoxFit.fitWidth
      ),
  )
      )
      ),Positioned(
        top: 700,
        left: 171,
        child: Container(
        width: 50,
        height: 50,
        decoration: BoxDecoration(
          image : DecorationImage(
          image: AssetImage('assets/images/Hotorange1.png'),
          fit: BoxFit.fitWidth
      ),
  )
      )
      ),
        ]
      )
    );
          }
        }

netzgestaltung · 18. Dezember 2022

Hi,

ich hab öfter mit Figma zu tun und würde vermeiden da irgendwas direkt zu übernehmen. Das ist ca wie Tabellenlayout von anno dazumals. Da wird alles absolut positioniert mit Pixelwerten. Eine responsive Flow-Webseite mit dynamischen Inhalten kann niemals daraus werden. Gut sind die ganzen Schriftfrößenangaben und das Messen der Abstände - Coden würd ich das lieber selber.

Und Stockfotos würd ich auch lieber nicht verwenden wollen ;-)

Ravensouth · 18. Dezember 2022

netzgestaltung schrieb:
Hi,

ich hab öfter mit Figma zu tun und würde vermeiden da irgendwas direkt zu übernehmen. Das ist ca wie Tabellenlayout von anno dazumals. Da wird alles absolut Positioniert mit Pixelwerten. Eine responsive Flow-Webseite mit dynamischen Inhalten kann niemals daraus werden. Gut sind die ganzen Schriftfrößenangaben und das Messen der Abstände - Coden würd ich das lieber selber.

Hey, danke für deine Hilfe. Ok das habe ich mir gestern fast schon gedacht gehabt, dass ich wahrscheinlich schneller das ganze Layout selbst gecodet bekomme, statt mich ewig damit zu beschäftigen wie man aus einem Figma Layout einen Dart Code generiert

netzgestaltung schrieb:
Und Stockfotos würd ich auch lieber nicht verwenden wollen ;-)

Ich benutze dann freepik Bilder mit Premium Lizenz. Dann muss man sich nicht so einen Kopf machen zwecks Urheberrecht

Suche

Figma Design in Dart Code exportieren?

Ravensouth

Newbie

netzgestaltung

Captain

Ravensouth

Newbie

Ähnliche Themen