-1

Estou desenvolvendo uma página de edição de usuários, e estou com dificuldades para alinhar os items que se ajustam de acordo com o tamanho do texto deixando uma sensação de "desalinhamento" no layout.

Segue o código completo da página:

import 'package:flutter/material.dart';

class PerfilEdit extends StatefulWidget {
  @override
  _PerfilEditState createState() => _PerfilEditState();
}

class _PerfilEditState extends State<PerfilEdit> {
  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    final appBar = AppBar(
      leading: Icon(
        Icons.perm_identity,
        color: Colors.white,
        size: mediaQuery.size.height * 0.058,
      ),
      backgroundColor: Color.fromRGBO(163, 199, 204, 1),
      title: Text(
        'Editar Perfil',
        style: TextStyle(
            fontSize: 28,
            fontFamily: 'Oxygen',
            fontWeight: FontWeight.bold,
            color: Colors.white),
      ),
      centerTitle: true,
    );
    final availableHeigh = mediaQuery.size.height -
        appBar.preferredSize.height -
        mediaQuery.padding.top;

    return Scaffold(
      appBar: appBar,
      body: Column(
        children: [
          Row(
            children: [
              Flexible(
                flex: 1,
                child: IconButton(
                  icon: Icon(Icons.arrow_back_ios),
                  color: Color.fromRGBO(239, 224, 212, 1),
                  onPressed: () {
                    print('clicked');
                  },
                  iconSize: mediaQuery.size.height * 0.05,
                ),
              ),
              Flexible(
                flex: 6,
                fit: FlexFit.tight,
                child: Center(
                  child: Text(
                    'Nome do Profissional',
                    style: TextStyle(
                      fontSize: 20,
                      color: Color.fromRGBO(241, 143, 1, 1),
                    ),
                  ),
                ),
              ),
              Flexible(
                child: SizedBox(),
              )
            ],
          ),
          Container(
            width: mediaQuery.size.width * 0.98,
            height: availableHeigh * 0.80,
            padding: const EdgeInsets.all(5),
            child: LayoutBuilder(
              builder: (ctx, constraints) {
                return Card(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                  elevation: 3,
                  child: Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Flexible(
                            flex: 3,
                            child: Column(
                              children: [
                                Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceAround,
                                  children: [
                                    Text('Nome'),
                                    IconButton(
                                      icon: Icon(Icons.edit_outlined),
                                      color: Color.fromRGBO(241, 143, 1, 1),
                                      onPressed: () {},
                                    ),
                                  ],
                                ),
                                Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceAround,
                                  children: [
                                    Text('Idade'),
                                    IconButton(
                                      icon: Icon(Icons.edit_outlined),
                                      color: Color.fromRGBO(241, 143, 1, 1),
                                      onPressed: () {},
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ),
                          Flexible(
                            flex: 1,
                            child: Center(
                              child: Container(
                                width: constraints.maxWidth * 0.1,
                                height: constraints.maxHeight * 0.1,
                                decoration: BoxDecoration(
                                  border: Border.all(
                                    width: 1,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                      Row(
                        children: [
                          Flexible(
                            flex: 3,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Text('Sexo'),
                                IconButton(
                                  icon: Icon(Icons.edit_outlined),
                                  color: Color.fromRGBO(241, 143, 1, 1),
                                  onPressed: () {},
                                ),
                              ],
                            ),
                          ),
                          Flexible(
                            flex: 1,
                            child: SizedBox(),
                          ),
                        ],
                      ),
                      Row(
                        children: [
                          Flexible(
                            flex: 3,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Text('Endereço'),
                                IconButton(
                                  icon: Icon(Icons.edit_outlined),
                                  color: Color.fromRGBO(241, 143, 1, 1),
                                  onPressed: () {},
                                ),
                              ],
                            ),
                          ),
                          Flexible(
                            flex: 1,
                            child: SizedBox(),
                          ),
                        ],
                      ),
                      Row(
                        children: [
                          Flexible(
                            flex: 3,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Text('E-mail'),
                                IconButton(
                                  icon: Icon(Icons.edit_outlined),
                                  color: Color.fromRGBO(241, 143, 1, 1),
                                  onPressed: () {},
                                ),
                              ],
                            ),
                          ),
                          Flexible(
                            flex: 1,
                            child: SizedBox(),
                          ),
                        ],
                      ),
                      Row(
                        children: [
                          Flexible(
                            flex: 3,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Text('Preferências'),
                                IconButton(
                                  icon: Icon(Icons.edit_outlined),
                                  color: Color.fromRGBO(241, 143, 1, 1),
                                  onPressed: () {},
                                ),
                              ],
                            ),
                          ),
                          Flexible(
                            flex: 1,
                            child: SizedBox(),
                          ),
                        ],
                      ),
                      Divider(
                        color: Colors.black.withAlpha(60),
                      ),
                      Row(
                        children: [
                          Flexible(
                            flex: 3,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Text('Formações'),
                                IconButton(
                                  icon: Icon(Icons.edit_outlined),
                                  color: Color.fromRGBO(241, 143, 1, 1),
                                  onPressed: () {},
                                ),
                              ],
                            ),
                          ),
                          Flexible(
                            flex: 1,
                            child: SizedBox(),
                          ),
                        ],
                      ),
                      Row(
                        children: [
                          Flexible(
                            flex: 3,
                            child: Row(
                              
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                Text('Certificados'),
                                IconButton(
                                  icon: Icon(Icons.edit_outlined),
                                  color: Color.fromRGBO(241, 143, 1, 1),
                                  onPressed: () {},
                                ),
                              ],
                            ),
                          ),
                          Flexible(
                            flex: 1,
                            child: SizedBox(),
                          ),
                        ],
                      ),
                    ],
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

Preciso que cada ícone de edição fique abaixo um do outro, mas com o código acima o meu resultado é esse:

inserir a descrição da imagem aqui

1 Resposta 1

1

Fiz um pequeno exemplo de como você pode estruturar pra conseguir o que quer:

Se quiser pode rodar no dartpad.

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: const [
        RowItem(text: "Nome", icon: Icons.edit),
        RowItem(text: "Idade", icon: Icons.edit),
        RowItem(text: "Sexo", icon: Icons.edit),
        RowItem(text: "Endereço", icon: Icons.edit),
        RowItem(text: "E-mail", icon: Icons.edit),
      ],
    );
  }
}

class RowItem extends StatelessWidget {
  const RowItem({required this.text, required this.icon});

  final String text;
  final IconData icon;

  @override
  Widget build(BuildContext context) {
    return Card(
        child: Container(
            width: MediaQuery.of(context).size.width,
            padding: const EdgeInsets.all(10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Expanded(
                  child: Text(text),
                ),
                Icon(icon),
                SizedBox(width: 200)
              ],
            )));
  }
}
2
  • Ótima solução, funcionou aqui com um padding. OBS: acha que seria prudente criar um RowItem igual vc fez no exemplo acima? 14/10/2021 às 20:28
  • 1
    Quando você tem um código que se repete, é sempe bom separar em um Widget customizado a parte. Eu aconselharia criar um RowItem sim 14/10/2021 às 21:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .