FLUTTER - UI on Amazon Prime Video:
Source Code:
import 'package:flutter/material.dart';
import 'package:dots_indicator/dots_indicator.dart';
void main() {
runApp(MaterialApp(
title: 'UI of Amazon Prime Video',
debugShowCheckedModeBanner: false,
home: MyApp(),
));
}
//ONLY UI Design
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
int photoindex = 0;
List<String> photos = [
'assets/images/ap1.jpg',
'assets/images/ap2.jpg',
'assets/images/ap3.jpg',
'assets/images/ap4.jpg',
'assets/images/ap5.jpg',
'assets/images/ap6.jpg',
];
List<String> photosM = [
'assets/images/apm1.jpg',
'assets/images/apm2.jpg',
'assets/images/apm3.jpg',
'assets/images/apm4.jpg',
'assets/images/apm5.jpg',
'assets/images/apm6.jpg',
];
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 4,
child: Scaffold(
drawer: Drawer(),
appBar: AppBar(
backgroundColor: Colors.black,
elevation: 0.0,
actions: <Widget>[
Row(
children: <Widget>[
Text(
'prime',
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold,
fontSize: 25.0),
),
Text(
' video',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25.0),
)
],
),
SizedBox(
width: 180.0,
),
IconButton(
onPressed: () {
debugPrint('Search button tapped');
},
icon: Icon(
Icons.search,
size: 35,
))
],
bottom: TabBar(
tabs: <Widget>[
Tab(
text: 'Home',
),
Tab(
text: 'TV Shows',
),
Tab(
text: 'Movies',
),
Tab(
text: 'Kids',
),
],
),
),
backgroundColor: Colors.black,
body: ListView(
shrinkWrap: true,
children: <Widget>[
Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
height: 220.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
photos[photoindex],
),
fit: BoxFit.fill
//already i have downloaded some pic
)),
),
Positioned(
top: 180.0,
left: 150.0,
child: Row(
children: <Widget>[
DotsIndicator(
numberOfDot: photos.length,
dotActiveColor: Colors.white,
)
],
),
),
],
),
SizedBox(height: 10.0),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 10),
child: Container(
height: 230.0,
color: Colors.grey[900],
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(
10.0, 10.0, 0.0, 10.0),
child: Text(
'Watch Next TV and Movies',
style: TextStyle(
color: Colors.white,
fontSize: 20.0),
),
)
],
),
Column(
children: <Widget>[
Container(
height: 180.0,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: photosM.length,
itemBuilder:
(BuildContext context, int index) {
return Container(
width: 140.0,
child: Card(
child: Image.asset(photosM[index],
fit: BoxFit.fill),
),
);
},
),
)
],
)
],
)),
)
],
),
SizedBox(height: 10.0),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 10),
child: Container(
height: 230.0,
color: Colors.grey[900],
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(
10.0, 10.0, 0.0, 10.0),
child: Text(
'Top Movies',
style: TextStyle(
color: Colors.white,
fontSize: 20.0),
),
),
InkWell(
child: Text(
'See more',
style: TextStyle(
color: Colors.blue,
fontSize: 18.0),
),
onTap: () {
debugPrint('See More...');
},
)
],
),
Column(
children: <Widget>[
Container(
height: 180.0,
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: photosM.length,
itemBuilder:
(BuildContext context, int index) {
return Container(
width: 140.0,
child: Card(
child: Image.asset(photosM[index],
fit: BoxFit.fill),
),
);
},
),
)
],
)
],
)),
)
],
),
],
)
],
),
));
}
}
No comments:
Post a Comment