git-touch-android-ios-app/lib/widgets/language_bar.dart

111 lines
3.2 KiB
Dart

import 'package:antd_mobile/antd_mobile.dart';
import 'package:flutter/cupertino.dart';
import 'package:from_css_color/from_css_color.dart';
import 'package:git_touch/utils/utils.dart';
import 'package:github/github.dart' as github;
class LanguageBarItem {
LanguageBarItem({
required this.name,
required this.ratio,
String? hexColor,
}) : hexColor = hexColor ?? github.languageColors[name!];
String? name;
String? hexColor;
double? ratio;
}
class LanguageBar extends StatelessWidget {
const LanguageBar(this.items);
final List<LanguageBarItem> items;
static const _padding = 8.0;
@override
Widget build(BuildContext context) {
final langWidth = MediaQuery.of(context).size.width -
_padding * 2 - // left, right
(items.length - 1) - // space between items
1; // buffer for rounding
return CupertinoButton(
padding: EdgeInsets.zero,
minSize: 0,
onPressed: () async {
await AntPopup.show(
context: context,
closeOnMaskClick: true,
builder: _buildPopup,
);
},
child: Padding(
padding: const EdgeInsets.all(_padding),
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Wrap(
spacing: 1,
children: [
for (final lang in items)
Container(
color: fromCssColor(lang.hexColor!),
width: langWidth * lang.ratio!,
height: 12,
)
],
),
),
),
);
}
Widget _buildPopup(BuildContext context) {
return Container(
color: AntTheme.of(context).colorBackground,
padding: CommonStyle.padding,
height: 300,
child: SingleChildScrollView(
child: Table(children: [
for (final edge in items)
TableRow(children: [
Container(
padding: CommonStyle.padding,
child: Row(children: <Widget>[
Container(
width: 18,
height: 18,
decoration: BoxDecoration(
color: fromCssColor(edge.hexColor!),
shape: BoxShape.circle,
),
),
const SizedBox(width: 8),
Text(
edge.name!,
style: TextStyle(
color: AntTheme.of(context).colorText,
fontSize: 18,
decoration: TextDecoration.underline,
decorationColor: AntTheme.of(context).colorBackground,
),
),
]),
),
Container(
padding: CommonStyle.padding,
child: Text(
'${(edge.ratio! * 100).toStringAsFixed(1)}%',
style: TextStyle(
color: AntTheme.of(context).colorTextSecondary,
fontSize: 18,
decoration: TextDecoration.underline,
decorationColor: AntTheme.of(context).colorBackground,
),
),
),
])
]),
),
);
}
}