flutter 第一个程序_我如何在短短10天内制作出我的第一个Flutter应用程序

flutter 第一个程序

In my previous story, I briefed about flutter, dart and how to setup Flutter on Android studio and Virtual Studio Code.

在上一个故事中 ，我简要介绍了flutter，dart以及如何在Android Studio和Virtual Studio Code上设置Flutter。

A full audio-video description of how the application works, along with GitHub link can be found here.

可以在此处找到有关应用程序工作方式的完整音频视频描述，以及GitHub链接。

In this story, we are going to take a dive into dependencies and assets, how to use them to create our very first application.

在这个故事中，我们将深入研究依赖项和资产 ，以及如何使用它们来创建我们的第一个应用程序。

首先，让我们看看什么是pubspec.yaml？ (First, let's take a look at what is pubspec.yaml?)

The pubspec.yaml file is the most important file in any Flutter project. It is the place where you provide all the required dependencies, assets, etc. of your Flutter project. Knowing how to use it better can help us in many unexpected ways.

pubspec.yaml文件是Flutter项目中最重要的文件。 在这里，您可以提供Flutter项目的所有必需的依赖项，资产等。 知道如何更好地使用它可以在许多意想不到的方面为我们提供帮助。

Detailed documentation can be found here.

详细文档可在此处找到。

What are dependencies?

什么是依赖项？

Dependencies are one of the core concepts of the pub package manager. A dependency is another package that your package needs in order to work. Dependencies are specified in your pubspec. You list only immediate dependencies — the software that your package uses directly. Pub handles transitive dependencies for you.

依赖关系是pub软件包管理器的核心概念之一。 依赖项是您的程序包需要使用的另一个程序包。 依赖关系在您的pubspec中指定。 您仅列出直接依赖项 -程序包直接使用的软件。 Pub为您处理传递依赖项 。

Detailed documentation can be found here.

详细文档可在此处找到。

What are assets?

什么是资产？

Assets are mainly resources such as audio, videos, pictures that we will use from local storage in our application.

资产主要是资源，例如音频，视频，图片，我们将从应用程序的本地存储中使用这些资源。

Detailed documentation can be found here.

详细文档可在此处找到。

pubspec.yaml

pubspec.yaml

The above pictures shows the dependencies and assets that I have used.Dependencies, along with their versions are to be mentioned in the file.

上图显示了我使用过的依赖项和资产，文件中将提及依赖项及其版本。

I have used video_player and chewie packages for the video window having options to play, pause, volume adjust and full-screen mode.

我为视频窗口使用了video_player和chewie软件包，这些软件包具有播放，暂停，音量调节和全屏模式的选项。

The following code has been used in the test.dart file.

在test.dart文件中使用了以下代码。

import 'package:chewie/chewie.dart';import 'package:flutter/material.dart';import 'package:video_player/video_player.dart';class ChewieListItem extends StatefulWidget {// This will contain the URL/asset path which we want to playfinal 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;@overridevoid initState() {super.initState();// Wrapper on top of the videoPlayerController_chewieController = ChewieController(videoPlayerController: widget.videoPlayerController,aspectRatio: 16 / 9,// Prepare the video to be played and display the first frameautoInitialize: true,looping: widget.looping,// Errors can occur for example when trying to play a video// from a non-existent URLerrorBuilder: (context, errorMessage) {return Center(child: Text(errorMessage,style: TextStyle(color: Colors.white),),);},);}@overrideWidget build(BuildContext context) {return Padding(padding: const EdgeInsets.all(8.0),child: Chewie(controller: _chewieController,),);}@overridevoid dispose() {super.dispose();// IMPORTANT to dispose of all the used resourceswidget.videoPlayerController.dispose();_chewieController.dispose();}}

Further, audioplayers package has been used for accessing audios from local and network storage.

此外， 音频播放器软件包已用于访问来自本地和网络存储的音频。

Here is the main.dart file that consists of the overall structure of the application.

这是main.dart文件，由应用程序的整体结构组成。

import 'package:audioplayers/audio_cache.dart';import 'package:flutter/material.dart';import 'package:test1_assets/test.dart';import 'package:video_player/video_player.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(backgroundColor: Colors.red[100],appBar: AppBar(title: Text('Raksha Bhi Tanng Bhi :")'),),body: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[ChewieListItem(videoPlayerController: VideoPlayerController.asset('videos/Desire_Rakshabandhan.mp4',),looping: true,),Container(width: 200,height: 200,child: Card(color: Colors.blue,//shape: Border(right: BorderSide(color: Colors.amber, width: 5)),shape: RoundedRectangleBorder(borderRadius: const BorderRadius.all(Radius.circular(40.0),),),child: Column(children: <Widget>[Text('MUSIC!',style: TextStyle(color: Colors.black),),Image.asset('images/music.jpg'),RaisedButton(onPressed: () {print('Click!');var audio = AudioCache();audio.play('HONK_1.mp3');})],),elevation: 7,),),Text('Let everyday add strenghth to your bonding!'),Text('Stay safe!'),],),),);}}

All we have to do is save the files and run it, after adding the assets in the pubspec file and it will automatically get displayed on the virtual device connected.

在pubspec文件中添加资产后，我们要做的就是保存文件并运行它，它将自动显示在连接的虚拟设备上。

A full audio-video description of how the application works, along with github link can be found here.

可以在此处找到有关应用程序工作方式的完整音频视频描述，以及github链接。

Thank you for reading!

感谢您的阅读！

翻译自: https://medium.com/swlh/how-i-made-my-first-flutter-app-in-just-10-days-20d8fc0038ea

flutter 第一个程序