In this tutorial, I'm going to show you how to make a simple book store app using flutter, in this tutorial you will learn how to make a simple horizontal scroll list, and how to create a clean layout for your app
source code
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Booksapp(),
));
class Booksapp extends StatefulWidget {
@override
_BooksappState createState() => _BooksappState();
}
class _BooksappState extends State<Booksapp> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text("Book Store", style: TextStyle(color: Colors.black),),
centerTitle: true,
backgroundColor: Colors.white,
elevation: 0.0,
actions: <Widget>[
IconButton(
onPressed: (){},
icon: Icon(Icons.more_horiz, color: Colors.black,),
)
],
),
body: Padding(
padding: const EdgeInsets.only(top: 20.0,left: 25.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Top Book for this year",
style: TextStyle(
color: Colors.black87,
fontSize: 30.0
),
),
SizedBox(
height: 15.0,
),
Text(
"This is a selection of the most rated Book of this year, pick your favorite one",
style: TextStyle(
fontSize: 18.0,
height: 1.5,
),
),
SizedBox(height: 15.0,),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: 200.0,
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(4.0)
),
child: ClipRRect(
borderRadius: BorderRadius.circular(4.0),
child: Image.network("https://d1csarkz8obe9u.cloudfront.net/posterpreviews/non-fiction-business-kindle-book-cover-design-template-2fac9a2b8a04f729d06c809ad50214b6.jpg?ts=1561422624", fit: BoxFit.fill,),
),
),
SizedBox(width: 20.0,),
Container(
height: 200.0,
width: 200.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Creative Bussines Start up",
style: TextStyle(
color:Colors.black87 ,
fontSize: 22.0,
fontWeight: FontWeight.bold,
),
overflow: TextOverflow.fade,
),
SizedBox(height: 10.0,),
Text(
"By Jen Brazel",
style: TextStyle(
color: Colors.grey,
fontSize: 18.0
),
),
SizedBox(height: 10.0,),
Text(
"8.5/10",
style: TextStyle(
color: Colors.deepOrange,
fontSize: 28.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 20.0,),
FlatButton(
onPressed: (){},
color: Colors.deepOrange,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Details", style: TextStyle(color: Colors.white),),
),
),
],
),
),
],
),
SizedBox(height: 15.0,),
Text("Top Recommendation",style: TextStyle(fontSize: 22.0),),
Expanded(
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 8.0,top: 8.0,bottom: 8.0),
child: Container(
height: 80.0,
width: 150.0,
child: Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTwyQeaqZLovu4Hc5hUjTC2u1mK0h85w4jnZkC8kVT76-skY94v&usqp=CAU",fit: BoxFit.fill,height: 100.0,),
),
),
Padding(
padding: const EdgeInsets.only(right: 8.0,top: 8.0,bottom: 8.0),
child: Container(
height: 80.0,
width: 150.0,
child: Image.network("https://cdn.pastemagazine.com/www/system/images/photo_albums/best-book-covers-july-2019/large/bbcjuly19verynice.jpg?1384968217",fit: BoxFit.fill,height: 100.0,),
),
),
Padding(
padding: const EdgeInsets.only(right: 8.0,top: 8.0,bottom: 8.0),
child: Container(
height: 80.0,
width: 150.0,
child: Image.network("https://bookcoverdesigns.eu/wp-content/uploads/2018/02/Self-Help-003a.jpg",fit: BoxFit.fill,height: 100.0,),
),
),
],
),
)
],
),
),
);
}
}
Make a Book store app in Flutter
Reviewed by Medics
on
May 26, 2020
Rating:
Reviewed by Medics
on
May 26, 2020
Rating:
I always see UI, we need some backend with firebase or AWS or Python
ReplyDeleteI will soon share a set of full functional project for the my YT channel and I will post the code here, I'm preparing a full chat application with login and chat feature using Firebase
Delete