fixed multiline section header with leading widget
This commit is contained in:
parent
a7e4389519
commit
6f31f03451
2 changed files with 76 additions and 44 deletions
|
@ -54,36 +54,38 @@ class TitleSectionHeader extends StatelessWidget {
|
||||||
|
|
||||||
const TitleSectionHeader({Key key, this.leading, this.title}) : super(key: key);
|
const TitleSectionHeader({Key key, this.leading, this.title}) : super(key: key);
|
||||||
|
|
||||||
|
static const leadingDimension = 32.0;
|
||||||
|
static const leadingPadding = EdgeInsets.only(right: 8, bottom: 4);
|
||||||
|
static const textStyle = TextStyle(
|
||||||
|
color: Color(0xFFEEEEEE),
|
||||||
|
fontSize: 20,
|
||||||
|
fontFamily: 'Concourse Caps',
|
||||||
|
shadows: [
|
||||||
|
Shadow(
|
||||||
|
offset: Offset(0, 2),
|
||||||
|
blurRadius: 3,
|
||||||
|
color: Color(0xFF212121),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
final text = OutlinedText(
|
return Padding(
|
||||||
title,
|
|
||||||
style: TextStyle(
|
|
||||||
color: Colors.grey[200],
|
|
||||||
fontSize: 20,
|
|
||||||
fontFamily: 'Concourse Caps',
|
|
||||||
shadows: [
|
|
||||||
Shadow(
|
|
||||||
offset: const Offset(0, 2),
|
|
||||||
blurRadius: 3,
|
|
||||||
color: Colors.grey[900],
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
outlineColor: Colors.black87,
|
|
||||||
outlineWidth: 2,
|
|
||||||
);
|
|
||||||
return Container(
|
|
||||||
padding: const EdgeInsets.all(16),
|
padding: const EdgeInsets.all(16),
|
||||||
child: leading != null
|
child: OutlinedText(
|
||||||
? Row(
|
leadingBuilder: leading != null
|
||||||
children: [
|
? (context, isShadow) => Container(
|
||||||
leading,
|
padding: leadingPadding,
|
||||||
const SizedBox(width: 8),
|
width: leadingDimension,
|
||||||
text,
|
height: leadingDimension,
|
||||||
],
|
child: isShadow ? null : leading,
|
||||||
)
|
)
|
||||||
: text,
|
: null,
|
||||||
|
text: title,
|
||||||
|
style: textStyle,
|
||||||
|
outlineWidth: 2,
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,35 +1,65 @@
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
typedef OutlinedWidgetBuilder = Widget Function(BuildContext context, bool isShadow);
|
||||||
|
|
||||||
class OutlinedText extends StatelessWidget {
|
class OutlinedText extends StatelessWidget {
|
||||||
final String data;
|
final OutlinedWidgetBuilder leadingBuilder;
|
||||||
|
final String text;
|
||||||
final TextStyle style;
|
final TextStyle style;
|
||||||
final double outlineWidth;
|
final double outlineWidth;
|
||||||
final Color outlineColor;
|
final Color outlineColor;
|
||||||
|
|
||||||
const OutlinedText(
|
static const leadingAlignment = PlaceholderAlignment.middle;
|
||||||
this.data, {
|
|
||||||
|
const OutlinedText({
|
||||||
Key key,
|
Key key,
|
||||||
this.style,
|
this.leadingBuilder,
|
||||||
@required this.outlineWidth,
|
@required this.text,
|
||||||
@required this.outlineColor,
|
@required this.style,
|
||||||
}) : super(key: key);
|
double outlineWidth,
|
||||||
|
Color outlineColor,
|
||||||
|
}) : outlineWidth = outlineWidth ?? 1,
|
||||||
|
outlineColor = outlineColor ?? Colors.black,
|
||||||
|
super(key: key);
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Stack(
|
return Stack(
|
||||||
children: [
|
children: [
|
||||||
Text(
|
RichText(
|
||||||
data,
|
text: TextSpan(
|
||||||
style: style.copyWith(
|
children: [
|
||||||
foreground: Paint()
|
if (leadingBuilder != null)
|
||||||
..style = PaintingStyle.stroke
|
WidgetSpan(
|
||||||
..strokeWidth = outlineWidth
|
alignment: leadingAlignment,
|
||||||
..color = outlineColor,
|
child: leadingBuilder(context, true),
|
||||||
|
),
|
||||||
|
TextSpan(
|
||||||
|
text: text,
|
||||||
|
style: style.copyWith(
|
||||||
|
foreground: Paint()
|
||||||
|
..style = PaintingStyle.stroke
|
||||||
|
..strokeWidth = outlineWidth
|
||||||
|
..color = outlineColor,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
Text(
|
RichText(
|
||||||
data,
|
text: TextSpan(
|
||||||
style: style,
|
children: [
|
||||||
|
if (leadingBuilder != null)
|
||||||
|
WidgetSpan(
|
||||||
|
alignment: leadingAlignment,
|
||||||
|
child: leadingBuilder(context, false),
|
||||||
|
),
|
||||||
|
TextSpan(
|
||||||
|
text: text,
|
||||||
|
style: style,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue