DEV Community

kyorohiro (kiyohiro kawamura)
kyorohiro (kiyohiro kawamura)

Posted on

1

Dart x Flutter Generate Asset.dart At VSCode 's Regex

Generate asset.dart At VSCode 's Regex
We can write following code to create Image Widget In Flutter

return Image.asset("assets/images/food_purple_chocolate_dessert.jpg");
Enter fullscreen mode Exit fullscreen mode

but, It is difficult to prove this code is corrent.
because "assets/images/food_purple_chocolate_dessert.jpg" may be not found .

So, Generate a Code, it mechanically at Regex

like following.

const images_food_purple_chocolate_dessert_jpg = 'assets/images/food_purple_chocolate_dessert.jpg';
Enter fullscreen mode Exit fullscreen mode

and use

return Image.asset(assets.images_food_purple_chocolate_dessert_jpg);
Enter fullscreen mode Exit fullscreen mode

[ps]: In the future, VSCode's Flutter plug-in or will be discovered at compile time, so this is only know-how for now.

(1) List assets image

:myapp kyorohiro$ find ./assets
./assets/
./assets/.DS_Store
./assets/images
./assets/images/food_pizza_slice_fast.jpg
./assets/images/food_dim_sum_squid.jpg
./assets/images/food_chili_cheese_bowls.jpg
./assets/images/flower_orange_calendula_bright_0.jpg
./assets/images/food_pasta_tomato_theme.jpg
./assets/images/food_purple_chocolate_dessert.jpg
:myapp kyorohiro$ 

Enter fullscreen mode Exit fullscreen mode

(2)Creaet assets.dart

./assets/images/food_pizza_slice_fast.jpg
./assets/images/food_dim_sum_squid.jpg
./assets/images/food_chili_cheese_bowls.jpg
./assets/images/flower_orange_calendula_bright_0.jpg
./assets/images/food_pasta_tomato_theme.jpg
./assets/images/food_purple_chocolate_dessert.jpg
Enter fullscreen mode Exit fullscreen mode

(3) Erase "./"

erase "./" at vscode regex

find: "\.\/" , replace: "" 
Enter fullscreen mode Exit fullscreen mode

Alt Text

assets/images/food_pizza_slice_fast.jpg
assets/images/food_dim_sum_squid.jpg
assets/images/food_chili_cheese_bowls.jpg
assets/images/flower_orange_calendula_bright_0.jpg
assets/images/food_pasta_tomato_theme.jpg
assets/images/food_purple_chocolate_dessert.jpg
Enter fullscreen mode Exit fullscreen mode

(4) Convert into varable

find: "(.*)" , replace: "$1 = '$1'" 
Enter fullscreen mode Exit fullscreen mode

Alt Text

assets/images/food_pizza_slice_fast.jpg = 'assets/images/food_pizza_slice_fast.jpg'
assets/images/food_dim_sum_squid.jpg = 'assets/images/food_dim_sum_squid.jpg'
assets/images/food_chili_cheese_bowls.jpg = 'assets/images/food_chili_cheese_bowls.jpg'
assets/images/flower_orange_calendula_bright_0.jpg = 'assets/images/flower_orange_calendula_bright_0.jpg'
assets/images/food_pasta_tomato_theme.jpg = 'assets/images/food_pasta_tomato_theme.jpg'
assets/images/food_purple_chocolate_dessert.jpg = 'assets/images/food_purple_chocolate_dessert.jpg'
 = ''
Enter fullscreen mode Exit fullscreen mode

(5) "/" and "." into "_"

find: "(.*)/(.*) = (.*)" , replace: "$1_$2 = $3"
find: "(.*)\.(.*) = (.*)" , replace: "const $1;"  
Enter fullscreen mode Exit fullscreen mode

Alt Text

assets_images_food_pizza_slice_fast_jpg = 'assets/images/food_pizza_slice_fast.jpg'
assets_images_food_dim_sum_squid_jpg = 'assets/images/food_dim_sum_squid.jpg'
assets_images_food_chili_cheese_bowls_jpg = 'assets/images/food_chili_cheese_bowls.jpg'
assets_images_flower_orange_calendula_bright_0_jpg = 'assets/images/flower_orange_calendula_bright_0.jpg'
assets_images_food_pasta_tomato_theme_jpg = 'assets/images/food_pasta_tomato_theme.jpg'
assets_images_food_purple_chocolate_dessert_jpg = 'assets/images/food_purple_chocolate_dessert.jpg'
 = ''
Enter fullscreen mode Exit fullscreen mode

Add "Const" and ";"

find: "^(.*)$" , replace: "const $1;" 
Enter fullscreen mode Exit fullscreen mode

Alt Text

const assets_images_food_pizza_slice_fast_jpg = 'assets/images/food_pizza_slice_fast.jpg';
const assets_images_food_dim_sum_squid_jpg = 'assets/images/food_dim_sum_squid.jpg';
const assets_images_food_chili_cheese_bowls_jpg = 'assets/images/food_chili_cheese_bowls.jpg';
const assets_images_flower_orange_calendula_bright_0_jpg = 'assets/images/flower_orange_calendula_bright_0.jpg';
const assets_images_food_pasta_tomato_theme_jpg = 'assets/images/food_pasta_tomato_theme.jpg';
const assets_images_food_purple_chocolate_dessert_jpg = 'assets/images/food_purple_chocolate_dessert.jpg';


Enter fullscreen mode Exit fullscreen mode

PS

this know-how is from following live coding.

https://dev.to/kyorohiro/todo-dart-x-flutter-mokumoku-live-coding-12-09-2020-bbm

and code and live coding url

https://www.youtube.com/watch?v=meWE25TzQHo&list=PLWfoegDu8aWEod96swhiuzUiFLNo8Lra4&index=4&t=2540s

https://github.com/kyorohiro/mokumoku02

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay