Skip to content
This repository was archived by the owner on Nov 22, 2023. It is now read-only.

Lab 4 #6

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Lab 4 #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fe76363
add GestureDetector to CircleAvatar
JohnSteck9 Nov 9, 2021
69e5915
add random avatar changes | global state
JohnSteck9 Nov 9, 2021
8016df4
add local state to video card
JohnSteck9 Nov 9, 2021
b47cb2b
Merge pull request #5 from leobit-flutter-2021/lab-4-felishtan
JohnSteck9 Nov 9, 2021
8853342
Added global state(change the color oh theme) and added local state l…
maksymbudzin Nov 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# hw_3
# hw_4

A new Flutter project.

Expand Down
Binary file modified android/.gradle/6.7/executionHistory/executionHistory.bin
View file
Open in desktop
Binary file not shown.
Binary file modified android/.gradle/6.7/executionHistory/executionHistory.lock
View file
Open in desktop
Binary file not shown.
Binary file modified android/.gradle/6.7/fileHashes/fileHashes.bin
View file
Open in desktop
Binary file not shown.
Binary file modified android/.gradle/6.7/fileHashes/fileHashes.lock
View file
Open in desktop
Binary file not shown.
Binary file modified android/.gradle/buildOutputCleanup/buildOutputCleanup.lock
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion lib/data/data.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ class VideoComments {
Channel currentUser = Channel(
'John Steck',
logoImagePath: 'assets/images/profile_screen/avatars/profile.png',
imageUrl: 'https://avatars.githubusercontent.com/u/63707307?v=4',
imageUrl: 'https://avatars.githubusercontent.com/u/63707307',
subscribersCounter: 100000,
);

Expand Down
14 changes: 14 additions & 0 deletions lib/globalStateManagement/themeManagement.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'themes.dart';

class ThemeManagement with ChangeNotifier {
ThemeData _currentTheme = mainTheme;

ThemeData get currentTheme => _currentTheme;

void toggleTheme() {
_currentTheme = _currentTheme == mainTheme ? secondTheme : mainTheme;
Copy link

@igor-leshkevych igor-leshkevych Nov 10, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can use something like this instead:

final themes = [primaryTheme, secondaryTheme];
int currentTheme = 0;

Theme get currentTheme => themes[currentTheme];

void toggle() {
  currentTheme = (currentTheme + 1) % themes.length;
}

this will allow you to cycle through themes, and adding new themes to themes array without changing a code inside your toggle

notifyListeners();
}
}
15 changes: 15 additions & 0 deletions lib/globalStateManagement/themes.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import 'package:flutter/material.dart';

ThemeData mainTheme = ThemeData(
brightness: Brightness.dark,
bottomNavigationBarTheme:
const BottomNavigationBarThemeData(selectedItemColor: Colors.white),
);

ThemeData secondTheme = ThemeData(
Copy link

@igor-leshkevych igor-leshkevych Nov 10, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's better to use secondary


brightness: Brightness.light,
bottomNavigationBarTheme:
const BottomNavigationBarThemeData(selectedItemColor: Colors.black),

);
19 changes: 19 additions & 0 deletions lib/globalStateManagement/userImageManagement.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hw_3/data/data.dart';

class ImageManagement with ChangeNotifier {
String _randomImage = currentUser.imageUrl;
String get randomImage => _randomImage;

void generateRandomImage() {
var random = new Random();
int min = 1;
Copy link

@igor-leshkevych igor-leshkevych Nov 10, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

too many variables, just use

var randomIndex = 1 + Random().nextInt(63707306);

int max = 63707307;
int result = min + random.nextInt(max - min);
_randomImage = 'https://avatars.githubusercontent.com/u/$result';
notifyListeners();
}
}
24 changes: 14 additions & 10 deletions lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,30 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:hw_3/globalStateManagement/themeManagement.dart';

import 'package:hw_3/screens/nav_screen.dart';
import 'package:provider/provider.dart';

import 'globalStateManagement/userImageManagement.dart';

void main() {
runApp(MyApp());
runApp(MultiProvider(providers: [
ChangeNotifierProvider(create: (_) => ImageManagement()),
ChangeNotifierProvider(create: (_) => ThemeManagement()),
], child: MyApp()));
}

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
// var incrementValue = context.watch<Increment>().count;
Copy link

@igor-leshkevych igor-leshkevych Nov 10, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dont leave commented blocks of code


return MaterialApp(
title: 'Flutter YouTube UI',
debugShowCheckedModeBanner: false,
theme: ThemeData(
brightness: Brightness.dark,
bottomNavigationBarTheme:
const BottomNavigationBarThemeData(selectedItemColor: Colors.white),
),
home: NavScreen(),
);
title: 'Flutter YouTube UI',
debugShowCheckedModeBanner: false,
theme: context.watch<ThemeManagement>().currentTheme,
home: NavScreen());
}
}
122 changes: 103 additions & 19 deletions lib/screens/library_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,28 @@ import 'package:hw_3/data/colors.dart';

