Login Page com Scroll

readme.md

Login Page com Scroll

Created with <3 with dartpad.dev.

main.dart

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';

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

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

class Login extends StatefulWidget {
  const Login({super.key});

  @override
  State<Login> createState() => _LoginState();
}

class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    debugPrint('setState executado');
    return Scaffold(
      appBar: AppBar(
        title: const Text("Login"),
      ),
      body: Container(
        padding: const EdgeInsets.all(20),
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            const Padding(
              padding: EdgeInsets.all(20),
              child: Text(
                "Olá Fernanda Pereira Goes!",
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.w400),
              ),
            ),
            const Padding(
              padding: EdgeInsets.all(20),
              child: Text(
                "Este é o seu primeiro acesso!\nPara continuar é preciso alterar a sua senha\n",
                textAlign: TextAlign.center,
              ),
            ),
            Expanded(
              child: ListView(
                children: const <Widget>[
                  TextFieldWidget(label: "Senha", obscured: true),
                  SizedBox(height: 20),
                  TextFieldWidget(label: "Confirmar Senha", obscured: true),
                  Padding(
                    padding: EdgeInsets.all(20),
                    child: Text("Sua senha deve conter no mínimo 6 caracteres"),
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(20),
              child: SizedBox(
                height: 40,
                width: MediaQuery.of(context).size.width * 0.8,
                child: ElevatedButton(
                  child: const Text("Salvar e Continuar"),
                  onPressed: () {},
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class TextFieldWidget extends StatefulWidget {
  const TextFieldWidget({
    super.key,
    required this.label,
    this.obscured = false,
    this.borderRadius = 8,
  });

  final String label;
  final bool obscured;
  final double borderRadius;

  @override
  State<TextFieldWidget> createState() => _TextFieldWidgetState();
}

class _TextFieldWidgetState extends State<TextFieldWidget> {
  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(
        label: Text(widget.label),
        border: OutlineInputBorder(
            borderRadius:
                BorderRadius.all(Radius.circular(widget.borderRadius))),
      ),
      obscureText: widget.obscured,
    );
  }
}