Flutter 新闻客户端 - 03 静态路由、组件抽取、登录注册界面

最新推荐文章于 2023-06-23 16:49:10 发布

独立开发者_猫哥

最新推荐文章于 2023-06-23 16:49:10 发布

阅读量548

点赞数

分类专栏： Flutter 新闻客户端文章标签： flutter

本文链接：https://blog.csdn.net/weixin_42320543/article/details/107250137

版权

该博客介绍了如何使用Flutter构建新闻客户端的登录和注册界面，包括静态路由配置、组件抽取，如输入框、扁平按钮、社交登录按钮和toast提示框的实现，以及数据有效性的验证。同时，讲解了程序结构和色彩常量的维护，并提供了蓝湖设计稿和源代码链接。

摘要由CSDN通过智能技术生成

B站视频

https://www.bilibili.com/video/BV1rE411G7se

本节目标

静态路由
带阴影的椭圆图标
输入有效性校验
组件抽取方法
通用组件、业务组件
程序目录组织
抽取透明导航栏
toast 提示组件

1 静态路由

1.1 定义静态路由

登录页 lib/pages/sign_in/sign_in.dart
注册页 lib/pages/sign_up/sign_up.dart
静态路由 lib/routes.dart

import 'package:flutter_ducafecat_news/pages/sign_in/sign_in.dart';
import 'package:flutter_ducafecat_news/pages/sign_up/sign_up.dart';

/// 静态路由
var staticRoutes = {
  "/sign-in": (context) => SignInPage(), // 登录
  "/sign-up": (context) => SignUpPage(), // 注册
};

1.2 注册静态路由

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_ducafecat_news/pages/welcome/welcome.dart';
import 'package:flutter_ducafecat_news/routes.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ducafecat.tech',
      home: WelcomePage(),
      routes: staticRoutes,
      debugShowCheckedModeBanner: false,
    );
  }
}

2 登录界面

2.1 维护色彩常量

lib/common/values/colors.dart

import 'dart:ui';

class AppColors {
  /// 主背景 白色
  static const Color primaryBackground = Color.fromARGB(255, 255, 255, 255);

  /// 主文本 灰色
  static const Color primaryText = Color.fromARGB(255, 45, 45, 47);

  /// 主控件-背景 蓝色
  static const Color primaryElement = Color.fromARGB(255, 41, 103, 255);

  /// 主控件-文本 白色
  static const Color primaryElementText = Color.fromARGB(255, 255, 255, 255);

  // *****************************************

  /// 第二种控件-背景色 淡灰色
  static const Color secondaryElement = Color.fromARGB(255, 246, 246, 246);

  /// 第二种控件-文本 浅蓝色
  static const Color secondaryElementText = Color.fromARGB(255, 41, 103, 255);

  // *****************************************

  /// 第三种控件-背景色 石墨色
  static const Color thirdElement = Color.fromARGB(255, 45, 45, 47);
}

2.2 程序结构

lib/pages/sign_in/sign_in.dart

import 'package:flutter/material.dart';
import 'package:flutter_ducafecat_news/common/utils/utils.dart';
import 'package:flutter_ducafecat_news/common/values/values.dart';
import 'package:flutter_ducafecat_news/common/widgets/widgets.dart';

class SignInPage extends StatefulWidget {
  SignInPage({Key key}) : super(key: key);

  @override
  _SignInPageState createState() => _SignInPageState();
}

class _SignInPageState extends State<SignInPage> {

  // logo
  Widget _buildLogo() {
    return Container();
  }

  // 登录表单
  Widget _buildInputForm() {
    return Container();
  }

  // 第三方登录
  Widget _buildThirdPartyLogin() {
    return Container();
  }

  // 注册按钮
  Widget _buildSignupButton() {
    return Container();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Center(
        child: Column(
          children: <Widget>[
            _buildLogo(),
            _buildInputForm(),
            Spacer(),
            _buildThirdPartyLogin(),
            _buildSignupButton(),
          ],
        ),
      ),
    );
  }
}

2.3 画带阴影的椭圆图标

lib/pages/sign_in/sign_in.dart

  // logo
  Widget _buildLogo() {
    return Container(
      width: duSetWidth(110),
      margin: EdgeInsets.only(top: duSetHeight(40 + 44.0)), // 顶部系统栏 44px
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,