Overview
FlutterでUIの開発をしているときに、OverFlowが発生したり、このウイジェットはどの辺に配置されているのか？、どれぐらいの面積なのか？調べたいことがあります。
他にアプリのパフォーマンスの計測ですかね。これは難しい😅
summary
テキストだけだと、わからないと思ったので、動画を作ってみました!
OverFlowの解決をやってみたり、このウイジェットはこの辺に配置されているぐらいしか、説明しないですが、ツールの使い方は学習の参考になるかなと思われます。
今回は記事の方では詳しくは解説してないです
上の動画を見て、こんな風に使うんだなってご理解していただきたいです🙇
VScodeだと、command + shift + p を押すと、 コマンドパレットが開いて、ツールを使用することができます。
今回はこのエラーを解決する
ListView.builderをExpandedでラップするだけですけどね。これでOverFlowの解決はできる。
Widgetが広がった分を伸ばして上げるだけですね。
ラップするとこんな感じでOverFlowは消えます。
thoughts
今回は、動画を見てもらってなんとなく、DevToolsの使い方をご理解いただけたでしょうか？
普段使うことがあまりなかったので、今回は海外の動画を見たりして勉強して自分で日本語の動画を作ってみました。
全体のコード
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
useMaterial3: true,
),
home: const MyHomePage(title: 'MyApp'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late DateTime now;
late String yearMonth;
late String dayOfWeek;
late String time;
void initState() {
super.initState();
now = DateTime.now();
yearMonth = '${now.year}/${now.month.toString().padLeft(2, '0')}';
dayOfWeek = _getDayOfWeekInJapanese(now.weekday);
time =
'${now.hour.toString().padLeft(2, '0')}:${now.minute.toString().padLeft(2, '0')}:${now.second.toString().padLeft(2, '0')}';
}
String _getDayOfWeekInJapanese(int weekday) {
switch (weekday) {
case 1:
return '月';
case 2:
return '火';
case 3:
return '水';
case 4:
return '木';
case 5:
return '金';
case 6:
return '土';
case 7:
return '日';
default:
return '';
}
}
// Map型のListを作成
List<Map<String, dynamic>> users = [
{'name': 'Jboy', 'age': 34},
{'name': 'moto', 'age': 25},
{'name': 'minn', 'age': 20},
{'name': 'cobo', 'age': 25},
{'name': 'yuiyui', 'age': 25},
{'name': 'isige', 'age': 28},
{'name': 'hina', 'age': 19},
{'name': 'kuro', 'age': 19},
];
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
children: <Widget>[
const SizedBox(height: 20),
Container(
width: 150,
height: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.blue, // ボーダーの色を設定します
width: 3.0, // ボーダーの幅を設定します
),
),
child: ClipOval(
child: Image.asset('images/orechan.png'),
),
),
const SizedBox(height: 20),
SizedBox(
width: MediaQuery.of(context).size.width,
child: Column(
children: [
Text(
'$yearMonth $dayOfWeek $time',
style: Theme.of(context).textTheme.headlineMedium,
),
Padding(
padding: EdgeInsets.only(left: 16.0),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Jboy',
),
),
),
Padding(
padding: EdgeInsets.only(left: 16.0),
child: Row(
children: [
Text(
'Hashimoto',
),
SizedBox(width: 10),
// 左寄せのText
Text(
'34',
),
],
),
),
Padding(
padding: EdgeInsets.only(left: 16.0),
child: Row(
children: [
Icon(Icons.location_on),
Text(
'Tokyo',
),
],
),
)
],
),
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
const SizedBox(height: 20),
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: users.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.only(left: 16.0, right: 16.0),
child: Card(
color: Colors.white,
shadowColor: Colors.green,
child: ListTile(
leading: SizedBox(
width: 50,
height: 50,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.blue, // ボーダーの色を設定します
width: 3.0, // ボーダーの幅を設定します
),
),
child: ClipOval(
child: Image.asset('images/orechan.png'),
),
),
),
title: Row(
children: [
Text(users[index]['name']), // Listからnameのkeyを取得
const SizedBox(width: 10),
Text(users[index]['age']
.toString()), // Listからageのkeyを取得
],
),
),
),
);
},
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
Discussion