Flutter 登录页-02

效果图

组件结构

源码下载

依赖包

• circle_checkbox

资源

• 图片
• 字体

代码

pubspec.yaml

name: login_02
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.16.1 <3.0.0"

# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  circle_checkbox: ^0.0.2+1

dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^1.0.0

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg
  assets:
    - assets/images/

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages
  fonts:
    - family: SFUIText
      fonts:
        - asset: assets/fonts/SFUI-Text.ttf
    - family: SFUIDisplay
      fonts:
        - asset: assets/fonts/SFUIDisplay.ttf
    - family: SFProDisplay
      fonts:
        - asset: assets/fonts/SFProDisplay.ttf

main.dart

import 'package:flutter/material.dart';
import 'package:login_34/homepage.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

homepage.dart

import 'package:circle_checkbox/redev_checkbox.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _check = false;
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            width: double.infinity,
            height: 240,
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/bg.png'),
                fit: BoxFit.fill,
                colorFilter:
                    ColorFilter.mode(Color(0xff262628), BlendMode.hardLight),
              ),
            ),
          ),
          SingleChildScrollView(
            padding: const EdgeInsets.symmetric(horizontal: 29),
            child: Form(
              key: _formKey,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const SizedBox(height: 180),
                  // 头像
                  Center(
                    child: Container(
                      height: 103,
                      width: 103,
                      decoration: BoxDecoration(
                        image: const DecorationImage(
                          image: AssetImage('assets/images/Avatar.png'),
                          fit: BoxFit.fill,
                        ),
                        borderRadius: BorderRadius.circular(100),
                      ),
                    ),
                  ),
                  const SizedBox(height: 27),
                  // 用户名输入框
                  TextFormField(
                    decoration: InputDecoration(
                      border: OutlineInputBorder(
                        borderSide: const BorderSide(
                          color: Color(0xffefefef),
                        ),
                        borderRadius: BorderRadius.circular(100),
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderSide: const BorderSide(
                          color: Color(0xffefefef),
                        ),
                        borderRadius: BorderRadius.circular(100),
                      ),
                      errorBorder: OutlineInputBorder(
                        borderSide: const BorderSide(
                          color: Color(0xffefefef),
                        ),
                        borderRadius: BorderRadius.circular(100),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderSide: const BorderSide(
                          color: Color(0xffefefef),
                        ),
                        borderRadius: BorderRadius.circular(100),
                      ),
                      prefixIcon: const Icon(
                        Icons.account_circle,
                        color: Colors.black,
                      ),
                      labelText: 'Full Name',
                      labelStyle: const TextStyle(
                        fontFamily: 'SFUIDisplay',
                        fontSize: 14,
                        fontWeight: FontWeight.w300,
                        color: Color(0xff9b9b9b),
                      ),
                    ),
                    style: const TextStyle(
                      fontFamily: 'SFUIDisplay',
                      fontSize: 14,
                      fontWeight: FontWeight.w300,
                      color: Color(0xff9b9b9b),
                    ),
                  ),
                  const SizedBox(height: 20),
                  // Email输入框
                  TextFormField(
                    decoration: InputDecoration(
                      border: OutlineInputBorder(
                        borderSide: const BorderSide(
                          color: Color(0xffefefef),
                        ),
                        borderRadius: BorderRadius.circular(100),
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderSide: const BorderSide(
                          color: Color(0xffefefef),
                        ),
                        borderRadius: BorderRadius.circular(100),
                      ),
                      errorBorder: OutlineInputBorder(
                        borderSide: const BorderSide(
                          color: Color(0xffefefef),
                        ),
                        borderRadius: BorderRadius.circular(100),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderSide: const BorderSide(
                          color: Color(0xffefefef),
                        ),
                        borderRadius: BorderRadius.circular(100),
                      ),
                      prefixIcon: const Icon(
                        Icons.email,
                        color: Color(0xffd0d0d0),
                      ),
                      labelText: 'Email',
                      labelStyle: const TextStyle(
                        fontFamily: 'SFUIDisplay',
                        fontSize: 14,
                        fontWeight: FontWeight.w300,
                        color: Color(0xff9b9b9b),
                      ),
                    ),
                    style: const TextStyle(
                      fontFamily: 'SFUIDisplay',
                      fontSize: 14,
                      fontWeight: FontWeight.w300,
                      color: Color(0xff9b9b9b),
                    ),
                  ),
                  const SizedBox(height: 20),
                  // 密码输入看
                  TextFormField(
                    decoration: InputDecoration(
                      border: OutlineInputBorder(
                        borderSide: const BorderSide(
                          color: Color(0xffefefef),
                        ),
                        borderRadius: BorderRadius.circular(100),
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderSide: const BorderSide(
                          color: Color(0xffefefef),
                        ),
                        borderRadius: BorderRadius.circular(100),
                      ),
                      errorBorder: OutlineInputBorder(
                        borderSide: const BorderSide(
                          color: Color(0xffefefef),
                        ),
                        borderRadius: BorderRadius.circular(100),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderSide: const BorderSide(
                          color: Color(0xffefefef),
                        ),
                        borderRadius: BorderRadius.circular(100),
                      ),
                      prefixIcon: const Icon(
                        Icons.lock,
                        color: Colors.black,
                      ),
                      labelText: 'Password',
                      labelStyle: const TextStyle(
                        fontFamily: 'SFUIDisplay',
                        fontSize: 14,
                        fontWeight: FontWeight.w300,
                        color: Color(0xff9b9b9b),
                      ),
                    ),
                    style: const TextStyle(
                      fontFamily: 'SFUIDisplay',
                      fontSize: 14,
                      fontWeight: FontWeight.w300,
                      color: Color(0xff9b9b9b),
                    ),
                    obscureText: true,
                  ),
                  const SizedBox(height: 38),
                  // 复选框
                  Row(
                    children: [
                      CircleCheckbox(
                        value: _check,
                        onChanged: (value) {
                          setState(() {
                            _check = !_check;
                          });
                        },
                        activeColor: const Color(0xfff05522),
                      ),
                      const SizedBox(height: 10),
                      RichText(
                        text: const TextSpan(
                          text: "I agree to the",
                          style: TextStyle(
                            fontFamily: 'SFUIDisplay',
                            fontSize: 13,
                            color: Color(0xff9b9b9b),
                          ),
                          children: [
                            TextSpan(
                              text: ' Terms and Conditions',
                              style: TextStyle(
                                fontFamily: 'SFUIDisplay',
                                fontSize: 13,
                                color: Color(0xfff05522),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 42),
                  // 按钮
                  MaterialButton(
                    onPressed: () {},
                    child: const Text(
                      "SIGN UP",
                      style: TextStyle(
                        fontFamily: "SFUIText",
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                    color: const Color(0xfff05522),
                    height: 50,
                    minWidth: double.infinity,
                    elevation: 0,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(100),
                    ),
                  ),
                  const SizedBox(height: 28),
                  RichText(
                    text: const TextSpan(
                      text: "Already have an account?",
                      style: TextStyle(
                        fontFamily: 'SFUIDisplay',
                        fontSize: 13,
                        color: Color(0xff9b9b9b),
                      ),
                      children: [
                        TextSpan(
                          text: ' Sign in',
                          style: TextStyle(
                            fontFamily: 'SFUIDisplay',
                            fontSize: 13,
                            color: Color(0xfff05522),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          const Positioned(
            top: 40,
            left: 40,
            child: Icon(
              Icons.arrow_back,
              color: Colors.white,
            ),
          ),
        ],
      ),
    );
  }
}