fixed multiline section header with leading widget

This commit is contained in:
Thibault Deckers 2020-01-16 20:02:41 +09:00
parent a7e4389519
commit 6f31f03451
2 changed files with 76 additions and 44 deletions

View file

@ -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,
),
); );
} }
} }

View file

@ -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,
),
],
),
), ),
], ],
); );