Widget Listview

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?

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:

¿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.

Lo que dijeron ellos

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…

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

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?

Stack

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

position: fixed

Stack

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

usriamos un Stack

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!

Stack es el widget que permite acomodar elementos uno encima del otro
https://api.flutter.dev/flutter/widgets/Stack-class.html

Les Comparto el avance de mi proyecto.

stack es el widget xd

El widget para acomodar elementos uno sobre otro es Stack

El widget Stack!

stack

Súper contenta con el curso!

Stack? 😄

stack

stack

stack

Stack

Stack

Se usa un stack

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

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
https://docs.flutter.io/flutter/widgets/Stack-class.html

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 lml

Stack

Stack

Stack

Stack!

stack

stack, señorita maestra profesora Anahi

stack

Genial!!

Stack

Stack

Stack

stack

Stack