From 548e590b12f2db6ea536eb153165de6edb9d7664 Mon Sep 17 00:00:00 2001 From: David Allemang Date: Thu, 27 Feb 2020 00:05:43 -0500 Subject: [PATCH] better widgets --- lib/news/article.dart | 77 +++++++++++++++++++++++---------------- lib/news/feed.dart | 84 ++++++++++++++++++++++--------------------- 2 files changed, 91 insertions(+), 70 deletions(-) diff --git a/lib/news/article.dart b/lib/news/article.dart index 1e920b1..4acc3a5 100644 --- a/lib/news/article.dart +++ b/lib/news/article.dart @@ -11,18 +11,17 @@ class Article { final String thumbUrl; Article( - this.id, { - this.type, - this.sport, - this.title, - this.mediumHeadline, - this.url, - this.summary, - this.thumbUrl, - }); + this.id, { + this.type, + this.sport, + this.title, + this.mediumHeadline, + this.url, + this.summary, + this.thumbUrl, + }); - factory Article.fromJson(Map json, - {String root = 'https://www.ncaa.com'}) { + factory Article.fromJson(Map json) { return Article( json['id'], type: json['type'], @@ -40,33 +39,51 @@ class ArticleCard extends StatelessWidget { const ArticleCard({ Key key, @required this.article, - @required this.height, - @required this.width, + this.numCards = 1.25, }) : super(key: key); final Article article; - final double height; - final double width; + final double numCards; + + double widthIn(BuildContext context) { + return MediaQuery.of(context).size.width / numCards; + } @override Widget build(BuildContext context) { + var decoration = BoxDecoration( + image: DecorationImage( + image: NetworkImage( + article.thumbUrl, + ), + fit: BoxFit.cover, + ), + ); + + var body = Column( + verticalDirection: VerticalDirection.up, + children: [ + Container( + color: Colors.white, + child: ListTile( + title: Text( + article.mediumHeadline, + overflow: TextOverflow.ellipsis, + maxLines: 2, + ), + ), + ), + ], + ); + return SizedBox( - height: height, - width: width, + width: widthIn(context), child: Card( - clipBehavior: Clip.antiAlias, - child: Wrap( - verticalDirection: VerticalDirection.up, - children: [ - ListTile( - title: Text(article.title), - trailing: Icon(Icons.more_horiz), - ), - Image.network( - article.thumbUrl, - fit: BoxFit.fitWidth, - ), - ], + semanticContainer: true, + clipBehavior: Clip.antiAliasWithSaveLayer, + child: Container( + decoration: decoration, + child: body, ), ), ); diff --git a/lib/news/feed.dart b/lib/news/feed.dart index 5c34582..f7faa62 100644 --- a/lib/news/feed.dart +++ b/lib/news/feed.dart @@ -6,9 +6,10 @@ import 'dart:convert'; import 'article.dart'; class Feed { + static final cobraBase = "https://www.ncaa.com/ncaa/cobra"; + Future> getPage(int page, {int size = 10}) async { - var url = - 'https://www.ncaa.com/ncaa/cobra/school-content/charlotte,$page,$size'; + var url = '$cobraBase/school-content/charlotte,$page,$size'; http.Response response = await http.get(url); Iterable articles = json.decode(response.body); return articles.map((e) => Article.fromJson(e)).toList(); @@ -16,55 +17,58 @@ class Feed { } class HorizontalNewsFeed extends StatelessWidget { + final Feed newsFeed; + final Widget title; + final double numCards; + const HorizontalNewsFeed({ Key key, @required this.newsFeed, @required this.title, + this.numCards = 3.25, }) : super(key: key); - final Feed newsFeed; - final Widget title; + double heightIn(BuildContext context) { + return MediaQuery.of(context).size.height / numCards; + } @override Widget build(BuildContext context) { - var width = MediaQuery.of(context).size.width / 1.25; - var height = width * .6; - - return Column( - children: [ - Divider(), - ListTile( - title: title, - trailing: IconButton( - icon: Icon(Icons.navigate_next), - onPressed: () {}, + return SizedBox( + height: heightIn(context), + child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + ListTile( + title: title, + trailing: IconButton( + icon: Icon(Icons.navigate_next), + onPressed: () {}, + ), ), - ), - Container( - height: height, - child: FutureBuilder( - future: newsFeed.getPage(1), - builder: (ctx, snapshot) { - if (!snapshot.hasData) { - return Center(child: CircularProgressIndicator()); - } else { - List
articles = snapshot.data; - return ListView.builder( - scrollDirection: Axis.horizontal, - itemCount: articles.length, - itemBuilder: (ctx, idx) { - return ArticleCard( - article: articles[idx], - height: height, - width: width, - ); - }, - ); - } - }, + Expanded( + child: FutureBuilder( + future: newsFeed.getPage(1), + builder: (ctx, snapshot) { + if (!snapshot.hasData) { + return Center(child: CircularProgressIndicator()); + } else { + List
articles = snapshot.data; + return ListView.builder( + scrollDirection: Axis.horizontal, + itemCount: articles.length, + itemBuilder: (ctx, idx) { + return ArticleCard( + article: articles[idx], + ); + }, + ); + } + }, + ), ), - ), - ], + ], + ), ); } }