import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(
home: Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.all(20),
child: DottedLineWidget(),
),
),
),
));
}
class DottedLineWidget extends StatefulWidget {
const DottedLineWidget({Key? key}) : super(key: key);
@override
State<DottedLineWidget> createState() => _DottedLineWidgetState();
}
class _DottedLineWidgetState extends State<DottedLineWidget> {
late bool _ellipsisMode = false;
bool _isSelected = false;
double _widthOfRowWidget = 0;
double _widthOfTextContainerWidget = 0;
final GlobalKey _rowKey = GlobalKey();
final GlobalKey _textContainerKey = GlobalKey();
Widget _buildSecondContainer() {
if (_ellipsisMode) {
return const SizedBox.shrink();
} else {
return const FittedBox(
child: Text(
'- - - - - - - - - - - - - - -',
maxLines: 1,
),
);
}
}
@override
Widget build(BuildContext context) {
WidgetsBinding.instance.addPostFrameCallback((_) {
_widthOfRowWidget = _rowKey.currentContext?.size?.width ?? 0;
_widthOfTextContainerWidget = _textContainerKey.currentContext?.size?.width ?? 0;
/// 50 pixel limit
_ellipsisMode = _widthOfRowWidget - _widthOfTextContainerWidget <= 50;
setState(() {});
});
return Row(
key: _rowKey,
children: [
Flexible(
child: Card(
child: FittedBox(
child: Text(
_isSelected ? _ConstantText.longText : _ConstantText.shortText,
maxLines: 1,
key: _textContainerKey,
overflow: _ellipsisMode ? TextOverflow.ellipsis : null,
),
),
),
),
Container(
color: Colors.red,
margin: EdgeInsets.zero,
child: _buildSecondContainer(),
),
Expanded(
child: Checkbox(
value: _isSelected,
onChanged: (isSelected) {
setState(() => _isSelected = isSelected ?? false);
},
),
),
],
);
}
}
class _ConstantText {
static const String shortText = 'Lorem ipsum kk adjc diri';
static const String longText = 'Lorem ipsum kk adjc jjj cd kcsc jnkjnk ksncs cibv diri';
}