import 'package:hw_3/widgets/app_bar.dart';

class LibraryTab extends StatelessWidget {
class LibraryTab extends StatefulWidget {
LibraryState createState() => LibraryState();
}

class LibraryState extends State<LibraryTab> {
late String temp;
Copy link

@igor-leshkevych igor-leshkevych Nov 10, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just use
String newPlaylist = '';

List playList = [];
int likeCounter = 0;

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

playList.addAll(['maks_playlist', 'vika_playlist', 'mykhailo_playlist']);
Copy link

@igor-leshkevych igor-leshkevych Nov 10, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just use

List playList = ['maks_playlist', 'vika_playlist', 'mykhailo_playlist'];

when declaring the field

}

void _incrementCounter() {
setState(() {
likeCounter++;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
Expand All @@ -19,61 +40,124 @@ class LibraryTab extends StatelessWidget {
leading: Icon(Icons.history, color: suvaGrey),
title: Text(
'History',
style: TextStyle(color: Colors.white),
),
),
ListTile(
leading: Icon(Icons.file_download, color: suvaGrey),
title: Text('Downloads', style: TextStyle(color: Colors.white)),
title: Text(
'Downloads',
),
subtitle: Text('2 recommendations',
style: TextStyle(color: suvaGrey, fontSize: 12.0)),
),
ListTile(
leading: Icon(Icons.video_library, color: suvaGrey),
title:
Text('Your videos', style: TextStyle(color: Colors.white)),
title: Text(
'Your videos',
),
),
ListTile(
leading: Icon(Icons.attach_money, color: suvaGrey),
title: Text('Purchases', style: TextStyle(color: Colors.white)),
title: Text('Purchases'),
),
ListTile(
leading: Icon(Icons.watch_later, color: suvaGrey),
title:
Text('Watch later', style: TextStyle(color: Colors.white)),
title: Text(
'Watch later',
),
subtitle: Text('Videos you save for later',
style: TextStyle(color: suvaGrey, fontSize: 12.0)),
),
Divider(color: Colors.white),
Divider(color: suvaGrey),
Padding(
padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
padding:
EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Playlists',
style: TextStyle(color: Colors.white, fontSize: 16.0)),
Text('Playlists', style: TextStyle(fontSize: 16.0)),
Row(
children: <Widget>[
Text('Recently added',
style:
TextStyle(color: Colors.white, fontSize: 16.0)),
Icon(Icons.arrow_drop_down, color: Colors.white)
style: TextStyle(fontSize: 16.0)),
Icon(Icons.arrow_drop_down, color: suvaGrey)
],
)
],
),
),
ListTile(
onTap: () {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Add playlist'),
content: TextField(
onChanged: (String value) {
temp = value;
},
),
actions: [
ElevatedButton(
onPressed: () {
setState(() {
playList.add(temp);
});
Navigator.of(context).pop();
},
child: Text('Add'))
],
);
});
},
leading: Icon(Icons.add, color: linkBlue),
title: Text('New Playlist', style: TextStyle(color: linkBlue)),
title:
Text('New Playlist', style: TextStyle(color: linkBlue)),
),
ListTile(
onTap: _incrementCounter,
leading: Icon(Icons.thumb_up, color: suvaGrey),
title:
Text('Liked videos', style: TextStyle(color: Colors.white)),
subtitle: Text('4 Videos',
title: Text(
'Liked videos',
),
subtitle: Text('$likeCounter Videos',
style: TextStyle(color: suvaGrey, fontSize: 12.0)),
),
ListView.builder(
shrinkWrap: true,
itemCount: playList.length,
itemBuilder: (BuildContext context, int index) {
return Dismissible(
key: Key(playList[index]),
child: Card(
child: ListTile(
subtitle: Text('$likeCounter Videos',
style:
TextStyle(color: suvaGrey, fontSize: 12.0)),
leading:
Icon(Icons.featured_play_list, color: suvaGrey),
title: Text(playList[index]),
trailing: IconButton(
icon: Icon(
Icons.delete_sweep,
color: Colors.red,
),
onPressed: () {
setState(() {
playList.removeAt(index);
});
},
),
),
),
onDismissed: (direction) {
setState(() {
playList.removeAt(index);
});
},
);
}),
],
),
),
Expand Down
20 changes: 16 additions & 4 deletions lib/screens/user_profile_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import 'dart:math';

