Example 5 Modified in the UIGen Report

This commit is contained in:
Manas Hejmadi
2025-09-05 19:41:08 +05:30
parent 67a931247b
commit f720c54daf
3 changed files with 295 additions and 400 deletions

View File

@@ -20,374 +20,262 @@ class SDUIWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFFFFFFF),
body: SingleChildScrollView(
backgroundColor: const Color(0xFFFFFFE0),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Card(
color: const Color(0xFFE6F7FF),
margin: const EdgeInsets.fromLTRB(10, 10, 10, 10),
elevation: 3,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 10, 0),
child: Text(
"Word: flutter",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: const Color(0xFF00008B),
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(10, 5, 10, 10),
child: Text(
"Phonetic: /ˈflʌtə/",
style: TextStyle(
fontSize: 16,
color: const Color(0xFF777777),
),
),
),
Card(
color: const Color(0xFF676f8f),
margin: const EdgeInsets.fromLTRB(10, 5, 10, 10),
elevation: 2,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 10, 0),
child: Text(
"Part of Speech: noun",
style: TextStyle(
fontWeight: FontWeight.w700,
color: const Color(0xFFFFFF00),
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Card(
color: const Color(0xFF242838),
margin: const EdgeInsets.fromLTRB(10, 5, 10, 10),
elevation: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(
10, 10, 10, 0),
child: Text(
"Definition: The act of fluttering; quick and irregular motion.",
style: TextStyle(
color: const Color(0xFFFFFFFF),
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(
10, 5, 10, 10),
child: Text(
"Example: the flutter of a fan",
style: TextStyle(
fontStyle: FontStyle.italic,
color: const Color(0xFFFFFFFF),
),
),
),
],
),
),
Card(
color: const Color(0xFF242838),
margin: const EdgeInsets.fromLTRB(10, 5, 10, 10),
elevation: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
"Definition: A state of agitation.",
style: TextStyle(
color: const Color(0xFFFFFFFF),
),
),
),
],
),
),
Card(
color: const Color(0xFF242838),
margin: const EdgeInsets.fromLTRB(10, 5, 10, 10),
elevation: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
"Definition: An abnormal rapid pulsation of the heart.",
style: TextStyle(
color: const Color(0xFFFFFFFF),
),
),
),
],
),
),
Card(
color: const Color(0xFF242838),
margin: const EdgeInsets.fromLTRB(10, 5, 10, 10),
elevation: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
"Definition: A small bet or risky investment.",
style: TextStyle(
color: const Color(0xFFFFFFFF),
),
),
),
],
),
),
Card(
color: const Color(0xFF242838),
margin: const EdgeInsets.fromLTRB(10, 5, 10, 10),
elevation: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
"Definition: A hasty game of cards or similar.",
style: TextStyle(
color: const Color(0xFFFFFFFF),
),
),
),
],
),
),
Card(
color: const Color(0xFF242838),
margin: const EdgeInsets.fromLTRB(10, 5, 10, 10),
elevation: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
"Definition: (audio) The rapid variation of signal parameters, such as amplitude, phase, and frequency.",
style: TextStyle(
color: const Color(0xFFFFFFFF),
),
),
),
],
),
),
],
),
],
),
),
Card(
color: const Color(0xFF676f8f),
margin: const EdgeInsets.fromLTRB(10, 5, 10, 10),
elevation: 2,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 10, 0),
child: Text(
"Part of Speech: verb",
style: TextStyle(
fontWeight: FontWeight.w700,
color: const Color(0xFFFFFF00),
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Card(
color: const Color(0xFF242838),
margin: const EdgeInsets.fromLTRB(10, 5, 10, 10),
elevation: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(
10, 10, 10, 0),
child: Text(
"Definition: To flap or wave quickly but irregularly.",
style: TextStyle(
color: const Color(0xFFFFFFFF),
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(
10, 5, 10, 10),
child: Text(
"Example: flags fluttering in the wind",
style: TextStyle(
fontStyle: FontStyle.italic,
color: const Color(0xFFFFFFFF),
),
),
),
],
),
),
Card(
color: const Color(0xFF242838),
margin: const EdgeInsets.fromLTRB(10, 5, 10, 10),
elevation: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
"Definition: Of a winged animal: to flap the wings without flying; to fly with a light flapping of the wings.",
style: TextStyle(
color: const Color(0xFFFFFFFF),
),
),
),
],
),
),
Card(
color: const Color(0xFF242838),
margin: const EdgeInsets.fromLTRB(10, 5, 10, 10),
elevation: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(
10, 10, 10, 0),
child: Text(
"Definition: To cause something to flap.",
style: TextStyle(
color: const Color(0xFFFFFFFF),
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(
10, 5, 10, 10),
child: Text(
"Example: A bird flutters its wings.",
style: TextStyle(
fontStyle: FontStyle.italic,
color: const Color(0xFFFFFFFF),
),
),
),
],
),
),
Card(
color: const Color(0xFF242838),
margin: const EdgeInsets.fromLTRB(10, 5, 10, 10),
elevation: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
"Definition: To drive into disorder; to throw into confusion.",
style: TextStyle(
color: const Color(0xFFFFFFFF),
),
),
),
],
),
),
Card(
color: const Color(0xFF242838),
margin: const EdgeInsets.fromLTRB(10, 5, 10, 10),
elevation: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
"Definition: To be in a state of agitation or uncertainty.",
style: TextStyle(
color: const Color(0xFFFFFFFF),
),
),
),
],
),
),
Card(
color: const Color(0xFF242838),
margin: const EdgeInsets.fromLTRB(10, 5, 10, 10),
elevation: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
"Definition: To be frivolous.",
style: TextStyle(
color: const Color(0xFFFFFFFF),
),
),
),
],
),
),
],
),
],
),
),
],
Text(
"Dog Emojis",
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.w700,
),
),
SizedBox(height: 20),
Table(
columnWidths: {
0: FixedColumnWidth(200),
1: FixedColumnWidth(250),
2: FixedColumnWidth(250),
3: FixedColumnWidth(100),
},
defaultColumnWidth: FlexColumnWidth(1),
textDirection: TextDirection.ltr,
defaultVerticalAlignment: TableCellVerticalAlignment.bottom,
border: TableBorder.all(
color: const Color(0xFF428AF5),
width: 1.0,
borderRadius: BorderRadius.circular(16),
),
children: [
TableRow(
children: [
TableCell(
child: Padding(
padding: const EdgeInsets.only(
top: 10, left: 10, right: 10, bottom: 10),
child: Container(
color: const Color(0xFFFFFF00),
height: 50.0,
child: Center(
child: Text(
"Name",
style: TextStyle(fontSize: 21.84),
),
),
),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.only(
top: 10, left: 10, right: 10, bottom: 10),
child: Container(
color: const Color(0xFFFFFF00),
height: 50.0,
child: Center(
child: Text(
"Category",
style: TextStyle(fontSize: 21.84),
),
),
),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.only(
top: 10, left: 10, right: 10, bottom: 10),
child: Container(
color: const Color(0xFFFFFF00),
height: 50.0,
child: Center(
child: Text(
"Group",
style: TextStyle(fontSize: 21.84),
),
),
),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.only(
top: 10, left: 10, right: 10, bottom: 10),
child: Container(
color: const Color(0xFFFFFF00),
height: 50.0,
child: Center(
child: Text(
"Emoji",
style: TextStyle(fontSize: 21.84),
),
),
),
),
),
],
),
TableRow(
children: [
TableCell(
child: Padding(
padding: const EdgeInsets.only(
top: 10, left: 10, right: 10, bottom: 10),
child: Center(
child: Text(
"dog face",
style: TextStyle(fontSize: 21.84),
),
),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.only(
top: 10, left: 10, right: 10, bottom: 10),
child: Center(
child: Text(
"animals and nature",
style: TextStyle(fontSize: 21.84),
),
),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.only(
top: 10, left: 10, right: 10, bottom: 10),
child: Center(
child: Text(
"animal mammal",
style: TextStyle(fontSize: 21.84),
),
),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.only(
top: 10, left: 10, right: 10, bottom: 10),
child: Center(
child: Text(
"🐶",
style: TextStyle(fontSize: 30.576),
),
),
),
),
],
),
TableRow(
children: [
TableCell(
child: Padding(
padding: const EdgeInsets.only(
top: 10, left: 10, right: 10, bottom: 10),
child: Center(
child: Text(
"dog",
style: TextStyle(fontSize: 21.84),
),
),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.only(
top: 10, left: 10, right: 10, bottom: 10),
child: Center(
child: Text(
"animals and nature",
style: TextStyle(fontSize: 21.84),
),
),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.only(
top: 10, left: 10, right: 10, bottom: 10),
child: Center(
child: Text(
"animal mammal",
style: TextStyle(fontSize: 21.84),
),
),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.only(
top: 10, left: 10, right: 10, bottom: 10),
child: Center(
child: Text(
"🐕",
style: TextStyle(fontSize: 30.576),
),
),
),
),
],
),
TableRow(
children: [
TableCell(
child: Padding(
padding: const EdgeInsets.only(
top: 10, left: 10, right: 10, bottom: 10),
child: Center(
child: Text(
"hot dog",
style: TextStyle(fontSize: 21.84),
),
),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.only(
top: 10, left: 10, right: 10, bottom: 10),
child: Center(
child: Text(
"food and drink",
style: TextStyle(fontSize: 21.84),
),
),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.only(
top: 10, left: 10, right: 10, bottom: 10),
child: Center(
child: Text(
"food prepared",
style: TextStyle(fontSize: 21.84),
),
),
),
),
TableCell(
child: Padding(
padding: const EdgeInsets.only(
top: 10, left: 10, right: 10, bottom: 10),
child: Center(
child: Text(
"🌭",
style: TextStyle(fontSize: 30.576),
),
),
),
),
],
),
],
),
],
),
),

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 180 KiB

