Создание приложения, которое воспроизводит видео и аудио файлы как из локальной сети, так и из Интернета во флаттере.
Что такое флаттер?
Flutter — это набор инструментов пользовательского интерфейса Google для создания красивых, скомпилированных приложений для мобильных устройств, Интернета и настольных компьютеров из единой кодовой базы.
Flutter обеспечивает плавную и простую разработку кроссплатформенных мобильных приложений. Вам не нужно разрабатывать приложение для iOS и Android отдельно. Все, что вам нужно, — это одна кодовая база для обеих платформ.
Виджеты во флаттере
Виджеты — это объекты высокого уровня, используемые для описания любой части приложения. Во флаттере почти все является виджетом. В некотором смысле виджеты очень похожи на компоненты React.
Например, если нам нужно создать кнопку, у нас есть виджет RaisedButton, который обеспечивает функциональность кнопки.
Каждый виджет подобен функции. Flutter использует язык дартс. Dart — это функциональный язык программирования. Это означает, что мы можем передавать функции в качестве параметров другим функциям. Итак, каждый виджет — это функция, параметры которой принимают другие виджеты (функции).
Некоторые виджеты имеют дочерний параметр. Этот параметр принимает только один виджет. Некоторые другие виджеты, такие как виджет Column, имеют дочерний параметр, который принимает более одного виджета.
Основные виджеты
- Материал Приложение
- Строительные леса
- Текст
- Контейнер
- Столбец
- Ряд
- Посмотреть список
MaterialApp и эшафот
Эти два виджета необходимы для каждого приложения. Мы создаем наше приложение поверх MaterialApp. Этот виджет использует материальный дизайн Google.
Scaffold — это виджет во флаттере, который предоставляет множество других виджетов, или мы можем сказать API, такие как Drawer, SnackBar, BottomNavigationBar, FloatingActionButton, AppBar и т. д. Это похоже на базовый шаблон для запуска приложения.
Текстовый виджет
Этот виджет используется для отображения текста на экране. Это самый распространенный виджет, используемый во флаттере.
Text("Hello World")
Этот виджет также имеет свойство стиля, которое принимает виджет TextStyle. Используя виджет TextStyle, мы можем изменить цвет, шрифт, размер и т. д. для текста.
Контейнер
Контейнер — это просто коробка. Он в основном имеет 4 свойства. Это высота, ширина, цвет и ребенок.
Container(
color: Colors.amber,
width: 48.0,
height: 48.0,
child: Text("Hello"),
),
Как видите, мы предоставили цвет с помощью Colors.amber. Таким образом, мы можем передавать многие другие цвета, такие как Colors.black, Colors.blue и т. д.
Столбец и строка
Этот виджет имеет дочернее свойство, которое принимает более одного виджета. Он отображает все виджеты в вертикальном массиве.
Точно так же виджет Row также принимает более одного виджета и отображает все свои виджеты в строке.
ПРИМЕЧАНИЕ. Виджет столбца не поддерживает прокрутку. Делаем, если виджеты занимают больше места, чем высота экрана, получаем ошибку. Чтобы избежать этого, мы оборачиваем его в ListView Widget.
Виджет списка
Мы используем этот виджет для обеспечения возможности прокрутки. ЕСЛИ у нас есть больше виджетов в нашем приложении, которое занимает больше места, чем высота экрана, нам нужна опция прокрутки. Предоставляется виджетом ListView.
Наше основное приложение
Я создал приложение, которое воспроизводит аудио- и видеофайлы из локального хранилища, а также из Интернета. Я объяснил каждый шаг в этой статье. Также в конце статьи я предоставил ссылку на этот проект на github.
Структура
Здесь мы создаем четыре файла дротика. Одним из них является main.dart, который запускается при запуске приложения. Далее идет Offline.dart, который воспроизводит видео из локального хранилища. Следующим является Online.dart, который воспроизводит видео с YouTube. Финал — это ongs.dart, который воспроизводит песни.
файл main.dart
Это файл, который мы запускаем во время работы приложения флаттера. В этом файле мы используем как MaterialApp, так и Scaffold Widget. В виджете Scaffold я использовал виджеты AppBar и BottomNavigationBar.
AppBar
Виджеты AppBar просто отображают AppBar поверх экрана. В основном он имеет три свойства. Они ведут, название и действия. Мы используем ведущий для предоставления любого значка, заголовок для отображения заголовка
Здесь я использовал только параметры заголовка и действий.
В параметре действий я создал значок с помощью GestureDetector, и при щелчке по этому значку он ведет на мою страницу github.
Для запуска сайтов из приложения нам понадобится пакет url_launcher и импортируем его в файл. Затем мы можем передать требуемый URL в функцию launch().
Scaffold(
appBar: AppBar(
title: Text("Entertaintment App"),
actions: [
Padding(
padding: EdgeInsets.all(5),
child: GestureDetector(
child: Icon(AntDesign.linkedin_square),
onTap: () {
launch(
"https://www.linkedin.com/in/vishnu-kvs-69aa25151/");
}),
),
),
GestureDetector против IconButton
Вышеупомянутые два виджета используются для создания кликабельных значков. Но IconButton поставляется со встроенным дополнением, которое велико для AppBar. GestureDetector не имеет отступов. Таким образом, использование GestureDetector в AppBar лучше, чем IconButton.
БоттонНавигацияБар
Этот виджет используется для навигации между страницами. Этот виджет можно передать в параметр bottomNavigationBar Scaffold.
Сначала я создал список вкладок, который занимает все страницы.
final tabs = [
Center(
child: Online(),
),
Center(
child: Offline(),
),
Center(
child: Songs(),
),
];
Затем мы должны передать это параметру тела скаффолда.
body: tabs[_currentIndex],
Затем в виджете BottomNavigationBar у нас есть такие параметры, как currentIndex, iconSize, items, onTap и т. д.
items: принимает виджет BottonNavigationBarItem, в который мы можем передать иконку и заголовок. Поскольку у нас есть три страницы, мы создаем три элемента.
iconSize: чтобы указать размер значка.
currentIndex: мы создаем переменную с именем _currentIndex и устанавливаем для нее значение 0. Затем мы передаем эту переменную в этот параметр currentIndex в BottomNavigationBar.
onTap: чтобы изменить currentIndex при нажатии на значок, мы используем функцию setState.
bottomNavigationBar:
BottomNavigationBar(
currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed,
iconSize: 25,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.video_library),
title: Text("Offline Videos")),
BottomNavigationBarItem(
icon: Icon(Icons.video_label), title: Text("Online Videos")),
BottomNavigationBarItem(
icon: Icon(Icons.audiotrack), title: Text("Songs")),
],
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
),
Файл Online.dart
В этом файле я создал виджет под названием Cardd. В этом виджете я использовал виджет карты. Внутри виджета карты я использовал виджет «Изображение», виджет «Нравится» и виджет «Текст».
Чтобы получить кнопку «Нравится», я использовал пакет like_button. Сначала я взял виджет столбца и передал виджет изображения вверху. Я передал виджет Row, в котором я использовал виджеты like_button и Text.
Также я использовал виджет InkWell. InkWell обычно используется для виджетов, таких как контейнеры и т. д. С виджетом InkWell мы получаем свойство onTap. При этом я использовал url_launcher и передал ссылки на YouTube.
Чтобы сделать этот виджет многоразовым или (Чтобы создать любой виджет), мы используем переменные и конструктор.
class Cardd extends StatelessWidget {
String img;
String link;
String name;
Cardd(this.img, this.link, this.name);
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () => launch(link),
child: Container(
margin: EdgeInsets.all(10),
//width: double.infinity,
//height: double.infinity,
child: Column(
children: [
Card(
elevation: 10,
margin: EdgeInsets.all(10),
child: Column(
children: [
Image.asset(
img,
fit: BoxFit.cover,
),
SizedBox(height: 10),
Row(mainAxisAlignment: MainAxisAlignment.center, children: [
LikeButton(
likeBuilder: (bool isLiked) {
return Icon(
Icons.favorite,
color:
isLiked ? Colors.deepPurpleAccent : Colors.grey,
//size: buttonSize,
);
},
),
SizedBox(width: 15),
Text(
name,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.pink,
),
)
])
],
),
),
],
),
),
);
}
}
После создания виджета я использовал его в виджете столбца и обернул его в виджет ListView для функции прокрутки.
import 'variables.dart' as vary;
class Online extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: [
Column(
children: [
Cardd(vary.image1, vary.link1, vary.name1),
Cardd(vary.image2, vary.link2, vary.name2),
Cardd(vary.image3, vary.link3, vary.name3),
],
),
],
);
}
}
Как видите, я создал отдельный файл для переменных с именем variable.dart.
String image1 = "assets/images/dilbechara.jpg"; String link1 = "https://www.youtube.com/watch?v=GODAlxW5Pes&t=3s"; String name1 = "Dil Bechara"; String image2 = "assets/images/rrr.jpg"; String link2 = "https://www.youtube.com/watch?v=lDVQojLPI4Y"; String name2 = "RRR"; String image3 = "assets/images/bahubali2.jpg"; String link3 = "https://www.youtube.com/watch?v=G62HrubdD6o"; String name3 = "Bahubali 2";
Offline.dart файл
Обычно для воспроизведения видео с локального сервера нам нужен видеоплеер. Чтобы получить видеоплеер, мы используем пакет video_player. Но использовать этот пакет очень сложно. Итак, мы используем другой пакет под названием chewie, который основан на пакете video_player.
Основная часть приведенного ниже кода — это то, где мы передаем путь к файлам. Остальное другое похоже на шаблон. Чтобы получить подробное объяснение Нажмите здесь
import 'package:flutter/material.dart';
import 'package:chewie/chewie.dart';
import 'package:video_player/video_player.dart';
class ChewieListItem extends StatefulWidget {
final VideoPlayerController videoPlayerController;
final bool looping;
ChewieListItem({
@required this.videoPlayerController,
this.looping,
Key key,
}) : super(key: key);
@override
_ChewieListItemState createState() => _ChewieListItemState();
}
class _ChewieListItemState extends State<ChewieListItem> {
ChewieController _chewieController;
@override
void initState() {
super.initState();
_chewieController = ChewieController(
videoPlayerController: widget.videoPlayerController,
aspectRatio: 16 / 9,
autoInitialize: true, //First frame of video display
looping: widget.looping, //for looping
//For errors
errorBuilder: (context, errorMessage) {
return Center(
child: Text(
errorMessage,
style: TextStyle(color: Colors.white),
),
);
},
);
}
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(10.0),
child: Chewie(
controller: _chewieController,
),
);
}
@override
void dispose() {
super.dispose();
widget.videoPlayerController.dispose();
_chewieController.dispose();
}
}
class Offline extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: [
ChewieListItem(
videoPlayerController:
VideoPlayerController.asset('assets/videos/samsung.mp4'),
looping: true,
),
SizedBox(width: 10),
ChewieListItem(
videoPlayerController:
VideoPlayerController.asset('assets/videos/ipad.mp4'),
looping: true,
),
SizedBox(width: 10),
ChewieListItem(
videoPlayerController:
VideoPlayerController.asset('assets/videos/xiomi.mp4'),
looping: true,
),
],
);
}
}
Файл Songs.dart
Чтобы использовать аудиофайлы в приложении, нам необходимо установить пакет audioplayers.
Сначала мы создаем экземпляры AudioPlayer и AudioCache. Затем мы можем воспроизводить локальные файлы, используя экземпляр audioCache. Как и в приведенном ниже коде, я создал функцию SongPlay(), которая получает путь из переменной и воспроизводит песню. Я создал кнопки для обновления переменной.
Songs() {
AudioPlayer _audioPlayer = AudioPlayer();
var audioCache = AudioCache(fixedPlayer: _audioPlayer);
String path = "";
SongPlay() {
audioCache.play(path);
}
return Center(
child: Container(
color: Colors.amber.shade200,
child: Column(
children: [
Container(
child: Image.asset(
"assets/images/musicphoto.png",
fit: BoxFit.cover,
)),
SizedBox(height: 20),
Container(
color: Colors.amber,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
child: Icon(Icons.play_arrow),
onPressed: SongPlay,
),
SizedBox(width: 10),
RaisedButton(
child: Icon(Icons.pause),
onPressed: () {
_audioPlayer.pause();
}),
SizedBox(width: 10),
RaisedButton(
child: Icon(Icons.stop),
onPressed: () {
_audioPlayer.stop();
}),
],
),
),
SizedBox(height: 40),
Container(
//color: Colors.amberAccent,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
RaisedButton(
onPressed: () {
path = "songs/Bekhayali.mp3";
SongPlay();
},
child: Text("Bekhayali")),
RaisedButton(
onPressed: () {
path = "songs/Makhna.mp3";
SongPlay();
},
child: Text("Makhna")),
]),
],
),
),
],
),
),
);
}
Это полный проект.
Репозиторий Github: https://github.com/Vishnukvsvk/Entertaintment-App
