0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Dart X Flutter VSCode の 正規表現で asset.dart を生成する

Last updated at Posted at 2020-09-12

VSCode の 正規表現を利用して assets 操作向けの asset.dart を、生成
する方法について書いてます。

Flutter で Assetsを 使う場合、文字列で指定します。

return Image.asset("assets/images/food_purple_chocolate_dessert.jpg");

今のところ、このコードに問題があることは、実際に動かしてみるまで
わかりません。

そこで、機械的に、

const images_food_purple_chocolate_dessert_jpg = 'assets/images/food_purple_chocolate_dessert.jpg';

のようなコードを機械的に書いてあげて、

return Image.asset(assets.images_food_purple_chocolate_dessert_jpg);

として使用すれば、間違える事はなくなります。

※ 将来的には、VSCode の Flutter の プラグイン ないし コンパイル時に発見してくれると思うので今だけのノウハウです

(1) Assets 画像の一覧表示

: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$ 

(2) 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

(3) "./" を削除

find: "\.\/" , replace: "" 

obzg4jvryhfyr68v65fr.png

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

(4) 変数っぽく変換する

find: "(.*)" , replace: "$1 = '$1'" 

au9lhgtnn6i7zd3b5ta0.png

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'
 = ''

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

変数に使用できない文字を置換します

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

oxvtpmjjf5r7xjsfueu3.png

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'
 = ''

(6) "Const" と ";" を付与

find: "^(.*)$" , replace: "const $1;" 

t660byekgvylcco4txfc.png

onst 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';


PS

このノウハウは、以下のライブコーディングをまとめたものです

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?