更新情報
2023/11/22
・vscodeのアップデートにより、「vscodeのディレクトリ表示の仕方を変更する(file nesting config)」の項目を修正
- "explorer.experimental.fileNesting.enabled": true,
- "explorer.experimental.fileNesting.expand": true,
- "explorer.experimental.fileNesting.patterns": {
+ "explorer.fileNesting.enabled": true,
+ "explorer.fileNesting.expand": true,
+ "explorer.fileNesting.patterns": {
内容
Flutter開発時の便利なTipsメモ
開発環境
PC:macOS Monterey
エディター:Visual Studio Code
vscodeのディレクトリ表示の仕方を変更する(file nesting config)
shift + command + P でコマンドパレットを表示して、settings.jsonと入力する。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F631339%2F708199ac-7c22-54d9-c852-7e2b96b3fcb8.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a6df621502201fc058224c983c36361c)
生成されたsettings.jsonファイルに項目を追加する。
{
"editor.tabSize": 2,
・
・
・
・
・
"dart.debugExternalPackageLibraries": false,
"window.zoomLevel": -1,
// 以下の3つの項目を追加
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.expand": true,
"explorer.fileNesting.patterns": {
"pubspec.yaml": ".packages, .metadata, pubspec.lock",
},
}
左がsettings.jsonに追加前、
右がsettings.jsonに追加後。
pubspec.yamlに関するファイル(.packages, .metadata, pubspec.lock)がネストするようになった。
constを保存時に自動で行う
まずは、file nesting configと同様にコマンドパレットからsettings.jsonを表示する。
そして、以下のコードを追加する。
"editor.codeActionsOnSave": {
"source.fixAll": true,
}
パッケージの追加
shift + command + P でコマンドパレットを表示して、Add Dependencyと入力する。
例として、providerと入力して、パッケージを入力する。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F631339%2Fb1547613-9154-8608-daaf-a5d7e98df0f6.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=50e4b655599f59eaa11f0eeb9c07310a)
pubspec.yamlにproviderが追加される
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F631339%2Ffaaa8cc8-6819-d6c1-fce7-04a9f213d933.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8e45d16b62c0977699f680c629f10423)
Awesome Flutter Snippets
vscodeの拡張機能にAwesome Flutter Snippetsを追加する。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F631339%2F8df73106-aff4-0ace-637d-414ab5b02381.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3562b98318a2fcd15737d7d1555c873c)
パッケージをインポートする。
importMと入力して、エンターをクリックすると、material.dartをインポートしてくれる。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F631339%2Fbb36b09a-e6e5-e660-c0e7-075cf251dab0.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=dd0cec911d39fdbf4a39ddc02dedd0a8)
widgetを作成する。
例えば、StatelessWidgetを作成する場合、statelessWと入力して、エンターをクリックすると、sample codeのようなコードが生成される。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F631339%2Fbf01b850-c5b4-663c-536a-daeecca75ae0.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8ffdd2eca487e210d2964fa52189f369)
class name extends StatelessWidget {
const name({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container();
}
}
デバッグモードの時だけ、ログを出力する。
foundation.dartをインポートして、kDebugModeを使用できるようにする。
import 'package:flutter/foundation.dart'; // <- 追加
import 'package:flutter/material.dart';
class Sample extends StatefulWidget {
const Sample({Key? key}) : super(key: key);
@override
State<Sample> createState() => _SampleState();
}
class _SampleState extends State<Sample> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
//デバッグモードの時のみprintする。
if (kDebugMode) {
print('build app');
}
return Scaffold(
appBar: AppBar(
title: const Text('Count Up App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}