Flutter高级进阶实战 仿哔哩哔哩APP

Flutter高级进阶实战 仿哔哩哔哩APP - 介绍

开发一个移动应用程序是一项复杂而富有挑战性的任务。有许多框架可用来开发移动应用程序。Android提供基于Java语言的原生框架，iOS提供基于Objective-C / Swift语言的原生框架。 然而，要开发支持这两种操作系统的应用程序，我们需要使用两种不同的框架，用两种不同的语言编写代码。为了帮助克服这种复杂性，存在支持这两种操作系统的移动框架。在这个场景中，Flutter——一个基于Dart语言的简单高性能框架，通过直接在操作系统的画布上(而不是通过本机框架)呈现UI来提供高性能。Flutter高级进阶实战 仿哔哩哔哩APP课程将带你深度掌握Flutter高阶实战技能和复杂项目架构设计与开发方案。

Flutter高级进阶实战 仿哔哩哔哩APP - 如何进行项目实战

Flutter网络搭建 - Networking

Android应用程序必须在Android manifest (AndroidManifest.xml)中声明他们对互联网的使用:

<manifest xmlns:android...>
 ...
 <uses-permission android:name="android.permission.INTERNET" />
 <application ...
</manifest>

Flutter登录注册 - Login Page

在访问网站、移动应用程序和计算机应用程序之前，最好先对用户进行身份验证，以防止未经授权的用户访问个人信息。 在本文中，我将解释如何构建登录页面用户界面。我使用了TextField小部件作为用户名和密码输入。FlatButton小部件，用于显示操作。另外，我已经使用图像设置登录页面的标志。

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: LoginDemo(),
    );
  }
}

appBar: AppBar(
  title: Text('Login Page'),
),

Container(
  height: 150.0,
  width: 190.0,
  padding: EdgeInsets.only(top: 40),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(200),
  ),
  child: Center(
    child: Image.asset('asset/images/flutter-logo.png'),
  ),
),

Flutter高级进阶实战 仿哔哩哔哩APP课程 - 视频播放器组件封装video_player

IOS： 警告:视频播放器在iOS模拟器上不起作用。在开发/测试期间必须使用iOS设备。 将以下条目添加到您的信息中。plist文件，位于<project root>/ios/Runner/Info.plist:

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

这个条目允许你的应用程序通过URL访问视频文件。

Android : 确保AndroidManifest文件中存在以下权限，位于<project root>/ Android /app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET"/>

Flutter项目模板添加了它，所以它可能已经存在。

Web : 这个插件为web平台编译自版本0.10.5，在最近的版本的Flutter (>=1.12.13+hotfix.4)。 不同的浏览器可能有不同的视频播放功能(支持的格式，自动播放…)。检查包:video_player_web获得更多特定于web的信息。 VideoPlayerOptions。mixwiththothers选项不能在web中实现，至少目前是这样。如果你在网络上使用这个选项，它将被默默忽略。

import 'package:video_player/video_player.dart';
import 'package:flutter/material.dart';

void main() => runApp(VideoApp());

class VideoApp extends StatefulWidget {
  @override
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
  VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4')
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Center(
          child: _controller.value.isInitialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                )
              : Container(),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              _controller.value.isPlaying
                  ? _controller.pause()
                  : _controller.play();
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
}

Flutter高级进阶实战 仿哔哩哔哩APP - 项目集成打包

在一般的开发过程中，我们可以使用 flutter run 命令，或者 IntelliJ 工具栏中的 Run 和 Debug 来测试 app。这时候，Flutter 默认会为我们构建 app 的调试版本。 1.签名文件放的位置 2.创建key.properties 3.配置/android/app/build.gradle文件 4.生成apk

\/ itspcool 一起交流学习

...