Created
April 18, 2018 16:49
-
-
Save HansMuller/21f2e7b93d8f05c0ebd2617906ced5a6 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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