#flutter #dart
Вопрос:
На моей странице я использую столбец, в котором есть контейнер для просмотра видео и просмотра списка видео, я хочу , чтобы при нажатии на элемент списка я хотел изменить контейнер видео на выбранное видео. Я попробовал использовать setState, но не изменил представление. Я использовал YoutubePlayerController для просмотра видео, и в своем состоянии настройки я меняю видео, но не работаю. Как я могу это сделать? Вот мой код.Спасибо за любой пример или предложение.
import 'package:flutter/material.dart'; import 'package:youtube_player_flutter/youtube_player_flutter.dart'; import 'videolist.dart'; import './models/models.dart'; import 'package:csv/csv.dart' as csv; import 'package:http/http.dart' as http; class DisplayVideo extends StatefulWidget { String id; @override DisplayVideo(this.id); _DisplayVideoState createState() =gt; _DisplayVideoState(); } class _DisplayVideoState extends Statelt;DisplayVideogt; { Futurelt;Listlt;YoutubeDetailgt;gt; _loadCSV() async { Maplt;String, Stringgt; allData = { 'login': 'JornaldRem', 'password': 'Aungkokolin7', }; YoutubePlayerController _controller; final Uri url = Uri.parse( 'https://raw.githubusercontent.com/JornaldRem/bedtime_story/main/videoId.csv'); final response = await http.get(url); csv.CsvToListConverter converter = new csv.CsvToListConverter(eol: 'rn', fieldDelimiter: ','); Listlt;Listgt; listCreated = converter.convert(response.body); // the csv file is converted to a 2-Dimensional list Listlt;YoutubeDetailgt; youtubeDetailList = []; print("Length______"); print(listCreated.length); for (int i = 0; i lt; listCreated.length; i ) { YoutubeDetail temp = YoutubeDetail( listCreated[i][0], listCreated[i][1], ); youtubeDetailList.add(temp); } return youtubeDetailList; } void _changevideoId(String url){ String id= url.substring(url.length - 11); setState(() { YoutubePlayerController _controller = YoutubePlayerController( initialVideoId: id, flags: YoutubePlayerFlags( autoPlay: true, mute: false, ), ); }); } @override Widget build(BuildContext context) { YoutubePlayerController _controller = YoutubePlayerController( initialVideoId: widget.id, flags: YoutubePlayerFlags( autoPlay: true, mute: false, ), ); return Scaffold( appBar: AppBar( elevation: 0, title: Text('Fairy Tail Video'), toolbarHeight: 60, backgroundColor: const Color(0xFF006666), ), body: Column( children: [ Container( child: YoutubePlayer( controller: _controller, liveUIColor: Colors.amber, ), ), Expanded( child: Container( child: FutureBuilder( future: _loadCSV(), builder: (BuildContext context, AsyncSnapshotlt;Listlt;YoutubeDetailgt;gt; snapshot) { if (snapshot.hasData) { Listlt;YoutubeDetailgt; videoDetail = snapshot.data!; return ListView.builder( shrinkWrap: true, scrollDirection: Axis.vertical, itemCount: videoDetail.length, itemBuilder: (_, int index) { if (index gt; 0) { return GestureDetector( child: Container( height: 80, child: DisplayVideoView( videoDetail[index].url, videoDetail[index].title), ), onTap: () =gt;_changevideoId(videoDetail[index].url), ); } else { return Container(); } }); } else { return Container(); } }), ), ), ], )); } } class DisplayVideoView extends StatelessWidget { String videopath; String title; DisplayVideoView(this.videopath, this.title); @override Widget build(BuildContext context) { String url = videopath; String id = url.substring(url.length - 11); print("Call "); print(id); // TODO: implement build return Card( clipBehavior: Clip.antiAlias, child: Container( height: 150, padding: const EdgeInsets.all(0), child: Row(children: [ Expanded( flex: 6, child: Container( decoration: BoxDecoration( image: DecorationImage( image: NetworkImage( 'https://img.youtube.com/vi/$id/mqdefault.jpg'), fit: BoxFit.fill)), ), ), Spacer( flex: 1, ), Expanded( flex: 14, child: Container( padding: const EdgeInsets.only(top: 2), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center, children: lt;Widgetgt;[ Text(title, style: TextStyle( fontSize: 16.0, fontWeight: FontWeight.bold)), ], ), ), ), ]), ), ); } } Ответ №1:
Пример, приведенный в пакете youtube_player_flutter, решает ваш случай. Выполните все шаги, особенно:
@override void initState() { super.initState(); _controller = YoutubePlayerController( initialVideoId: _ids.first, flags: const YoutubePlayerFlags( mute: false, autoPlay: true, disableDragSeek: false, loop: false, isLive: false, forceHD: false, enableCaption: true, ), )..addListener(listener); _idController = TextEditingController(); _seekToController = TextEditingController(); _videoMetaData = const YoutubeMetaData(); _playerState = PlayerState.unknown; } void listener() { if (_isPlayerReady amp;amp; mounted amp;amp; !_controller.value.isFullScreen) { setState(() { _playerState = _controller.value.playerState; _videoMetaData = _controller.metadata; }); } }