1. Previous episodes
Hi, everyone who’s losing his hair. I’m Yang Xiao Yang. In this episode we’ll continue our talk about Flutter, GooGle’s “real son”. Since the last post, some diggers have also posted some interesting comments. So let’s start with a review
1.1 Read the reviews
- Why don’t you put up some cute pets? It’s a little shameful in the office @someone used my name
- What the hell is this UI? The size of the icon @paixs
- The interface is really a persistent spoon
After all, I am not a designer. This also proves how important the UI of a product is. Of course, I also randomly post their links in the comments section, and we can also see if the other party will have any technical columns, so that we can learn from each other. I also posted your weird comments in the comments section for each stretch of the road
1.2 Achievements in the previous episode
-
The nuggets community Flutter module is the most popular module in seven days
-
Nuggets community Flutter module hot 3rd
-
Nuggets community Flutter module latest 8th
-
So far 25 likes and 10 comments
Although I don’t like the nuggets search algorithm, I heard it’s updated and I’m looking forward to it getting better and better, so everyone can share their exploration of the technology
2. Write first
Unconsciously a week has passed, the actual development process will still have a lot of pits, this step by step will share with you, including such as Provider and background interaction process. Enterprise configuration of Dio, etc. So in this video let’s draw the interface
- A “lonely island” APP (No.1, project initialization, screen adaptation)
- The number of words in this article: 2901
- Length of reading: It depends on you
- Read warning: multiple links, multiple images
2.1 Objectives of this Chapter
As shown in the picture, it is still a Low interface, the following content may be a little boring, but it is really liver, looking forward to meeting you
2.2 Share List
- A great list of Flutter learning resources
- Take the Flutter Clock Challenge
2.3 Flutter data
-
Flutter No.7, a mobile UI framework developed by Google, can quickly build a high quality native user interface on iOS and Android
-
Some index of data
3. Start developing
3.1 vscode plug-in
- Flutter syntax detection, code completion, code refactoring, runtime debugging, and hot overloading
- Dart
- Flutter Widget Snippets
- Awesome Flutter Snippets provide Snippets of commonly used functions
That’s because an APP starts directly on the login page or registration page. It’s a little stiff, it’s extremely unfriendly to the user, everything has to take time, there’s a process, right? In fact, in the process of flash screen, will do some judgment, such as you judge whether the user has logged in
3.2 Pull code
It turns out we didn’t commit the update
- New Development branch
Then let’s create a new development branch, which is used to record a new chapter. For this chapter, we need to make a splash screen and a guide page, as shown in the problem
- The DEBUG debugging
Last week we ran the project by flutter Run under the root directory of the project, and then switched between R and R
This week let’s use Vscode debug mode
3.3 Public Variables handle Global
In the comments section, digg mentioned that the navigation at the bottom is too big. In fact, we already adapted the screen, right? Other methods are also available via a plugin called Flutter_screenUtil, such as MediaQuery, to get the width and height of the widget and device
So what is a global variable? A global variable is simply a variable that lasts through the life cycle of an APP. It is simply an object that holds some information or encapsulates some global tools and methods.
Dart will be created to store common widths, heights, and font sizes, for example
cd utils
copy nul > global.dart // Create global.dart (Windows)
Copy the codeimport 'package:flutter_screenutil/flutter_screenutil.dart';
/// Common page width and height
/ / width
double width100 = ScreenUtil.getInstance().setWidth(100);
/ / height
double height100 = ScreenUtil.getInstance().setHeight(100);
Copy the codeAnd then let’s go down to the bottom navigation bar and just use our variables, and of course the first step is to import
import '.. /utils/global.dart';
Copy the codeLet’s test this out. Delete all the images we introduced at the end of the last paragraph and write a test text
When we rebooted, obviously it could
3.4 Splash Screen
Our first step is to create a new page and call it splash_screen_page
/// Flash page
import 'package:flutter/material.dart';
class SplashScreenPage extends StatelessWidget {
const SplashScreenPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Text('Splash page'),),); }}Copy the codeDart is then referenced and used in main.dart, where we no longer introduce the navigation interface at the bottom
return MaterialApp(
debugShowCheckedModeBanner: false.// Remove debugging
title: 'island',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SplashScreenPage()); // The boot page is used here, which means that when the user comes in, there is a splash screen
}
Copy the codeThen let’s write the splash screen page of this island APP. First, let’s understand several components
- SingleChildScrollView is mainly used to control the overflow of parts inside and can be rolled
- BoxDecoration is mainly used to decorate the container, such as background color, width and height
Here we use gradient
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Linear gradient There is a gradient process
Color.fromRGBO(0.0.0.0.2),
Color.fromRGBO(0.0.0.0.4)
],
begin: FractionalOffset.topCenter, // The top is centered
end: FractionalOffset.bottomCenter)), //
Copy the codeIt looks something like this
The first page of the application is the splash screen, and then we write the main content of the page
child: Container(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 30),),//
Text('island',
style: TextStyle(
fontSize: fontSize200, fontWeight: FontWeight.w600))
],
),
),
Copy the codeNotice that fontSize: fontSize200 is the size defined by the public global declaration
All right, let’s run
Unfortunately, the error was reported
The method '/' was called on null.
Copy the codeThe problem is very simple, in fact, when we use screen adaptation, there is no initialization
Obviously that will do, and then we’ll insert a picture, and it’ll be better to put it here
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(assetName)
)
),
Copy the codeWhat picture should I put, just a conservative one, because it looks less and less like Island App
** Wlop – (if any, please contact Blog)
Yaml. The static flash screen will look like this for now
Remember we looked at the source code of MaterialApp together on the last trip
const MaterialApp({
Key key,
this.navigatorKey,
this.home,
this.routes = const <String, WidgetBuilder>{}, // We will use this route configuration for the time being
this.initialRoute,
this.onGenerateRoute,
this.onUnknownRoute,
this.navigatorObservers = const <NavigatorObserver>[],
this.builder,
this.title = ' '.this.onGenerateTitle,
this.color,
this.theme,
this.darkTheme,
this.themeMode = ThemeMode.system,
this.locale,
this.localizationsDelegates,
this.localeListResolutionCallback,
this.localeResolutionCallback,
this.supportedLocales = const <Locale>[Locale('en'.'US')].this.debugShowMaterialGrid = false.this.showPerformanceOverlay = false.this.checkerboardRasterCacheImages = false.this.checkerboardOffscreenLayers = false.this.showSemanticsDebugger = false.this.debugShowCheckedModeBanner = true,})Copy the codeThe main purpose is to jump to the boot screen when the splash screen is over
return MaterialApp(
debugShowCheckedModeBanner: false.// Remove debugging
title: 'island',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SplashScreenPage(),
routes: {
'guidePages': (context) {
return GuidePages(); // Jump to the boot page}});Copy the codeDesign a timer so that when the timer ends, jump
// Create a timer to jump to when the timer ends
jumpPage(){
return Timer(duration, callback);
}
// the source code actually looks like this
factory Timer(Duration duration, void callback()) {
if (Zone.current == Zone.root) {
// No need to bind the callback. We know that the root's timer will
// be invoked in the root zone.
return Zone.current.createTimer(duration, callback);
}
return Zone.current
.createTimer(duration, Zone.current.bindCallbackGuarded(callback));
}
Copy the code- Duration means delay
- A callback is a callback. What does a callback do when the time ends
Since we were using a StatelessWidget which means we need to call a page-jump method at a certain time for now we’re going to use a StatefulWidget, the full code looks like this
import 'dart:async';
/// Flash page
import 'package:flutter/material.dart';
import '.. /utils/global.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
class SplashScreenPage extends StatefulWidget {
SplashScreenPage({Key key}) : super(key: key);
@override
_SplashScreenPageState createState() => _SplashScreenPageState();
}
class _SplashScreenPageState extends State<SplashScreenPage> {
// Create a timer to jump to when the timer ends
jumpPage() {
return Timer(Duration(milliseconds: 3000), () {
Navigator.pushReplacementNamed(context, 'guidePages');
});
}
@override
void initState() {
super.initState();
jumpPage();
}
@override
Widget build(BuildContext context) {
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334).. init(context);return Scaffold(
backgroundColor: Colors.white, / / the background color
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/splash_screen.jpg'),
fit: BoxFit.cover)), // Add a background image
child: Container(
child: Center(
child: SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 30),
),
Text('Welcome to the island',
style: TextStyle(
fontSize: fontSize40,
color: Colors.white10,
fontWeight: FontWeight.w600)),
SizedBox(
height: height100,
),
Text('By Ocean ',
style: TextStyle(
fontSize: fontSize40,
color: Colors.white10,
fontWeight: FontWeight.w600))
],
),
),
),
),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Linear gradient There is a gradient process
Color.fromRGBO(0.0.0.0.2),
Color.fromRGBO(0.0.0.0.5)
],
begin: FractionalOffset.topCenter, // The top is centered
end: FractionalOffset.bottomCenter)), // The bottom is centered))); }}Copy the codeAll right, let’s take a step-by-step look at what we’ve achieved together
3.5 guide page
After passing through the splash screen, we expect to have a guide page that guides the user to the next step. Here we use the third-party package intro_views_flutter 2.8.0
The current version of the package is 2.8.0
| The package name | transfer |
|---|---|
| intro_views_flutter | intro_views_flutter |
-
Add this to the package’s pubspec.yaml file:
dependencies: intro_views_flutter: ^2.8. 0 Copy the code -
You can install packages from the command line:
$ flutter pub get Copy the code -
Now, in the Dart code, you can use:
import 'package:intro_views_flutter/intro_views_flutter.dart'; Copy the code
After a wave operation, it can be used, the specific method of use or need to see the API
| attribute | The data type | describe | The default value |
|---|---|---|---|
| pageColor | Color | Set the color of the page. | Null |
| mainImage | Image / Widget | Sets the main image of the page. | Null |
| title | Text / Widget | Sets the title text of the page. | Null |
| body | Text / Widget | Set the body of the page. | Null |
| iconImageAssetPath | String | Sets the path of the icon image to display in a page bubble. | Null |
| iconColor | Color | Sets the color of the page bubble icon. | Null |
| bubbleBackgroundColor | Color | Set the page bubble background color. | Colors.white / Color(0x88FFFFFF) |
| textStyle | TextStyle | Set the TextStyle for the title and body | title: Color: Colors. White, fontSize: 50.0 body: Color: Colors. White, fontSize: 24.0 |
| titleTextStyle | TextStyle | Set the TextStyle for the title | Color: Colors. White, fontSize: 50.0 |
| bodyTextStyle | TextStyle | Set the TextStyle for the body | Color: Colors. White, fontSize: 24.0 |
| bubble | Widget | Set up custom widgets for internal bubbles | null |
So let’s define a PageViewModel based on the small print we use
PageViewModel(
pageColor: const Color(0xFF03A9F4),
// iconImageAssetPath: 'assets/air-hostess.png',
iconColor: Colors.pink,
bubbleBackgroundColor: Colors.pink,
// bubble: Image.asset('images/jiche.jpg'),
body: Text(
'This is an island for you and me',
),
title: Text(
'No.1',),// titleTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
// bodyTextStyle: TextStyle(fontFamily: 'MyFont', color: Colors.white),
mainImage: Container(
decoration:
BoxDecoration(border: Border.all(width: 1, color: Colors.red)),
child: Image.asset(
/ / picture
'images/jiche.jpg',
height: width750,
width: height1314,
fit: BoxFit.cover,
// alignment: align. center, // display in center))),Copy the codeIn the “images” folder, we have added several images for the display of the guide page. Some of the images are found here
So that’s pretty much it. Let’s take a look
4. Write at the end
I’m glad you took the time to see this, especially with the pace of life and work, we’ve completed two parts of our journey today
- The splash screen
- Guide page
It’s already 2:35 in the morning
Because I saw this this week
I went out to roam around again, but I haven’t broken off yet, and it is also an incentive for me. So please give me an encouragement and comment like, of course, if I feel ok, maybe it will appear in the next chapter [read comments]
I am Yang Xiaoyang, see you next time, this section of the code will be synchronized to update the warehouse github.com/yayxs/flutt…
–END