Introduction to Flutter Advanced Practical Application

Developing a mobile application is a complex and challenging task. There are many frameworks available for developing mobile applications. Android provides a native framework based on the Java language, and iOS provides a native framework based on objective-C/Swift. However, to develop applications that support both operating systems, we need to use two different frameworks and write code in two different languages. To help overcome this complexity, mobile frameworks exist that support both operating systems. In this scenario, Flutter, a simple high-performance framework based on the Dart language, provides high performance by rendering the UI directly on the canvas of the operating system, rather than through the native framework. This course will give you an in-depth knowledge of Flutter advanced practical skills and complex project architecture design and development solutions.

The Flutter Advanced Practical Simulation Bilibili APP – How to conduct project practical application

Build a Flutter network –Networking

Android applications must declare their use of the Internet in AndroidManifest (Androidmanifest.xml) :

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

Flutter Login registration – Login Page

It is a good idea to authenticate users before accessing websites, mobile applications and computer applications to prevent unauthorized users from accessing personal information. In this article, I’ll explain how to build the login page user interface. I used the TextField widget for the username and password input. The FlatButton widget is used to display operations. In addition, I’ve used images to set up the logo for the login page.

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. 40), decoration: BoxDecoration( borderRadius: BorderRadius.circular(200), ), child: Center( child: Image.asset('asset/images/flutter-logo.png'), ), ),Copy the code

The Video_Player package of Flutter advanced practical emulation APP courses

IOS: Warning: Video player does not work on IOS emulator. IOS devices must be used during development/testing. Add the following entry to your message. Plist file, located at /ios/Runner/ info.plist: 

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>
Copy the code

This entry allows your application to access the video file via the URL.

There are Android: ensure the AndroidManifest file permissions, located in the < project root > / Android/app/SRC/main/AndroidManifest. XML:

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

Copy the code

The Flutter project template added it, so it probably already exists.

Web: This plugin was compiled for the Web platform from version 0.10.5, the latest version of Flutter (>=1.12.13+hotfix.4). Different browsers may have different video playback functions (supported formats, autoplay…). . Check the package :video_player_web for more Web-specific information. VideoPlayerOptions. The Mixwiththothers option is not implemented on the Web, at least not yet. If you use this option on the web, it will be silently ignored.

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();
  }
}
Copy the code

Flutter Advanced Practical Simulation bilibili APP – Project integration package

During normal development, the app can be tested using the flutter run command, or run and Debug in the IntelliJ toolbar. By default, Flutter builds a debug version of our app for us. 1. Store the signature file. 2. Configuration/android/app/build. Gradle file 4. Generated apk

\/ ITspcool Exchange and study together

.