View File

@@ -611,56 +611,63 @@ Exported Source Code: [Link](./codes/example4.dart)
Click here to view the [Complete Process Demo](https://youtu.be/ZXADJOCR9L8)
#### Example 5
`GET` https://api.dictionaryapi.dev/api/v2/entries/en/flutter
`GET` https://emojihub.yurace.pro/api/search?q=dog
```json
[
{
"word": "flutter",
"phonetic": "/ˈflʌtə/",
"phonetics": [
{
"text": "/ˈflʌtə/",
"audio": ""
},
"name": "dog face",
"category": "animals and nature",
"group": "animal mammal",
"htmlCode": [
"🐶"
],
"meanings": [
{
"partOfSpeech": "noun",
"definitions": [
{
"definition": "The act of fluttering; quick and irregular motion.",
"synonyms": [],
"antonyms": [],
"example": "the flutter of a fan"
},
{
"definition": "A state of agitation.",
"synonyms": [],
"antonyms": []
},
...
],
"synonyms": [],
"antonyms": []
},
...
"unicode": [
"U+1F436"
]
},
{
"name": "dog",
"category": "animals and nature",
"group": "animal mammal",
"htmlCode": [
"🐕"
],
"license": {
"name": "CC BY-SA 3.0",
"url": "https://creativecommons.org/licenses/by-sa/3.0"
},
"sourceUrls": [
"https://en.wiktionary.org/wiki/flutter"
"unicode": [
"U+1F415"
]
},
{
"name": "hot dog",
"category": "food and drink",
"group": "food prepared",
"htmlCode": [
"🌭"
],
"unicode": [
"U+1F32D"
]
}
]
```
Generated UI:
https://github.com/user-attachments/assets/673cddf0-8016-48ee-9217-d6f1ed9f826d
![](./images/example5ui.png)
Exported Source Code: [Link](./codes/example5.dart)
Modification Prompts Used:
```
- remove the HTML code and convert the whole thing into a table with headers (name, Category, group, emoji). Also add a scaffold with light yellow background color & convert the unicode into EMOJIs
- increase the font size by 2.5x & put the table in the center horizontally and vertically
- let the table be bigger and not width constrained
- add padding for each table cell of 10px
- the shading added to the table header must be yellow color
- add a big size text boldened that says "Dog Emojis" Above the table, centered, spaced by 20px on the bottom
```
Click here to view the [Complete Process Demo](https://youtu.be/HBFjmSUHSxM)
---
## Complete Pull Request Report