Skip to content

Commit

Permalink
Home Page Layout Update
Browse files Browse the repository at this point in the history
  • Loading branch information
Atiq Samtia committed Apr 2, 2020
1 parent c794a2c commit f5effa4
Show file tree
Hide file tree
Showing 7 changed files with 224 additions and 96 deletions.
3 changes: 3 additions & 0 deletions lib/config.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ const String TITLE = "ProPakistani";
/// last slash ' / ' is mandatory
const String URL = "https://propakistani.pk/";

const int FEATURED_CATEGORY_ID = 46671;
const String FEATURED_CATEGORY_TITLE = 'Featured';

const MaterialColor APP_COLOR = MaterialColor(0xFF249991, {
50: Color(0x1A249991),
100: Color(0x33249991),
Expand Down
11 changes: 10 additions & 1 deletion lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,16 @@ class MyApp extends StatelessWidget {
return MaterialApp(
title: TITLE,
theme: ThemeData(
primarySwatch: APP_COLOR,
primaryColor: Color(0xFF249991),
accentColor: Color(0xFF249991),
appBarTheme: AppBarTheme(
textTheme: TextTheme(title: TextStyle(color: Colors.black, fontSize: 24.0, fontWeight: FontWeight.bold)),
color: Colors.white,
elevation: 0,
iconTheme: IconThemeData(color: Colors.black)),
textTheme: TextTheme(
display1: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),
),
home: HomePage(),
);
Expand Down
58 changes: 56 additions & 2 deletions lib/pages/home.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

import '../config.dart';
import '../model/post_entity.dart';
import '../pages/single_category.dart';
import '../widgets/featured_category_list.dart';
import '../widgets/posts_list.dart';
import '../config.dart';

class HomePage extends StatefulWidget {
@override
Expand Down Expand Up @@ -41,7 +42,25 @@ class _HomePageState extends State<HomePage> {
title: Text(TITLE),
),
drawer: drawer(),
body: PostsList(),
body: Container(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListHeading(FEATURED_CATEGORY_TITLE, FEATURED_CATEGORY_ID),
Container(
height: 250.0,
child: FeaturedCategoryList(),
),
ListHeading('Latest', 0),
Flexible(
fit: FlexFit.loose,
child: PostsList(),
),
],
),
),
),
);
}

Expand Down Expand Up @@ -70,3 +89,38 @@ class _HomePageState extends State<HomePage> {
);
}
}

