Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Flutter

Curso de Flutter

Anahí Salgado Díaz de la Vega

Anahí Salgado Díaz de la Vega

Widget Listview

27/38
Recursos

La particularidad del widget ListView(), como ya lo habíamos adelantado en clases anteriores, es la capacidad de permitir el desplazamiento del contenido (generalmente items de una lista) que en principio queda ubicado fuera de la región visible de nuestra interfaz.

En esta clase implementamos el ListView(), con la particularidad de que el desplazamiento o scrolling que definiremos en la propiedad scrollDirection será horizontal y no vertical para lo cual usaremos la variable Axis.horizontal.

Algo importante que vale la pena recordar es que con Flutter podemos crear widgets personalizados que luego podemos parametrizar y reutilizar tantas veces como queramos.

Aportes 200

Preguntas 10

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Les comparto como va quedando mi proyecto y de paso aprovecho para hacer publicidad a mi pueblo todo precioso.

Yo lo estoy haciendo algo diferente segun el diseño que me encargaron, y hasta ahora estoy feliz con el resultado

Tengo una duda, al momento de correr la app en mi celular, las fotos demorar en cargar. Esto se debe porque lo estoy ejecutando desde android como prueba?, o se debe por el peso de las fotos? o es porque no uso una base de datos de las fotos?

¿Cómo manejan las medidas de height, width, padding y margin?. Me refiero a los valores, por ejemplo, el height de la lista en este caso es 350.

Continuando con el diseño que había comenzado, batalle un poco con como se manejan los colores y aun no quedé satisfecho del todo, pero aquí mi avance:

Lo que dijeron ellos

Stack

Como hago para que se oculten las cards si hago scroll hacia abajo?

Stack

No sé si me estoy adelantado a algo pero, a este tipo de AppBar personalizadas, ¿Se les puede dar efecto como el de un CollapsingToolbarLayout en Android?

Les recomiendo pasar sus imágenes por https://tinypng.com para que las imágenes pesen menos. Espero a alguien le sirva 😄

OMG!! Me encanta como queda, me impresiona haber hecho esto, es genial.

usriamos un Stack

position: fixed

Stack

stack

Stack

stack

Stack

stack

Les comparto la propiedad “bottom” sirve para “levantar” desde la parte inferior su Container 😉

margin: EdgeInsets.only(top: 70, left: 30, bottom: 20)

Stack

Se usa un stack

Para los que tuvieron problemas con el scroll horizontal para targets que no sean Mobile aquí la solución:

  1. Crea un archivo dart con el nombre ejemplo scroll_behavior.dart.
  2. agrégale el siguiente código:
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => { 
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
    // etc.
  };
}
  1. Abre el archivo card_image_list.dart y modificalo así:
import 'package:flutter/material.dart';
import 'scroll_behavior.dart';
import 'card_image.dart';

class CardImageList extends StatelessWidget {
	List<String> items = [
		'assets/img/beach.jpeg',
		'assets/img/beach_palm.jpeg',
		'assets/img/mountain.jpeg',
		'assets/img/mountain_stars.jpeg',
		'assets/img/river.jpeg',
		'assets/img/sunset.jpeg'
	];
		
	@override
	Widget build(BuildContext context) {
		final ScrollController controller = ScrollController();

		return Container(
			height: 350.0,
			child: ScrollConfiguration(
				behavior: MyCustomScrollBehavior(),
				child: ListView.builder(
					padding: EdgeInsets.all(25.0),
					scrollDirection: Axis.horizontal,
					controller: controller,
			          itemCount: items.length,
			          itemBuilder: (context, index) {
			            return CardImage(items[index]);
			          },
		        )
			)
		);
	}
}

Eso es todo ahora puedes arrastrar la lista de imágenes de un lado a otro como de una pantalla touch se tratase, salu2…

Esto solo sirve para crear interfaces o se le puede incluir lógica de negocio, como acceder a la cámara y guardar una imagen, o integrar un chat con un xmpp? Estoy un poco confundido porque este curso es como hacer una maqueta de css para la web y la verdad me ha encantado los estilos pero quiero ver como accede a las funcionalidades nativas del celular

Stack

Que Widget podría utilizar si quiero un scroll en ambos ejes, tanto en x como en y?

Widget Stack

el stack!

Stack

stack

Así mi app para encontrar quesadillas sabrosonas

stack

EL Widget que se utiliza es el Stack. Ya que se sobreponen uno sobre otro, y es uno de los favoritos de la profe Anahí.