import 'package:flutter/material.dart';

import 'package:hw_3/data/colors.dart';
import 'package:hw_3/data/data.dart';
import 'package:hw_3/globalStateManagement/userImageManagement.dart';
import 'package:provider/src/provider.dart';

class UserProfilePage extends StatelessWidget {
final Channel currentUser;
Expand Down Expand Up @@ -30,10 +34,18 @@ class UserProfilePage extends StatelessWidget {
padding: EdgeInsets.all(20.0),
child: Row(
children: <Widget>[
CircleAvatar(
backgroundImage:
AssetImage(currentUser.logoImagePath),
radius: 30),
GestureDetector(
onTap: () {
context.read<ImageManagement>().generateRandomImage();
},
child: Builder(
builder: (context) {
return CircleAvatar(
backgroundImage: NetworkImage(context.watch<ImageManagement>().randomImage),
radius: 30);
}
),
),
SizedBox(width: 10.0),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
Expand Down
37 changes: 25 additions & 12 deletions lib/widgets/app_bar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import 'package:flutter/material.dart';

import 'package:hw_3/data/data.dart';
import 'package:hw_3/globalStateManagement/themeManagement.dart';
import 'package:hw_3/globalStateManagement/userImageManagement.dart';

import 'package:hw_3/screens/user_profile_screen.dart';
import 'package:provider/src/provider.dart';

class CustomAppBar extends StatelessWidget
implements PreferredSizeWidget {
Expand All @@ -20,6 +23,12 @@ class CustomAppBar extends StatelessWidget
child: Image.asset('assets/images/home_screen/logos/logo_dark.png'),
),
actions: [
IconButton(
icon: const Icon(Icons.phonelink_setup),
onPressed: () {
context.read<ThemeManagement>().toggleTheme();
},
),
IconButton(
icon: const Icon(Icons.cast),
onPressed: () {},
Expand All @@ -32,18 +41,22 @@ class CustomAppBar extends StatelessWidget
icon: const Icon(Icons.search),
onPressed: () {},
),
IconButton(
icon: CircleAvatar(
foregroundImage: NetworkImage(currentUser.imageUrl),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => UserProfilePage(currentUser: currentUser),
),
);
},
Builder(
builder: (context) {
return IconButton(
icon: CircleAvatar(
foregroundImage: NetworkImage(context.watch<ImageManagement>().randomImage),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => UserProfilePage(currentUser: currentUser),
),
);
},
);
}
),
],
);
Expand Down
Loading