abi / abi/screenshot-to-code

Support Flutter

オープン
#108 コメント 6 件 リアクション 2 件 担当者 0 名 GitHub で見る
stack
主要言語
Python
スター
78.7k
フォーク
9.6k
PR マージ指標
30日以内にマージされた PR はありません

説明

add support to Flutter for mobile apps i testing, this moment add button do show [DartPad editor](https://github.com/dart-lang/dart-pad) for watch preview the flutter app compiled in web browser.

![soporte_para_flutter](https://github.com/abi/screenshot-to-code/assets/8028861/a8c0426e-77e2-4735-8fa2-02fef0ce93c1)

@abi How would you approach this functionality? , note that:
- another editor is implemented.
- web and mobile previews would not be used because the editor has its own preview.
- requires this complete answer to compile the application in Flutter.

# The prompt
Performing "prompt" tests, the one that gave me the best result was this:

- reminding you not to add comments
- replace placeholder image usage from placehold.co to picsum.photos
- define the basic structure, while testing returns different code structures and compiled errors.

```text
Keep in mind if in the following instruction you are also an expert in Flutter or use Flutter build sigle main.dart:

- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "" or bad things will happen.
- Use Image.network and https://picsum.photos/ for images.
- Do not add comments in the code such as "Add your code here" in place of writing the full code. WRITE THE FULL CODE.
- Close code in this basic structure:

"```dart
// begin basic structure
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

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

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

@override
Widget build(BuildContext context) {
var title = 'Screeshop App';

return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Image.network('https://picsum.photos/100?image=8'),
),
);
}

```"
- Do not include markdown "```" or "```dart" at the start or end.
- if is Flutter Just return the code to me without explanations like "this is the code" or "your code would look like this"

```

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。