Stack

UN Stack!

Genial! está quedando muy bien!

Stack

Stack

Stack Overflow

Stack

Stack

Stack

stack

Stack

stack

Hola buenas noches desde mexico, me podrian echar una manita?

tengo este elemento y quisiera dejarlo como esta dibujado en la imagen:
.

lo estoy intentando con Stack pero no logro subir la imagen y bajar el texto.

este es mi codigo:

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:groovin_widgets/groovin_widgets.dart';

class VisitaExpandItem extends StatefulWidget {
  @override
  _MyExpandItem createState() => _MyExpandItem();
}

class _MyExpandItem extends State<VisitaExpandItem> {
  var value;
  bool isExpanded = false;

  final TipoVisita = new Container(
      width: 80.0,
      height: 80.0,
      decoration: new BoxDecoration(
          boxShadow: <BoxShadow>[
            BoxShadow(
              color: Colors.black,
              blurRadius: 5.0,
            ),
          ],
          color: Colors.white,
          shape: BoxShape.circle,
          image: new DecorationImage(
              fit: BoxFit.fitHeight,
              image: new AssetImage("assets/img/friendship.png"))));

  @override
  Widget build(BuildContext context) {
    return Stack(alignment: AlignmentDirectional.center, children: <Widget>[
      Padding(
        padding: const EdgeInsets.only(left: 5.0, right: 5.0, top: 15.0),
        child: Material(
          elevation: 2.0,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(8.0))),
          child: GroovinExpansionTile(
            defaultTrailingIconColor: Colors.redAccent,
            /*leading: CircleAvatar(
              maxRadius: 35.0,
              backgroundColor: Colors.white,
              backgroundImage: AssetImage('assets/img/friendship.png'),
            ),*/
            title: Text(
              "Lorem Ipsum es simplemente el texto de ".toUpperCase(),
              style: TextStyle(color: Colors.black),
            ),
            subtitle: Text(
                "Tipo: Personal \t Fecha: 12 Nov 2018 \t Hora: 12:45 \t Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto...",
                style: TextStyle(
                  fontSize: 15.0,
                )),
            onExpansionChanged: (value) {
              setState(() {
                isExpanded = value;
              });
            },
            inkwellRadius: !isExpanded
                ? BorderRadius.all(Radius.circular(8.0))
                : BorderRadius.only(
                    topRight: Radius.circular(8.0),
                    topLeft: Radius.circular(8.0),
                  ),
            children: <Widget>[
              ClipRRect(
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(5.0),
                  bottomRight: Radius.circular(5.0),
                ),
                child: Column(
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(
                          left: 20.0, right: 20.0, top: 10.0, bottom: 10.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          IconButton(
                            iconSize: 27,
                            color: Colors.green,
                            icon: Icon(FontAwesomeIcons.unlock),
                            onPressed: () {
                              print('object presionado');
                            },
                          ),
                          IconButton(
                            iconSize: 27,
                            color: Colors.red,
                            icon: Icon(FontAwesomeIcons.lock),
                            onPressed: () {},
                          ),
                          IconButton(
                            iconSize: 27,
                            color: Colors.blue[300],
                            icon: Icon(FontAwesomeIcons.searchPlus),
                            onPressed: () {},
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
      TipoVisita,
    ]);
  }
}

stack

Stack

Stack 😄

Stack

stack

stack

Stack

Como podría acceder a los contactos del celular y listarlos?

Así pueden insertar imagenes o cualquier otro recurso que necesiten dentro del proyecto.
https://stackoverflow.com/questions/50903106/add-image-in-flutter-app

Stack

Stack

Stack

Stack 🙌🏼

Stack

Stack

stack

Stack

Stack

Stack!

Stack lml

Stack

Stack

Stack

Stack!

stack

stack, señorita maestra profesora Anahi

stack

Genial!!

Stack

Stack

Stack

stack

Stack🤭

Stack

Tengo una duda, por qué en ocasiones el Container() queda dentro de una variable final y en otras queda directamente en el return? Lo he probado en ambas formas y nunca afecta el resultado, por eso quisiera saber en que ocasiones se debe hacer dentro de la variable y en que ocasiones dentro del return?
Gracias

stack ❤️

Stack

Stack :3

stack

Stack

Stack

Stack

7:06 Es un stack !! XD

Stack

Stack

stack

StackOverflow

Stack

Stack

Stack