Aquí construiremos una aplicación de dados simple que rueda al hacer clic. Para ello añadiremos un botón y al pulsar sobre él deberían rodar los dados. Podemos lograr esto envolviendo Widget de imagen i Widget de botón plano y cambie aleatoriamente las imágenes de los dados en una función de devolución de llamada configurada para presionado propiedad de la botón plano.
Crearemos esta aplicación con Stateful Widgets. Instrumentos de Estado los que cambian sus propiedades durante el tiempo de ejecución. Son dinámicos, es decir, son mutables y se pueden dibujar muchas veces durante su vida útil. Puede cambiar su apariencia en respuesta a eventos desencadenados por las interacciones del usuario o cuando recibe datos como una casilla de verificación, un botón de radio, una diapositiva, InkWell, un formulario y un campo de texto.
Realice la configuración inicial para Flutter Development y cree un proyecto. Ahora, siga los pasos a continuación para construir la aplicación.
Paso 1: Cree una carpeta de imágenes y coloque las imágenes requeridas en la carpeta.
Coloque imágenes de dados en la carpeta de imágenes.
Paso 2: Incluir las imágenes en el pubspec.yaml expediente.
flutter: uses-material-design: true assets: - images/
Nota: Use la sangría correcta i pubspec.yaml.
Paso 4: Trabajando con el archivo main.dart.
Cada vez que cambiamos el estado interno de un objeto State, debemos enviar los cambios a una función que hemos pasado a establecerestado:
setState(() { myState = newValue; });Ve a la dardo principal archivo y consulte el siguiente código. A continuación se muestra el código para el dardo principal expediente.
Dardo
import 'package:flutter/material.dart';import 'dart:math';void main() { return runApp( MaterialApp( home: Scaffold( backgroundColor: Colors.black, appBar: AppBar( title: Text('GFG | Dice'), backgroundColor: Color.fromRGBO(15, 157, 88, 1), ), body: Dice(), ), ), );}class Dice extends StatefulWidget { @override _DiceState createState() => _DiceState();}class _DiceState extends State<Dice> { int dice_no = 1; void update() { setState(() { //Random.nextInt(n) returns random integer from 0 to n-1 dice_no = Random().nextInt(6) + 1; }); } @override Widget build(BuildContext context) { return Center( child: Expanded( child: Padding( padding: const EdgeInsets.all(50.0), child: FlatButton( child: Image.asset('images/dice$dice_no.png'), onPressed: () { update(); }, ), ), ), ); }} |
Producción:
Nota: Puede descargar las imágenes requeridas desde sumi.