Diseño de la interfaz de usuario (UI)

[JJSS2609]

1.- Diseñar la estructura y flujo de la página principal. 2.- Crear la página de inicio de sesión y registro. 3.- Diseñar el panel de usuario con la biblioteca de libros. 4.- Crear una página para explorar y buscar nuevos libros.

[JJSS2609]

[JJSS2609]

// main.dart import 'package:flutter/material.dart';

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

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

class LoginScreen extends StatelessWidget { final TextEditingController _emailController = TextEditingController(); final TextEditingController _passwordController = TextEditingController();

LoginScreen({super.key});

@override Widget build(BuildContext context) { return Scaffold( body: Stack( children: [ // Imagen de fondo Container( decoration: const BoxDecoration( image: DecorationImage( image: AssetImage('images\fondo.jpg'),// imagen en assets fit: BoxFit.cover, ), ), ),

      Center(
        child: Container(
          width: 350, 
          padding: const EdgeInsets.all(16.0),
          decoration: BoxDecoration(
            color: Colors.white.withOpacity(0.9), 
            borderRadius: BorderRadius.circular(15.0),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.5),
                blurRadius: 10,
                offset: const Offset(0, 5),
              ),
            ],
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min, 
            children: [
              const Text(
                'Login',
                style: TextStyle(
                  fontSize: 28,
                  fontWeight: FontWeight.bold,
                  color: Colors.blueAccent,
                ),
              ),
              const SizedBox(height: 40),
              TextField(
                controller: _emailController,
                decoration: InputDecoration(
                  labelText: 'Email',
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  prefixIcon: Icon(Icons.email),
                ),
              ),
              const SizedBox(height: 20),
              TextField(
                controller: _passwordController,
                decoration: InputDecoration(
                  labelText: 'Password',
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  prefixIcon: Icon(Icons.lock),
                ),
                obscureText: true,
              ),
              SizedBox(height: 40),
              ElevatedButton(
                onPressed: () {

                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.blueAccent,
                  padding: const EdgeInsets.symmetric(horizontal: 100, vertical: 20),
                  textStyle: TextStyle(fontSize: 18),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                ),
                child: Text('Login'),
              ),
              SizedBox(height: 20),
              GestureDetector(
                onTap: () {

                },
                child: const Text(
                  '¿No tienes cuenta? Regístrate',
                  style: TextStyle(
                    color: Colors.blueAccent,
                    fontSize: 16,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    ],
  ),
);

} }

[jairoserrano]

al repositorio, acá no se monta código.