Skip to content

M
movie_app_flutter
Commit 4dbe4b83 authored by valdi's avatar valdi
Browse files
Options

detail, rating, nav bottom

parent aece6873
Show whitespace changes
Inline Side-by-side
Showing with 450 additions and 242 deletions
lib/config.dart 0 → 100644
View file @ 4dbe4b83
import 'package:flutter/material.dart';
const Color backgroundColor = Color.fromRGBO(7, 13, 45, 100);
const Color textColor = Color(0xFFD2D3D8);
const String apiKey = "0a9b845116028881ddaaec631f987469";
lib/main.dart
View file @ 4dbe4b83
...@@ -3,193 +3,29 @@ import 'dart:async'; ...@@ -3,193 +3,29 @@ import 'dart:async';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:http/http.dart' as http; import 'package:http/http.dart' as http;
import 'package:movie_app/main_page.dart';
import 'package:movie_app/movie_detail.dart';
void main() { void main() {
runApp(const MyApp()); runApp(MyApp());
} }
class MyApp extends StatefulWidget { class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override @override
_MyAppState createState() => _MyAppState(); _MyAppState createState() => _MyAppState();
} }
class _MyAppState extends State<MyApp> { class _MyAppState extends State<MyApp> {
var _Popular = [];
var _nowPlaying = [];
void GetPopular() async {
var response = await http.get(Uri.parse(
"https://api.themoviedb.org/3/movie/popular?api_key=0a9b845116028881ddaaec631f987469&language=en-US&page=1"));
var jsonObject = jsonDecode(response.body);
List<dynamic> listPopular = (jsonObject as Map<String, dynamic>)['results'];
setState(() {
_Popular = listPopular;
});
}
void GetNowPlaying() async {
var response = await http.get(Uri.parse(
"https://api.themoviedb.org/3/movie/now_playing?api_key=0a9b845116028881ddaaec631f987469&language=en-US&page=1"));
var jsonObject = jsonDecode(response.body);
List<dynamic> listNowPlaying =
(jsonObject as Map<String, dynamic>)['results'];
setState(() {
_nowPlaying = listNowPlaying;
});
}
@override
void initState() {
// TODO: implement initState
super.initState();
GetPopular();
GetNowPlaying();
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return MaterialApp(
home: Scaffold( initialRoute: '/',
backgroundColor: Color.fromRGBO(7, 13, 45, 100), routes: {
body: Container( '/': (context) => MainPage(),
margin: EdgeInsets.fromLTRB(15, 40, 15, 30), '/detail': (context) =>
child: Column( MovieDetail(ModalRoute.of(context)!.settings.arguments as String),
children: <Widget>[
Container(
child: TextFormField(
textAlign: TextAlign.left,
style: TextStyle(fontSize: 12.0, color: Colors.white30),
decoration: InputDecoration(
contentPadding: new EdgeInsets.symmetric(vertical: 0.0),
prefixIcon: Padding(
padding: EdgeInsets.all(0.0),
child: Icon(
Icons.search,
color: Colors.grey,
),
),
hintText: "Search movie",
hintStyle: TextStyle(
fontSize: 12.0, height: 3, color: Colors.white30),
),
),
),
Container(
child: Container(
margin: EdgeInsets.fromLTRB(15, 30, 15, 0),
child: Row(
children: <Widget>[
Text(
"Popular",
style: TextStyle(color: Colors.white),
),
],
),
),
),
Flexible(
flex: 1,
child: new ListView(
children: <Widget>[
new Container(
height: 265.0,
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
for (int i = 0; i < _Popular.length; i++)
CardPopular(
"https://image.tmdb.org/t/p/w500" +
_Popular[i]['poster_path'],
_Popular[i]['title'],
_Popular[i]['vote_average'].toString()),
],
),
),
],
),
),
Container(
child: Container(
margin: EdgeInsets.fromLTRB(15, 30, 15, 0),
child: Row(
children: [
Text(
"Now Playing",
style: TextStyle(color: Colors.white),
),
],
),
),
),
Flexible(
flex: 1,
child: new ListView(
children: <Widget>[
new Container(
height: 265.0,
child: new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
for (int i = 0; i < _nowPlaying.length; i++)
CardPopular(
"https://image.tmdb.org/t/p/w500" +
_nowPlaying[i]['poster_path'],
_nowPlaying[i]['title'],
_nowPlaying[i]['vote_average'].toString()),
],
),
),
],
),
),
],
),
),
),
debugShowCheckedModeBanner: false,
);
}
Widget CardPopular(String image, String title, String rating) {
return GestureDetector(
onTap: () {
print("Test");
}, },
child: Container( debugShowCheckedModeBanner: false,
margin: EdgeInsets.all(15.0),
child: new ClipRRect(
// borderRadius: new BorderRadius.circular(10.0),
child: Column(
children: [
new Image(
image: new NetworkImage(image),
height: 200.0,
width: 120.0,
fit: BoxFit.cover,
),
Container(
width: 120,
child: Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white, overflow: TextOverflow.ellipsis),
),
),
Text(
rating,
style: TextStyle(color: Colors.white),
),
],
),
),
),
); );
} }
} }
lib/main_page.dart
View file @ 4dbe4b83
import 'dart:convert';
import 'dart:async';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:movie_app/config.dart';
import 'package:movie_app/main.dart'; import 'package:movie_app/main.dart';
class MainPage extends StatefulWidget { class MainPage extends StatefulWidget {
...@@ -49,27 +55,53 @@ class _MainPageState extends State<MainPage> { ...@@ -49,27 +55,53 @@ class _MainPageState extends State<MainPage> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return MaterialApp(
home: Scaffold( home: Scaffold(
backgroundColor: Color.fromRGBO(7, 13, 45, 100), backgroundColor: backgroundColor,
body: Container( body: Container(
margin: EdgeInsets.fromLTRB(15, 40, 15, 30), margin: EdgeInsets.fromLTRB(15, 40, 15, 30),
child: Column( child: ListView(
children: <Widget>[ children: <Widget>[
Container( Padding(
child: TextFormField( padding: const EdgeInsets.all(10.0),
textAlign: TextAlign.left, child: Row(
style: TextStyle(fontSize: 12.0, color: Colors.white30), mainAxisAlignment: MainAxisAlignment.spaceBetween,
decoration: InputDecoration( children: [
contentPadding: new EdgeInsets.symmetric(vertical: 0.0), Text(
prefixIcon: Padding( "Hi, Bagus Rivaldi",
padding: EdgeInsets.all(0.0), style: TextStyle(
color: textColor,
fontSize: 20,
fontWeight: FontWeight.w800),
),
ClipRRect(
child: Icon( child: Icon(
Icons.search, Icons.person,
color: Colors.grey, color: textColor,
size: 30,
),
)
],
), ),
), ),
hintText: "Search movie", Align(
hintStyle: TextStyle( alignment: Alignment.center,
fontSize: 12.0, height: 3, color: Colors.white30), child: Container(
decoration: BoxDecoration(
color: Colors.transparent,
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(20)),
margin: EdgeInsets.fromLTRB(10, 30, 10, 30),
padding: EdgeInsets.fromLTRB(10, 5, 5, 5),
// ignore: prefer_const_constructors
child: TextField(
style: TextStyle(color: Color(0xFFD2D3D8)),
decoration: InputDecoration(
border: InputBorder.none,
icon: Icon(
Icons.search,
color: Colors.white30,
),
labelText: "Search Movie",
labelStyle: TextStyle(color: Colors.white30)),
), ),
), ),
), ),
...@@ -82,77 +114,106 @@ class _MainPageState extends State<MainPage> { ...@@ -82,77 +114,106 @@ class _MainPageState extends State<MainPage> {
"Popular", "Popular",
style: TextStyle(color: Colors.white), style: TextStyle(color: Colors.white),
), ),
Spacer(),
Text(
"See more",
style: TextStyle(
fontSize: 10,
color: Colors.white,
fontWeight: FontWeight.w500),
),
], ],
), ),
), ),
), ),
Flexible( Container(
flex: 1, margin: EdgeInsets.fromLTRB(15, 15, 15, 0),
child: new ListView( height: 300,
children: <Widget>[ child: ListView(
new Container(
height: 265.0,
child: new ListView(
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
children: <Widget>[ children: [
for (int i = 0; i < _Popular.length; i++) for (int i = 0; i < _Popular.length; i++)
CardPopular( CardPopular(
"https://image.tmdb.org/t/p/w500" + "https://image.tmdb.org/t/p/w500" +
_Popular[i]['poster_path'], _Popular[i]['poster_path'],
_Popular[i]['title'], _Popular[i]['title'],
_Popular[i]['vote_average'].toString()), _Popular[i]['vote_average'].toString(),
], _Popular[i]['id'].toString()),
),
),
], ],
), ),
), ),
Container( Container(
child: Container( child: Container(
margin: EdgeInsets.fromLTRB(15, 30, 15, 0), margin: EdgeInsets.fromLTRB(15, 0, 15, 0),
child: Row( child: Row(
children: [ children: [
Text( Text(
"Now Playing", "Now Playing",
style: TextStyle(color: Colors.white), style: TextStyle(color: Colors.white),
), ),
Spacer(),
Text(
"See more",
style: TextStyle(
fontSize: 10,
color: Colors.white,
fontWeight: FontWeight.w500),
),
], ],
), ),
), ),
), ),
Flexible( Container(
flex: 1, margin: EdgeInsets.fromLTRB(15, 15, 15, 0),
child: new ListView( height: 300,
children: <Widget>[ child: ListView(
new Container(
height: 265.0,
child: new ListView(
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
children: <Widget>[ children: [
for (int i = 0; i < _nowPlaying.length; i++) for (int i = 0; i < _nowPlaying.length; i++)
CardPopular( CardPopular(
"https://image.tmdb.org/t/p/w500" + "https://image.tmdb.org/t/p/w500" +
_nowPlaying[i]['poster_path'], _nowPlaying[i]['poster_path'],
_nowPlaying[i]['title'], _nowPlaying[i]['title'],
_nowPlaying[i]['vote_average'].toString()), _nowPlaying[i]['vote_average'].toString(),
_nowPlaying[i]['id'].toString()),
], ],
), ),
), ),
], ],
), ),
), ),
], bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
backgroundColor: Colors.lightBlue,
),
BottomNavigationBarItem(
icon: Icon(Icons.explore),
label: 'Explore',
backgroundColor: Colors.lightBlue,
), ),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Account',
backgroundColor: Colors.lightBlue,
),
],
), ),
), ),
debugShowCheckedModeBanner: false, debugShowCheckedModeBanner: false,
); );
} }
Widget CardPopular(String image, String title, String rating) { Widget CardPopular(String image, String title, String rating, String id) {
return GestureDetector( return GestureDetector(
onTap: () { onTap: () {
print("Test"); Navigator.pushNamed(
context,
'/detail',
arguments: id,
);
}, },
child: Container( child: Container(
margin: EdgeInsets.all(15.0), margin: EdgeInsets.all(15.0),
......
lib/models/movie_detail_api.dart 0 → 100644
View file @ 4dbe4b83
class movieDetail {
final String title;
final String poster_path;
final String overview;
final double vote_average;
List<dynamic> genre = [];
movieDetail(this.title, this.poster_path, this.overview, this.vote_average,
this.genre);
factory movieDetail.fromJson(dynamic json) {
var nameGenre = [];
for (int i = 0; i < json['genres'].length; i++) {
print(json['genres'][i]['name']);
var genreName = '';
if (json['genres'][i]['name'] == null) {
genreName = 'Thriller';
} else {
genreName = json['genres'][i]['name'];
}
nameGenre.add(genreName);
}
return movieDetail(
json['title'] as String,
json['poster_path'] as String,
json['overview'] as String,
json['vote_average'] as double,
nameGenre as List<dynamic>);
}
}
lib/models/movie_detail_arg.dart 0 → 100644
View file @ 4dbe4b83
class ScreenArguments {
final String id;
final String image;
ScreenArguments(this.id, this.image);
}
lib/movie_detail.dart
View file @ 4dbe4b83
import 'dart:'; import 'dart:convert';
import 'dart:async';
import 'dart:ffi';
import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';
import 'package:http/http.dart' as http;
import 'package:movie_app/config.dart';
import '../models/movie_detail_api.dart';
class MovieDetail extends StatefulWidget {
String id;
MovieDetail(this.id, {Key? key}) : super(key: key);
@override
_MovieDetailState createState() => _MovieDetailState();
}
class _MovieDetailState extends State<MovieDetail> {
double rating = 0;
movieDetail? _movieDetail;
void getDetailMovie(String apiKey, String movieId) async {
var response = await http.get(Uri.parse(
"https://api.themoviedb.org/3/movie/" +
movieId +
"?api_key=" +
apiKey +
"&language=en-US"));
var json = jsonDecode(response.body);
setState(() {
_movieDetail = movieDetail.fromJson(json);
});
}
@override
void initState() {
super.initState();
getDetailMovie(apiKey, widget.id);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: backgroundColor,
body: Stack(
children: [
ListView(
children: [
Container(
margin: EdgeInsets.fromLTRB(20, 20, 20, 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: () {
Navigator.pop(
context,
);
},
child: Icon(
Icons.arrow_back_ios,
color: textColor,
),
),
Text(
"Detail Movies",
style: TextStyle(
color: textColor,
fontSize: 20,
fontWeight: FontWeight.w800),
),
Icon(
Icons.bookmark_border_outlined,
color: textColor,
),
],
),
),
Center(
child: Container(
height: 500,
width: 300,
decoration:
BoxDecoration(borderRadius: BorderRadius.circular(40)),
margin: EdgeInsets.fromLTRB(30, 30, 30, 10),
child: Material(
elevation: 10,
borderRadius: BorderRadius.circular(40),
color: Colors.transparent,
child: ClipRRect(
borderRadius: BorderRadius.circular(40),
child: _movieDetail == null
? SizedBox(
width: 10,
)
: Image(
image: NetworkImage(
"https://image.tmdb.org/t/p/w500" +
_movieDetail!.poster_path),
fit: BoxFit.cover,
height: 500,
width: 300,
),
),
),
),
),
Column(
children: [
Container(
margin: EdgeInsets.only(top: 10),
width: 300,
child: Text(
_movieDetail == null ? '' : _movieDetail!.title,
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w700,
color: textColor,
),
),
),
Container(
margin: EdgeInsets.fromLTRB(50, 30, 30, 10),
child: Row(
children: [
Text(
"Director: valdi | ",
style: TextStyle(
fontSize: 15,
color: textColor,
fontWeight: FontWeight.w400),
),
Text(
_movieDetail == null
? ''
: _movieDetail!.vote_average.toString(),
style: TextStyle(
fontSize: 15,
color: textColor,
fontWeight: FontWeight.w400,
),
),
Icon(
Icons.star_rate,
color: Colors.yellowAccent,
),
],
),
),
Container(
margin: EdgeInsets.fromLTRB(50, 0, 30, 10),
height: 30,
child: _movieDetail == null
? SizedBox(
width: 1,
)
: ListView(
scrollDirection: Axis.horizontal,
children: _movieDetail!.genre
.map(
(e) => Container(
margin: EdgeInsets.only(left: 5),
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(20)),
color: Color(0xFF05104f),
child: Text(
e,
style: TextStyle(color: textColor),
),
onPressed: () {},
),
),
)
.toList(),
),
),
Container(
margin: EdgeInsets.only(top: 30),
width: 300,
child: Text(
"Synopsis",
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w500,
color: textColor,
),
),
),
Container(
margin: EdgeInsets.fromLTRB(50, 30, 30, 10),
child: Text(
_movieDetail == null ? '' : _movieDetail!.overview,
textAlign: TextAlign.start,
style: TextStyle(
color: textColor,
fontSize: 15,
fontWeight: FontWeight.w400,
),
),
),
SizedBox(
height: 35,
)
],
),
],
),
Align(
alignment: Alignment.bottomCenter,
child: RaisedButton(
child: Text('Rate this movie'),
color: Colors.lightBlue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25)),
onPressed: () {
showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return Container(
height: 200,
color: Color(0xFF05104f),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
"Rate this movie ",
style: TextStyle(color: textColor),
),
SizedBox(
height: 10,
),
RatingBar.builder(
minRating: 1,
itemSize: 46,
itemPadding:
EdgeInsets.symmetric(horizontal: 5),
itemBuilder: (context, _) =>
Icon(Icons.star, color: Colors.yellow),
updateOnDrag: true,
onRatingUpdate: (rating) => setState(() {
this.rating = rating;
}),
),
RaisedButton(
child: Text("Submit"),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25)),
color: Colors.lightBlue,
onPressed: () {
print("You rate this movie : $rating");
},
),
],
),
),
);
});
},
),
)
],
),
);
}
}
pubspec.lock
View file @ 4dbe4b83
...@@ -69,6 +69,13 @@ packages: ...@@ -69,6 +69,13 @@ packages:
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "1.0.4" version: "1.0.4"
flutter_rating_bar:
dependency: "direct main"
description:
name: flutter_rating_bar
url: "https://pub.dartlang.org"
source: hosted
version: "4.0.0"
flutter_test: flutter_test:
dependency: "direct dev" dependency: "direct dev"
description: flutter description: flutter
...@@ -186,3 +193,4 @@ packages: ...@@ -186,3 +193,4 @@ packages:
version: "2.1.1" version: "2.1.1"
sdks: sdks:
dart: ">=2.16.1 <3.0.0" dart: ">=2.16.1 <3.0.0"
flutter: ">=1.12.13+hotfix.5"
pubspec.yaml
View file @ 4dbe4b83
...@@ -27,19 +27,13 @@ environment: ...@@ -27,19 +27,13 @@ environment:
# the latest version available on pub.dev. To see which dependencies have newer # the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`. # versions available, run `flutter pub outdated`.
dependencies: dependencies:
cupertino_icons: ^1.0.2
flutter: flutter:
sdk: flutter sdk: flutter
flutter_rating_bar: ^4.0.0
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
http: ^0.13.4 http: ^0.13.4
dev_dependencies: dev_dependencies:
flutter_test:
sdk: flutter
# The "flutter_lints" package below contains a set of recommended lints to # The "flutter_lints" package below contains a set of recommended lints to
# encourage good coding practices. The lint set provided by the package is # encourage good coding practices. The lint set provided by the package is
...@@ -47,10 +41,11 @@ dev_dependencies: ...@@ -47,10 +41,11 @@ dev_dependencies:
# package. See that file for information about deactivating specific lint # package. See that file for information about deactivating specific lint
# rules and activating additional ones. # rules and activating additional ones.
flutter_lints: ^1.0.0 flutter_lints: ^1.0.0
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the # For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec # following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter. # The following section is specific to Flutter.
flutter: flutter:
...@@ -58,18 +53,14 @@ flutter: ...@@ -58,18 +53,14 @@ flutter:
# included with your application, so that you can use the icons in # included with your application, so that you can use the icons in
# the material Icons class. # the material Icons class.
uses-material-design: true uses-material-design: true
# To add assets to your application, add an assets section, like this: # To add assets to your application, add an assets section, like this:
# assets: # assets:
# - images/a_dot_burr.jpeg # - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg # - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see # An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware. # https://flutter.dev/assets-and-images/#resolution-aware.
# For details regarding adding assets from package dependencies, see # For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages # https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here, # To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a # in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a # "family" key with the font family name, and a "fonts" key with a
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment