Les comparto como va quedando mi proyecto y de paso aprovecho para hacer publicidad a mi pueblo todo precioso.
Bienvenida e Introducción
¡Renovaremos este curso!
Desarrollando en Flutter
¿Qué es Flutter?
Dart y Flutter
Sintaxis de Dart
¡Renovaremos este curso!
Flutter para desarrolladores Android, iOS y Xamarin.forms
Flutter para desarrolladores React Native
¿Cómo luce una app construída en Flutter?
Primer reto
Creando mi entorno de desarrollo
¡Renovaremos este curso!
Requerimientos de Hardware y Software
Instalando Flutter en Android Studio y Visual Studio Code
Composición de un proyecto en Flutter
Interfaces en Flutter
¡Renovaremos este curso! Te quedan unos días para concluirlo.
Programación Declarativa en Flutter
Estructura de un programa en Flutter
Hola Mundo en Flutter
Widgets básicos
Widgets con estado y sin estado
Análisis de Interfaces de Usuario en Flutter
Definiendo los layouts de nuestra interfaz
Segundo reto
Widgets sin estado en Flutter
¡Renovaremos este curso! Te quedan unos días para concluirlo.
Flutter Widgets: Container, Text, Icon, Row
Flutter Widgets: Column
Recursos en Flutter: Tipografías y Google Fonts
Widget Image
Widget Apilando Textos
Widgets Decorados
Widget Imagen Decorada
Widget Listview
Widget Button, InkWell
Tercer reto
Widgets con estado en Flutter
¡Renovaremos este curso! Te quedan unos días para concluirlo.
Botones en Flutter
Clase StatefulWidget: Cómo se compone
Widget Floating Action Button
Widgets BottomNavigationBar
Generando Navegación en BottomNavigationBar
Personalizando nuestro BottomNavigation Bar a Cupertino iOS BottomBar
Cuarto reto
Fin del Curso
¡Renovaremos este curso!
Conclusiones
¡Terminamos!
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
The particularity of the ListView() widget, as we had already anticipated in previous classes, is the capacity to allow the scrolling of the content (generally items of a list) that in principle is located outside the visible region of our interface.
In this class we implement the ListView(), with the particularity that the displacement or scrolling that we will define in the scrollDirection property will be horizontal and not vertical for which we will use the Axis.horizontal variable.
Something important that is worth remembering is that with Flutter we can create customized widgets that later we can parameterize and reuse as many times as we want.
Contributions 216
Questions 11
Sort by:
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:
- Crea un archivo dart con el nombre ejemplo scroll_behavior.dart.
- 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.
};
}
- 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
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
Want to see more contributions, questions and answers from the community?