Skip to content

Instantly share code, notes, and snippets.

@HansMuller
Created April 18, 2018 16:49
Show Gist options
  • Save HansMuller/21f2e7b93d8f05c0ebd2617906ced5a6 to your computer and use it in GitHub Desktop.
Save HansMuller/21f2e7b93d8f05c0ebd2617906ced5a6 to your computer and use it in GitHub Desktop.
import 'package:flutter/material.dart';
class NewsCardLayout extends MultiChildLayoutDelegate {
NewsCardLayout();
static const String title = 'title';
static const String description = 'description';
static const String source = 'source';
@override
void performLayout(Size size) {
final Size titleSize = layoutChild(title, new BoxConstraints.loose(size));
final Size sourceSize = layoutChild(source, new BoxConstraints.loose(size));
layoutChild(
description,
new BoxConstraints.loose(
new Size(size.width, size.height - titleSize.height - sourceSize.height),
)
);
positionChild(title, Offset.zero);
positionChild(description, new Offset(0.0, titleSize.height));
positionChild(source, new Offset(0.0, size.height - sourceSize.height));
}
@override
bool shouldRelayout(NewsCardLayout oldDelegate) => false;
}
class NewsCard extends StatelessWidget {
const NewsCard({ Key key, this.title, this.description, this.source }) : super(key: key);
final String title;
final String description;
final String source;
@override
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
return new Card(
child: new Container(
height: 176.0,
padding: const EdgeInsets.all(8.0),
child: new CustomMultiChildLayout(
delegate: new NewsCardLayout(),
children: <Widget>[
new LayoutId(
id: NewsCardLayout.title,
child: new Text(
title,
maxLines: 3,
style: theme.textTheme.title,
overflow: TextOverflow.ellipsis,
),
),
new LayoutId(
id: NewsCardLayout.description,
child: new Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: new LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
final TextStyle style = theme.textTheme.subhead;
return new Text(
description,
maxLines: (constraints.biggest.height / style.fontSize).floor(),
style: style,
overflow: TextOverflow.ellipsis,
);
},
),
),
),
new LayoutId(
id: NewsCardLayout.source,
child: new Text(
source,
style: theme.textTheme.caption,
),
),
],
),
),
);
}
}
class CustomCardLayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: AppBar(
title: const Text('Custom Card Layout'),
),
body: new ListView(
padding: const EdgeInsets.symmetric(
vertical: 16.0,
horizontal: 40.0,
),
children: <Widget>[
const NewsCard(
title: 'A short title',
description: 'A short description',
source: 'source',
),
const SizedBox(height: 24.0),
const NewsCard(
title: 'A much longer title that goes on and on and on and eventually spans more than three lines',
description: 'An equally long descrption that goes on and on and eventually fills all of the available space because there just no end to it, no end at all',
source: 'source',
),
],
),
),
);
}
}
void main() {
runApp(new CustomCardLayoutDemo());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment