😀
[Flutter] IntrinsicHeightでサイズを備える。
目的
ListViewの中で特定のColumnをサイズを隣のColumnサイズに備える。
Before
After
修正前のソースコード
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({super.key});
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool? isChecked = true;
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('My App'),
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: ListView(
children: [
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
width: 1.0,
),
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
const Column(
children: [
Text('11:00', style: TextStyle(
fontWeight: FontWeight.w600,
color: Colors.blue,
fontSize: 16.0,
),
),
Text('12:00', style: TextStyle(
fontWeight: FontWeight.w600,
color: Colors.blue,
fontSize: 16.0,
),
),
],
),
const SizedBox(width: 16.0),
const Expanded(child: Text('内容')),
Checkbox(
value: isChecked,
onChanged: (bool? value) {
setState(() {
isChecked = value;
});
},
),
Container(
decoration: const BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
width: 16.0,
height: 16.0,
)
],
),
),
)
],
),
)
),
);
}
}
修正後のソースコード
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({super.key});
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool? isChecked = true;
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('My App'),
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: ListView(
children: [
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
width: 1.0,
),
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: const EdgeInsets.all(16),
+ child: IntrinsicHeight(
child: Row(
+ crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Column(
children: [
Text('11:00', style: TextStyle(
fontWeight: FontWeight.w600,
color: Colors.blue,
fontSize: 16.0,
),
),
Text('12:00', style: TextStyle(
fontWeight: FontWeight.w600,
color: Colors.blue,
fontSize: 16.0,
),
),
],
),
const SizedBox(width: 16.0),
const Expanded(child: Text('テスト内容')),
Checkbox(
value: isChecked,
onChanged: (bool? value) {
setState(() {
isChecked = value;
});
},
),
Container(
decoration: const BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
width: 16.0,
height: 16.0,
)
],
),
+ ),
),
)
],
),
)
),
);
}
}
Discussion