0

Buenos días estimados.

Estoy empezando con flutter.

Realice una interfaz muy básica para poder entender como es que funciona el ListView y hasta ahora ya se muestran los registros, pero el problema que tengo es que no puedo hacer Scroll para visualizar todos los registros que tengo. Se puede hacer Scroll pero si empiezo a bajar desde el el formulario del filtro, pero si hago Scroll desde el ListView no baja.

Como es que puedo solucionar para que se pueda hacer Scroll, no importa desde donde este posicionado.

Les comparto el código

import 'package:esscalo/layout/menu_page.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const CertificadosPage());
}

class CertificadosPage extends StatelessWidget {
  const CertificadosPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'KindaCode.com',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  DateTimeRange? _selectedDateRange;

  // This function will be triggered when the floating button is pressed
  void _show() async {
    final DateTimeRange? result = await showDateRangePicker(
      context: context,
      firstDate: DateTime(2022, 1, 1),
      lastDate: DateTime(2030, 12, 31),
      currentDate: DateTime.now(),
      saveText: 'Done',
    );

    if (result != null) {
      // Rebuild the UI
      print(result.start.toString());
      setState(() {
        _selectedDateRange = result;
      });
    }
  }

  List<String> images = [
    "attach_file",
    "attach_file",
    "attach_file",
    "attach_file",
  ];

