modified: lib/home/audio_player.dart

modified:   lib/home/homescroll.dart
	modified:   lib/podcasts/podcastlist.dart
	modified:   lib/util/episodegrid.dart
Fix UI error on little screen
This commit is contained in:
stonegate 2020-02-15 15:53:26 +08:00
parent 0cc9a7f690
commit 3200eeacd7
4 changed files with 139 additions and 121 deletions

View File

@ -417,7 +417,7 @@ class _PlayerWidgetState extends State<PlayerWidget> {
? Marquee(
text: _title,
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20),
fontWeight: FontWeight.bold, fontSize: 18),
scrollAxis: Axis.horizontal,
crossAxisAlignment: CrossAxisAlignment.start,
blankSpace: 30.0,
@ -585,129 +585,138 @@ class _PlayerWidgetState extends State<PlayerWidget> {
))
]),
);
Widget _miniPanel() => Container(
Widget _miniPanel(double width) => Container(
height: 60,
color: Colors.grey[100],
child: Column(mainAxisAlignment: MainAxisAlignment.start, children: <
Widget>[
SizedBox(
height: 2,
child: LinearProgressIndicator(
value: _seekSliderValue,
backgroundColor: Colors.grey[100],
valueColor: AlwaysStoppedAnimation<Color>(_c),
)),
Expanded(
child: Container(
padding: EdgeInsets.only(left: 30.0, right: 10.0),
alignment: Alignment.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
width: 220,
child: (_title.length > 30)
? Marquee(
text: _title,
style: TextStyle(fontWeight: FontWeight.bold),
scrollAxis: Axis.vertical,
crossAxisAlignment: CrossAxisAlignment.start,
blankSpace: 30.0,
velocity: 50.0,
pauseAfterRound: Duration(seconds: 1),
startPadding: 30.0,
accelerationDuration: Duration(seconds: 1),
accelerationCurve: Curves.linear,
decelerationDuration: Duration(milliseconds: 500),
decelerationCurve: Curves.easeOut,
)
: Text(
_title,
style: TextStyle(fontWeight: FontWeight.bold),
maxLines: 2,
),
),
Spacer(),
Container(
padding: EdgeInsets.symmetric(horizontal: 20.0),
child: _remoteAudioLoading
? Text(
'Buffring...',
style: TextStyle(color: Colors.blue),
)
: Row(
children: <Widget>[
Text(
_stringForSeconds(
_backgroundAudioDurationSeconds -
_backgroundAudioPositionSeconds) ??
'',
style: TextStyle(color: _c),
),
Text(
' Left',
style: TextStyle(color: _c),
),
],
),
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
_backgroundAudioPlaying
? Material(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 2,
child: LinearProgressIndicator(
value: _seekSliderValue,
backgroundColor: Colors.grey[100],
valueColor: AlwaysStoppedAnimation<Color>(_c),
)),
Expanded(
child: Container(
padding: EdgeInsets.only(left: 15, right: 10),
alignment: Alignment.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 4,
child: Container(
padding: EdgeInsets.symmetric(vertical: 5),
alignment: Alignment.centerLeft,
child: (_title.length > 55)
? Marquee(
text: _title,
style: TextStyle(fontWeight: FontWeight.bold),
scrollAxis: Axis.vertical,
crossAxisAlignment: CrossAxisAlignment.start,
blankSpace: 30.0,
velocity: 50.0,
pauseAfterRound: Duration(seconds: 1),
startPadding: 30.0,
accelerationDuration: Duration(seconds: 1),
accelerationCurve: Curves.linear,
decelerationDuration:
Duration(milliseconds: 500),
decelerationCurve: Curves.easeOut,
)
: Text(
_title,
style: TextStyle(fontWeight: FontWeight.bold),
maxLines: 2,
),
),
),
Expanded(
flex: 2,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10),
alignment: Alignment.center,
child: _remoteAudioLoading
? Text(
'Buffring...',
style: TextStyle(color: Colors.blue),
)
: Row(
children: <Widget>[
Text(
_stringForSeconds(
_backgroundAudioDurationSeconds -
_backgroundAudioPositionSeconds) ??
'',
style: TextStyle(color: _c),
),
Text(
' Left',
style: TextStyle(color: _c),
),
],
),
),
),
Expanded(
flex: 2,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_backgroundAudioPlaying
? Material(
color: Colors.transparent,
child: IconButton(
onPressed: _backgroundAudioPlaying
? () {
_pauseBackgroundAudio();
}
: null,
iconSize: 25.0,
icon: Icon(Icons.pause_circle_filled),
color: Colors.black),
)
: Material(
color: Colors.transparent,
child: IconButton(
onPressed: _backgroundAudioPlaying
? null
: () {
_resumeBackgroundAudio();
},
iconSize: 25.0,
icon: Icon(Icons.play_circle_filled),
color: Colors.black),
),
Material(
color: Colors.transparent,
child: IconButton(
padding:
EdgeInsets.symmetric(horizontal: 10.0),
onPressed: _backgroundAudioPlaying
? () {
_pauseBackgroundAudio();
}
? () => _forwardBackgroundAudio(30)
: null,
iconSize: 28.0,
icon: Icon(Icons.pause_circle_filled),
color: Colors.black),
)
: Material(
color: Colors.transparent,
child: IconButton(
padding:
EdgeInsets.symmetric(horizontal: 10.0),
onPressed: _backgroundAudioPlaying
? null
: () {
_resumeBackgroundAudio();
},
iconSize: 25.0,
icon: Icon(Icons.play_circle_filled),
icon: Icon(Icons.forward_30),
color: Colors.black),
),
Material(
color: Colors.transparent,
child: IconButton(
padding: EdgeInsets.symmetric(horizontal: 10.0),
onPressed: _backgroundAudioPlaying
? () => _forwardBackgroundAudio(30)
: null,
iconSize: 25.0,
icon: Icon(Icons.forward_30),
color: Colors.black),
],
),
),
],
),
],
),
),
),
),
]),
]),
);
@override
Widget build(BuildContext context) {
double _width = MediaQuery.of(context).size.width;
return !_isLoading
? Center()
: AudioPanel(miniPanel: _miniPanel(), expandedPanel: _expandedPanel());
: AudioPanel(
miniPanel: _miniPanel(_width), expandedPanel: _expandedPanel());
}
}

