Scribd
Upload
5 views2 pages

Flutter Inicial Page UI Design

The document is a Flutter widget implementation for an initial page of an application. It features a gradient background, a circular glow behind the logo, and two buttons for 'Login' and 'Register' that navigate to their respective pages. The layout is responsive, adjusting to the screen size using MediaQuery for positioning and sizing elements.

Uploaded by

ellen.caroliny
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views2 pages

Flutter Inicial Page UI Design

The document is a Flutter widget implementation for an initial page of an application. It features a gradient background, a circular glow behind the logo, and two buttons for 'Login' and 'Register' that navigate to their respective pages. The layout is responsive, adjusting to the screen size using MediaQuery for positioning and sizing elements.

Uploaded by

ellen.caroliny
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

import 'package:flutter/material.

dart';

class InicialPage extends StatefulWidget {


const InicialPage({[Link]});

@override
State<InicialPage> createState() => _InicialPageState();
}

class _InicialPageState extends State<InicialPage> {


@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: [Link],
end: [Link],
colors: [
[Link](255, 179, 242, 252),
[Link](255, 76, 148, 153),
],
),
),
),

// Brilho atrás da logo


Positioned(
top: [Link](context).[Link] * 0.2,
left: [Link](context).[Link] * 0.25,
child: Container(
width: [Link](context).[Link] * 0.5,
height: [Link](context).[Link] * 0.5,
decoration: BoxDecoration(
shape: [Link],
color: [Link](0.2),
),
),
),

// Conteúdo principal
Center(
child: Column(
mainAxisAlignment: [Link],
children: [
// Logo com espaçamento melhorado
SizedBox(
width: [Link](context).[Link] * 0.6,
child: [Link]('assets/images/[Link]'),
),

const SizedBox(height: 50),

// Botão Login
SizedBox(
width: [Link](context).[Link] * 0.6,
child: ElevatedButton(
onPressed: () {
[Link](context, '/login');
},
style: [Link](
backgroundColor: const Color(0xFF266B70),
padding: const [Link](vertical: 16),
shape: RoundedRectangleBorder(
borderRadius: [Link](8),
),
elevation: 4,
),
child: const Text(
'Login',
style: TextStyle(
fontSize: 20,
color: [Link],
fontFamily: 'Poppins',
),
),
),
),

const SizedBox(height: 20),

// Botão Cadastro
SizedBox(
width: [Link](context).[Link] * 0.6,
child: OutlinedButton(
onPressed: () {
[Link](context, '/cadastro');
},
style: [Link](
side: const BorderSide(color: [Link]),
padding: const [Link](vertical: 16),
shape: RoundedRectangleBorder(
borderRadius: [Link](8),
),
),
child: const Text(
'Cadastre-se',
style: TextStyle(
fontSize: 20,
color: [Link],
fontFamily: 'Poppins',
),
),
),
),
],
),
),
],
),
);
}
}

You might also like