  @override
  Widget build(BuildContext context) {
    //final Size screenSize = MediaQuery.of(context).size;
    return Scaffold(
      drawer: MenuPage(),
      appBar: AppBar(
        title: Text('Certificados'),
      ),
      body: new Container(
        child: ListView(
          // padding: new EdgeInsets.symmetric(vertical: 4.0),
          children: <Widget>[
            Card(
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
              margin: EdgeInsets.all(15),
              elevation: 10,
              child: Column(
                children: <Widget>[
                  Container(
                    alignment: Alignment.center,
                    padding: const EdgeInsets.all(10),
                    child: const Text(
                      'Filtro',
                      style: TextStyle(
                          fontSize: 20
                      ),
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.all(10),
                    child: TextField(
                      //controller: nameController,
                      style: TextStyle(
                        //fontSize: 13.0,
                        //height: 1.0,
                          color: Colors.black // Color de texto
                      ),
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Contratante',
                      ),
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.all(10),
                    child: TextField(
                      //controller: nameController,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Asegurado',
                      ),
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.all(10),
                    child: TextField(
                      //controller: nameController,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Certificado',
                      ),
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.all(10),
                    child: Column(
                      children: <Widget>[
                        const Text('Seleccione Fechas\n',
                            style: TextStyle(
                              fontSize: 15,
                            )
                        ),
                        TextButton(
                          child: Text(
                            "${_selectedDateRange?.start.toString().split(' ')[0]}"+" | "+"${_selectedDateRange?.end.toString().split(' ')[0]}",
                            style: TextStyle(
                              fontSize: 15,
                              color: Colors.black,
                            ),
                          ),
                          onPressed: _show,
                        )
                      ],
                      mainAxisAlignment: MainAxisAlignment.center,
                    ),
                  ),
                  Container(
                      height: 50,
                      padding: const EdgeInsets.fromLTRB(10, 0, 10, 10),
                      child: ElevatedButton(
                        child: const Text('Filtrar'),
                        onPressed: () {
                          //signup screen
                        },
                      )
                  ),
                ],
              ),
            ),
            ListView.builder(
              itemBuilder: (BuildContext, index){
                return Card(
                  //margin: EdgeInsets.all(15),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  elevation: 5,
                  child: Container(
                    margin: EdgeInsets.all(10),
                    child: Row(
                      children: [
                        Expanded(flex: 2, child: Icon(Icons.home)),
                        Expanded(
                          flex: 8,
                          child: Container(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text("Title"),
                                Text("Descripton"),
                              ],
                            ),
                          ),
                        ),
                        Expanded(
                          flex: 2,
                          child: ElevatedButton(
                            child: const Icon(
                              Icons.delete,
                              color: Colors.white,
                            ),
                            style: ElevatedButton.styleFrom(
                              primary: Color.fromRGBO(50, 75, 205, 1),
                              shape: CircleBorder(),
                              padding: EdgeInsets.all(10),
                            ),
                            onPressed: () {
                              //signup screen
                            },
                          ),
                        ),
                        Expanded(
                          flex: 2,
                          child: ElevatedButton(
                            child: const Icon(
                              Icons.edit,
                              color: Colors.white,
                            ),
                            style: ElevatedButton.styleFrom(
                              primary: Color.fromRGBO(50, 75, 205, 1),
                              shape: CircleBorder(),
                              padding: EdgeInsets.all(10),
                            ),
                            onPressed: () {
                              //signup screen
                            },
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              },
              itemCount: images.length,
              shrinkWrap: true,
              padding: EdgeInsets.all(5),
              scrollDirection: Axis.vertical,
            )
          ],
        ),
      ),
    );
  }
}

Espero que puedan apoyar.

Saludos y bonito día.

1 respuesta 1

1

En vez de envolver todo en un ListView, envuelvelo en un Column, luego de esto al ListView que se está alimentando de la lista, envuelvelo en un Expanded, así ocupara el tamaño de la pantalla faltante respecto a lo que ocupa el formulario, te dejo el código aquí ya probado(el ejemplo lo mostraré desde el Scaffold):

Scaffold(
  drawer: MenuPage(),
  appBar: AppBar(
    title: Text('Certificados'),
  ),
  body: Column(
    // padding: new EdgeInsets.symmetric(vertical: 4.0),
    children: <Widget>[
      Card(
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        margin: EdgeInsets.all(15),
        elevation: 10,
        child: Column(
          children: <Widget>[
            Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.all(10),
              child: const Text(
                'Filtro',
                style: TextStyle(fontSize: 20),
              ),
            ),
            Container(
              padding: const EdgeInsets.all(10),
              child: TextField(
                //controller: nameController,
                style: TextStyle(
                    //fontSize: 13.0,
                    //height: 1.0,
                    color: Colors.black // Color de texto
                    ),
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Contratante',
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.all(10),
              child: TextField(
                //controller: nameController,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Asegurado',
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.all(10),
              child: TextField(
                //controller: nameController,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Certificado',
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.all(10),
              child: Column(
                children: <Widget>[
                  const Text('Seleccione Fechas\n',
                      style: TextStyle(
                        fontSize: 15,
                      )),
                  TextButton(
                    child: Text(
                      "${_selectedDateRange?.start.toString().split(' ')[0]}" +
                          " | " +
                          "${_selectedDateRange?.end.toString().split(' ')[0]}",
                      style: TextStyle(
                        fontSize: 15,
                        color: Colors.black,
                      ),
                    ),
                    onPressed: _show,
                  )
                ],
                mainAxisAlignment: MainAxisAlignment.center,
              ),
            ),
            Container(
                height: 50,
                padding: const EdgeInsets.fromLTRB(10, 0, 10, 10),
                child: ElevatedButton(
                  child: const Text('Filtrar'),
                  onPressed: () {
                    //signup screen
                  },
                )),
          ],
        ),
      ),
      Expanded(
        child: ListView.builder(
          itemBuilder: (BuildContext, index) {
            return Card(
              //margin: EdgeInsets.all(15),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.0),
              ),
              elevation: 5,
              child: Container(
                margin: EdgeInsets.all(10),
                child: Row(
                  children: [
                    Expanded(flex: 2, child: Icon(Icons.home)),
                    Expanded(
                      flex: 8,
                      child: Container(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text("Title"),
                            Text("Descripton"),
                          ],
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 2,
                      child: ElevatedButton(
                        child: const Icon(
                          Icons.delete,
                          color: Colors.white,
                        ),
                        style: ElevatedButton.styleFrom(
                          primary: Color.fromRGBO(50, 75, 205, 1),
                          shape: CircleBorder(),
                          padding: EdgeInsets.all(10),
                        ),
                        onPressed: () {
                          //signup screen
                        },
                      ),
                    ),
                    Expanded(
                      flex: 2,
                      child: ElevatedButton(
                        child: const Icon(
                          Icons.edit,
                          color: Colors.white,
                        ),
                        style: ElevatedButton.styleFrom(
                          primary: Color.fromRGBO(50, 75, 205, 1),
                          shape: CircleBorder(),
                          padding: EdgeInsets.all(10),
                        ),
                        onPressed: () {
                          //signup screen
                        },
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
          itemCount: images.length,
          shrinkWrap: true,
          padding: EdgeInsets.all(5),
        ),
      )
    ],
  ),
);
2
  • me gusta la respuesta. Quiero mejorar el diseño haciendo que el formulario se oculte a la hora que se hace Scroll para poder mostrar mas registros que están en el ListView. ¿Con que propiedad lo puedo hacer?
    – Javier fr
    Commented el 8 mar. 2022 a las 19:32
  • Eso sería otra pregunta, porque si es un poco extenso, pero podrías declarar un controller de tipo ScrollController, asignarlo a tu ListView y envolver tu ListView en un NotificationListener, a este Widget le asignas la propiedad onNotificacion, aplicas la función y luego actualizas el estado, jugando un poco con AnimatedOpacity y Visibility para esconder el formulario Commented el 31 mar. 2022 a las 16:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.