Flutter – 登录屏幕

Onboarding Screen 是您在加载启动画面后可以在大多数应用程序中看到的最流行的界面之一。 Onboarding Screen 提供了应用程序的简短概述。 Onboarding Screen 主要由三到四个布局组成，当我们单击 Next 时，这些布局会滑动。在本文中，我们将看到如何在Flutter App 中实现 Onboarding Screen。

首先，在pubspec.yaml 文件的资产部分添加您将使用的图像。

Dart

assets:
  - images/slider1.jpg
  - images/slider2.png
  - images/slider3.jpeg

现在，按照以下步骤在我们的Flutter应用程序中实现 On Boarding Screen：

第 1 步：导航到 main。 dart() 文件并返回 Material App()

首先，我们在 main函数中的 runApp 中声明了MyApp() 。然后我们为 MyApp 创建了StatefulWidget ，其中我们返回了MaterialApp()。在这个 MaterialApp() 中，我们给了我们的应用程序的标题，然后将我们的应用程序的主题声明为棕色。然后我们给出了首页的第一个屏幕或滑块应用程序： HomePage()。

Dart

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}
 
class _HomeScreenState extends State {
 
  
  @override
  Widget build(BuildContext context) {
    return Scaffold();

第 2 步：在此 Scaffold() 中创建 PageView

我们在Scaffold()的主体中给出了Column 。在此列中，我们提供了由扩展小部件包装的PageView 构建器组成的子项。 PageView 用于使我们的屏幕水平滚动，这取决于添加到它的项目数量。在此页面视图中，我们将滚动方向指定为水平方向， item Count 表示页面数。我们已经为onPageChanged()声明了 vale。我们在其中提供了价值。之后我们返回了由图像、标题和描述组成的 Slider。之后，我们在Expanded()小部件之外创建了Container() ，用于在Row 中构建特定高度和宽度的点。

Dart

@override
  Widget build(BuildContext context) {
    return Scaffold(
 
      // Column created
      body: Column(
        children: [
          Expanded(
             
            // PageView Builder
            child: PageView.builder(
                scrollDirection: Axis.horizontal,
                onPageChanged: (value){
                  setState(() {
                    currentIndex = value;
                  });
                },
                itemCount: slides.length,
                itemBuilder: (context, index){
                   
                  // Contents of Slider that we
                  // created in Modal Class
                  return Slider(
                    image: slides[index].getImage(),
                    title: slides[index].getTitle(),
                    description: slides[index].getDescription(),
                  );
                }
            ),
          ),
           
          // Container created for dots
          Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(slides.length, (index) => buildDot(index, context),
              ),
            ),
          ),

第 3 步：从那个 Container() 中提取 build Dot()

之后，我们从那个 Container() 中提取了buildDot( ) 并返回了另一个 Container()。在其中我们给定了高度、宽度和boxDecoration() ，其中我们给了我们的点的颜色和边界半径。

Dart

Container buildDot(int index, BuildContext context){
 
  // Another Container returned
    return Container(
      height: 10,
      width: currentIndex == index ? 25 : 10,
      margin: EdgeInsets.only(right: 5),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.green,
      ),
    );
  }
}

第 4 步：创建另一个 Container()

之后，我们给出了另一个 Container()，在其中我们给出了Flat Button()，在其中我们为onPressed()方法声明了条件。单击按钮后，滑块将出现，然后用户将被导航到下一个屏幕。之后，我们为按钮提供了文本颜色和圆形半径。

Dart

Container(
           height: 60,
           margin: EdgeInsets.all(40),
           width: double.infinity,
           color: Colors.green,
   
           // Button
           child: FlatButton(
             child: Text(
                 currentIndex == slides.length - 1 ? "Continue": "Next"),
             onPressed: (){
               if(currentIndex == slides.length - 1){
                  
                 // Navigate to next screen
                 Navigator.pushReplacement(context, MaterialPageRoute(builder: (context)=> Screen1()),
                 );
               }
               _controller.nextPage(duration: Duration(milliseconds: 100), curve: Curves.bounceIn);
             },
             textColor: Colors.white,
 
             // Border radius to button
             shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(25),
             ),
           ),
 
         ),

第 5 步：为 Slider 类创建无状态小部件

之后，我们为在PageView 中返回的 Slider 类创建了Stateless() Widget 。建设者。其中我们返回了Container() ，它由Column()组成， Column()包含我们在Column() 中排列的图像标题和描述。

Dart

class Slider extends StatelessWidget {
  String image,title,description;
   
  //Constructor created
  Slider({this.image, this.title, this.description});
 
  @override
  Widget build(BuildContext context) {
    return Container(
 
      // column containing image
      // title and description
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image(image: AssetImage(image)),
          SizedBox(height: 20),
          Text(title, style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),),
          SizedBox(height: 12),
          Text(description),
          SizedBox(height: 25),
        ],
      ),
    );
  }
}

第 6 步：创建SliderModel()类

之后，我们创建了SliderModel()类，其中包含将在页面视图中显示的图像、标题和描述列表。在这个类中，我们为三个变量 image、title 和 description 创建了构造函数。然后我们已经为这个变量声明了 getter 和 setter 方法。

Dart

class SliderModel{
  String image;
  String title;
  String description;
 
   
  // Constructor for variables
  SliderModel({this.title, this.description, this.image});
 
  void setImage(String getImage){
    image = getImage;
  }
 
  void setTitle(String getTitle){
    title = getTitle;
  }
  void setDescription(String getDescription){
    description = getDescription;
  }
 
  String getImage(){
    return image;
  }
 
   String  getTitle(){
    return title;
   }
   String getDescription(){
    return description;
   }
  }
 
  // List created
  List getSlides(){
  List slides = new List();
  SliderModel sliderModel = new SliderModel();
   
   // Item 1
   sliderModel.setImage("images/slider2.png");
   sliderModel.setTitle("Copper Articles");
   sliderModel.setDescription("Interested in buying Copper Handicrafts");
   slides.add(sliderModel);
 
   sliderModel = new SliderModel();
 
  // Item 2
  sliderModel.setImage("images/slider2.png");
  sliderModel.setTitle("Copper Articles");
  sliderModel.setDescription("Interested in buying Copper Handicrafts");
  slides.add(sliderModel);
 
  sliderModel = new SliderModel();
 
  // Item 3
  sliderModel.setImage("images/slider2.png");
  sliderModel.setTitle("Copper Articles");
  sliderModel.setDescription("Interested in buying Copper Handicrafts");
  slides.add(sliderModel);
 
  sliderModel = new SliderModel();
  return slides;
}

SliderModel() 类定义如下：

Dart

class SliderModel{
  String image;
 
// images given
  SliderModel({this.image});
 
// setter for image
  void setImage(String getImage){
    image = getImage;
  }
 
// getter for image
  String getImage(){
    return image;
  }
  }
    List getSlides(){
  List slides = new List();
  SliderModel sliderModel = new SliderModel();
   
  // 1
      sliderModel.setImage("images/slider2.png");
      slides.add(sliderModel);
 
      sliderModel = new SliderModel();
 
  // 2
  sliderModel.setImage("images/slider2.png");
  slides.add(sliderModel);
 
  sliderModel = new SliderModel();
 
  // 3
  sliderModel.setImage("images/slider2.png");
  slides.add(sliderModel);
 
  sliderModel = new SliderModel();
  return slides;
}

在此阶段，主页如下所示：

Dart

import 'package:flutter/material.dart';
import 'package:kc0035a_flutter_customer_app/Screen1.dart';
import 'package:kc0035a_flutter_customer_app/data/SliderModel.dart';
 
class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}
 
class _HomeScreenState extends State {
 
  List slides = new List();
  int currentIndex = 0;
  PageController _controller;
 
  @override
  void initState() {
 
    // TODO: implement initState
    super.initState();
    _controller = PageController(initialPage: 0);
    slides = getSlides();
  }
  @override
  void dispose(){
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Geeks for Geeks"),
      ),
      body: Column(
        children: [
          Expanded(
            child: PageView.builder(
                scrollDirection: Axis.horizontal,
                onPageChanged: (value){
                  setState(() {
                    currentIndex = value;
                  });
                },
                itemCount: slides.length,
                itemBuilder: (context, index){
 
                  // contents of slider
                  return Slider(
                    image: slides[index].getImage(),
                
                  );
                }
            ),
          ),
          Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(slides.length, (index) => buildDot(index, context),
              ),
            ),
          ),
          Container(
            height: 60,
            margin: EdgeInsets.all(40),
            width: double.infinity,
            color: Colors.green,
            child: FlatButton(
              child: Text(
                  currentIndex == slides.length - 1 ? "Continue": "Next"),
              onPressed: (){
                if(currentIndex == slides.length - 1){
                  Navigator.pushReplacement(context, MaterialPageRoute(builder: (context)=> Screen1()),
                  );
                }
                _controller.nextPage(duration: Duration(milliseconds: 100), curve: Curves.bounceIn);
              },
              textColor: Colors.white,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(25),
              ),
            ),
 
          ),
        ],
      ),
      backgroundColor: Colors.white,
    );
  }
 
  // container created for dots
  Container buildDot(int index, BuildContext context){
    return Container(
      height: 10,
      width: currentIndex == index ? 25 : 10,
      margin: EdgeInsets.only(right: 5),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.green,
      ),
    );
  }
}
 
// ignore: must_be_immutable
// slider declared
class Slider extends StatelessWidget {
  String image;
 
  Slider({this.image});
 
  @override
  Widget build(BuildContext context) {
    return Expanded(
 
      // contains container
      child: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
 
            // image given in slider
            Image(image: AssetImage(image)),
            SizedBox(height: 25),
          ],
        ),
      ),
    );
  }
}

主要的。dart文件：

Dart

import 'package:flutter/material.dart';
import 'package:kc0035a_flutter_customer_app/SplashScreen.dart';
 
void main() {
  runApp(MyApp());
}
// stateless widget created
class MyApp extends StatelessWidget {
 
  // This widget is the root
  // of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
 
      // first screen of app
      home: HomeScreen(),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！