class ListHeading extends StatelessWidget {
final String title;
final int categoryId;

ListHeading(this.title, this.categoryId);

@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 2.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
title,
style: Theme.of(context).textTheme.display1,
),
GestureDetector(
onTap: () {
PostCategory category = PostCategory(name: title, id: categoryId);
Navigator.push(context, MaterialPageRoute(builder: (context) => SingleCategory(category)));
},
child: Container(
decoration: BoxDecoration(borderRadius: BorderRadius.circular(8.0), color: Colors.grey.shade300),
padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
child: Text('Show All'),
),
)
],
),
);
}
}
2 changes: 1 addition & 1 deletion lib/pages/post_details.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ class PostDetails extends StatelessWidget {

@override
Widget build(BuildContext context) {
post.isDetailCard = true;
// post.isDetailCard = true;
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
Expand Down
58 changes: 58 additions & 0 deletions lib/widgets/featured_category_list.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

import '../config.dart';
import '../model/post_entity.dart';
import '../widgets/post_card.dart';

class FeaturedCategoryList extends StatefulWidget {
@override
_FeaturedCategoryListState createState() => _FeaturedCategoryListState();
}

class _FeaturedCategoryListState extends State<FeaturedCategoryList> with AutomaticKeepAliveClientMixin {
List<PostEntity> posts = new List<PostEntity>();
bool isLoading = true;

@override
void initState() {
super.initState();

http.get(URL + "wp-json/wp/v2/posts?_embed&categories=$FEATURED_CATEGORY_ID").then((response) {
dynamic json = jsonDecode(response.body);

List<PostEntity> _posts = new List<PostEntity>();
(json as List).forEach((v) {
_posts.add(new PostEntity.fromJson(v));
});

setState(() {
isLoading = false;
posts.addAll(_posts);
});
});
}

@override
Widget build(BuildContext context) {
super.build(context);
return isLoading
? Center(
child: CircularProgressIndicator(),
)
: ListView.builder(
itemCount: posts?.length ?? 0,
scrollDirection: Axis.horizontal,
shrinkWrap: true,
// physics: ClampingScrollPhysics(),
itemBuilder: (context, index) {
return PostCard(posts[index], isFeaturedList: true);
},
);
}

@override
bool get wantKeepAlive => true;
}
172 changes: 89 additions & 83 deletions lib/widgets/post_card.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,110 +5,116 @@ import '../model/post_entity.dart';

class PostCard extends StatelessWidget {
PostEntity post;
bool isFeaturedList;

PostCard(this.post);
PostCard(this.post, {this.isFeaturedList = false});

@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
double width = isFeaturedList ? size.width * 0.8 : size.width;
return GestureDetector(
onTap: () {
if(!post.isDetailCard)
if(isFeaturedList)
Navigator.push(context, MaterialPageRoute(builder: (context) => PostDetails(post)));
},
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Material(
elevation: 14.0,
borderRadius: BorderRadius.circular(10.0),
shadowColor: Theme.of(context).primaryColor.withOpacity(.5),
child: SizedBox(
height: 200.0,
width: MediaQuery.of(context).size.width,
child: Stack(
children: <Widget>[
FadeInImage.assetNetwork(placeholder: 'images/placeholder.jpg', image: post.image, width: MediaQuery.of(context).size.width, fit: BoxFit.cover),
Positioned(
right: 0,
child: Padding(
padding: const EdgeInsets.only(right: 5.0),
child: Opacity(
opacity: 0.8,
child: MaterialButton(
height: 26.0,
onPressed: () {},
color: Theme.of(context).primaryColor,
child: Text(post.extra.categories[0].name.toUpperCase(),
style: TextStyle(
color: Colors.white,
fontSize: 12.0,
)),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
padding: EdgeInsets.all(isFeaturedList ? 10.0 : 5.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(isFeaturedList ? 14.0 : 0.0),
child: Material(
elevation: 14.0,
borderRadius: BorderRadius.circular(10.0),
shadowColor: Theme.of(context).primaryColor.withOpacity(.5),
child: SizedBox(
height: 200.0,
width: width,
child: Stack(
children: <Widget>[
FadeInImage.assetNetwork(placeholder: 'images/placeholder.jpg', image: post.image, width: width, height: size.height, fit: BoxFit.cover),
Positioned(
right: 0,
child: Padding(
padding: const EdgeInsets.only(right: 5.0),
child: Opacity(
opacity: 0.8,
child: MaterialButton(
height: 26.0,
onPressed: () {},
color: Theme.of(context).primaryColor,
child: Text(post.extra.categories[0].name.toUpperCase(),
style: TextStyle(
color: Colors.white,
fontSize: 12.0,
)),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
),
),
),
),
),
Positioned(
bottom: 0,
child: Container(
decoration: BoxDecoration(gradient: LinearGradient(begin: Alignment.bottomCenter, end: Alignment.topCenter, colors: [Colors.black, Colors.transparent])),
width: MediaQuery.of(context).size.width,
Positioned(
bottom: 0,
child: Container(
decoration: BoxDecoration(gradient: LinearGradient(begin: Alignment.bottomCenter, end: Alignment.topCenter, colors: [Colors.black, Colors.transparent])),
width: width,
child: Padding(
padding: const EdgeInsets.only(top: 15.0, bottom: 5.0, left: 5.0, right: 5.0),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(3.0),
child: Text(
post.title,
textAlign: TextAlign.left,
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 18.0),
),
),
],
),
),
),
),
Positioned(
child: Padding(
padding: const EdgeInsets.only(top: 15.0, bottom: 5.0, left: 5.0, right: 5.0),
child: Column(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Image.network(
post.extra.author[0].avatar,
height: 26.0,
),
),
Padding(
padding: const EdgeInsets.all(3.0),
padding: const EdgeInsets.only(left: 8.0),
child: Text(
post.title,
textAlign: TextAlign.left,
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 18.0),
post.extra.author[0].name,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 14.0,
shadows: <Shadow>[
Shadow(
offset: Offset(1.0, 1.0),
blurRadius: 5.0,
color: Colors.black,
),
Shadow(
offset: Offset(1.0, 1.0),
blurRadius: 8.0,
color: Colors.black,
),
],
),
),
),
],
),
),
),
),
Positioned(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: Image.network(
post.extra.author[0].avatar,
height: 26.0,
),
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text(
post.extra.author[0].name,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 14.0,
shadows: <Shadow>[
Shadow(
offset: Offset(1.0, 1.0),
blurRadius: 5.0,
color: Colors.black,
),
Shadow(
offset: Offset(1.0, 1.0),
blurRadius: 8.0,
color: Colors.black,
),
],
),
),
),
],
),
),
)
],
)
],
),
),
),
),
Expand Down
16 changes: 7 additions & 9 deletions lib/widgets/posts_list.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,15 +68,13 @@ class _PostsListState extends State<PostsList> {

@override
Widget build(BuildContext context) {
return Center(
child: ListView.builder(
itemBuilder: postTile,
itemCount: posts.length + 1,
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: ClampingScrollPhysics(),
controller: _scrollController,
),
return ListView.builder(
itemBuilder: postTile,
itemCount: posts.length + 1,
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: ClampingScrollPhysics(),
controller: _scrollController,
);
}

Expand Down

0 comments on commit f5effa4

Please sign in to comment.