View File

@ -41,6 +41,7 @@ class _ScrollPodcastsState extends State<ScrollPodcasts> {
@override
Widget build(BuildContext context) {
double _width = MediaQuery.of(context).size.width;
return FutureBuilder<List<PodcastLocal>>(
future: getPodcastLocal(),
builder: (context, snapshot) {
@ -76,7 +77,7 @@ class _ScrollPodcastsState extends State<ScrollPodcasts> {
),
),
Container(
height: 195,
height: (_width-20)/3+40,
margin: EdgeInsets.only(left: 10, right: 10),
decoration: BoxDecoration(
color: Colors.white,
@ -203,6 +204,7 @@ class ShowEpisode extends StatelessWidget {
: super(key: key);
@override
Widget build(BuildContext context) {
double _width = MediaQuery.of(context).size.width;
return CustomScrollView(
physics: const AlwaysScrollableScrollPhysics(),
primary: false,
@ -266,10 +268,10 @@ class ShowEpisode extends StatelessWidget {
child: Container(
child: ClipRRect(
borderRadius:
BorderRadius.all(Radius.circular(15.0)),
BorderRadius.all(Radius.circular(_width/36)),
child: Container(
height: 30.0,
width: 30.0,
height: _width/18,
width: _width/18,
child: Image.file(File(
"$path/${podcastLocal.title}.png")),
),
@ -288,9 +290,10 @@ class ShowEpisode extends StatelessWidget {
child: Text(
podcast[index].title,
style: TextStyle(
fontSize: 15.0,
fontSize: _width/32,
),
maxLines: 4,
overflow: TextOverflow.fade,
),
),
),
@ -301,6 +304,7 @@ class ShowEpisode extends StatelessWidget {
child: Text(
podcast[index].pubDate.substring(4, 16),
style: TextStyle(
fontSize: _width/35,
color: _c,
fontStyle: FontStyle.italic,
),

View File

@ -97,6 +97,7 @@ class _PodcastListState extends State<PodcastList> {
@override
Widget build(BuildContext context) {
double _width = MediaQuery.of(context).size.width;
return Container(
color: Colors.grey[100],
child: FutureBuilder<List<PodcastLocal>>(
@ -142,10 +143,10 @@ class _PodcastListState extends State<PodcastList> {
),
ClipRRect(
borderRadius:
BorderRadius.all(Radius.circular(60.0)),
BorderRadius.all(Radius.circular(_width/8)),
child: Container(
height: 120.0,
width: 120.0,
height: _width/4,
width: _width/4,
child: Image.file(File(
"${dir.path}/${snapshot.data[index].title}.png")),
),

View File

@ -25,14 +25,16 @@ class EpisodeGrid extends StatelessWidget {
this.showNumber,
this.heroTag})
: super(key: key);
double _width;
Future<String> _getPath() async {
print(_width);
var dir = await getApplicationDocumentsDirectory();
return dir.path;
}
@override
Widget build(BuildContext context) {
_width = MediaQuery.of(context).size.width;
return FutureBuilder(
future: _getPath(),
builder: (context, snapshot) {
@ -102,10 +104,10 @@ class EpisodeGrid extends StatelessWidget {
child: Container(
child: ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(15.0)),
Radius.circular(_width/32)),
child: Container(
height: 30.0,
width: 30.0,
height: _width/16,
width: _width/16,
child: Image.file(File(
"${snapshot.data}/${podcast[index].feedTitle}.png")),
),
@ -121,7 +123,7 @@ class EpisodeGrid extends StatelessWidget {
.toString(),
style: GoogleFonts.teko(
textStyle: TextStyle(
fontSize: 20.0,
fontSize: _width/24,
color: _c,
),
),
@ -139,9 +141,10 @@ class EpisodeGrid extends StatelessWidget {
child: Text(
podcast[index].title,
style: TextStyle(
fontSize: 15.0,
fontSize: _width/32,
),
maxLines: 4,
overflow: TextOverflow.fade,
),
),
),
@ -156,6 +159,7 @@ class EpisodeGrid extends StatelessWidget {
.pubDate
.substring(4, 16),
style: TextStyle(
fontSize: _width/35,
color: _c,
fontStyle: FontStyle.italic),
),