Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Tela responsiva Flutter

Bom dia,

Como faço para esse código

return Scaffold(body: Center( child: Container( color: Colors.white, padding: const EdgeInsets.all(40), child: Column( children: [ SizedBox(height: 350, child: Image.asset("images/logo_agricultura.png",fit:BoxFit.contain), ), SizedBox(height: 40),usuarioField, SizedBox(height: 20),senhaField, SizedBox(height: 30),buttonLogin, SizedBox(height: 35),EsqueceuSenha, ], ), ), ), );

Ficar responsivo de acordo com o layout do dispositvo móvel e com a rotação do mesmo.

2 respostas

Oi Flavio, consegue mandar o código todo da tela para darmos uma olhada e entender o contexto da construção dele? Assim fica mais tranquilo de entender como está e o que podemos melhorar para gerar responsividade :)

solução!

Bom dia,

Código abaixo.

import 'dart:ui';

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget { @override _LoginPageState createState() => _LoginPageState(); }

class _LoginPageState extends State { TextStyle sytle = TextStyle(fontFamily: 'Montserrat',fontSize: 20.0);

@override Widget build(BuildContext context) {

_onClickLogin(BuildContext context) {

  showDialog(context: context,
    builder: (context){
      return AlertDialog(
          title:Text("Erro"),
          content: Text("Login e/ou Senha inválido(s)"),
          actions : <Widget>[
            FlatButton(
                child: Text("OK"),
                onPressed: () {
                  Navigator.pop(context);
                }
            )
          ]
      );
    },
  );
}

final usuarioField = TextFormField(
  cursorColor: Theme.of(context).cursorColor,
  obscureText: false,
  style: sytle,
  decoration: InputDecoration(
    labelText: 'Usuário',
    border: OutlineInputBorder(),
    suffixIcon: Icon(
      Icons.supervisor_account,
    ),
    contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),


  ),

);

final senhaField = TextFormField(
  cursorColor: Theme.of(context).cursorColor,
  obscureText: true,
  style: sytle,
  decoration: InputDecoration(
    labelText: 'Senha',
    border: OutlineInputBorder(),
    suffixIcon: Icon(
      Icons.login,
    ),
   contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
  ),

);

final buttonLogin = ButtonTheme(
  minWidth: MediaQuery.of(context).size.width,
  padding: EdgeInsets.fromLTRB(20, 15, 20, 15),
  child: RaisedButton(
    color: Color(0xff01A0C7),
    child: Text("Login",textAlign: TextAlign.center,
    style: sytle.copyWith(
      color: Colors.white,
      fontWeight: FontWeight.bold
    ),
    ),
    onPressed: (){
     _onClickLogin(context);
    },
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(30)
    ),
  ),
);

final EsqueceuSenha = TextButton(
    onPressed:(){},
    child: Text("Esqueceu a senha?",textAlign: TextAlign.center,
      style: sytle.copyWith(
          color: Colors.black,
          fontWeight: FontWeight.bold
      ),
    ),
);


return Scaffold(
  appBar: AppBar(
  title: Text("Sistema de Aprovação de SC - RISA S/A")
  ),
  body: Center(
    child: Container(
      color: Colors.white,
      padding: const EdgeInsets.all(40),
      child: Column(
        children: <Widget>[
           SizedBox(height: 350,
           child: Image.asset("images/logo_agricultura.png",fit:BoxFit.contain),
           ),
          SizedBox(height: 40),usuarioField,
          SizedBox(height: 20),senhaField,
          SizedBox(height: 30),buttonLogin,
        SizedBox(height: 35),EsqueceuSenha,
        ],
      ),
    ),
),
);

} }