Flutter SDK es un kit de desarrollo de software de código abierto para crear una hermosa interfaz de usuario compilada de forma nativa. En este artículo, crearemos una aplicación de calculadora simple que puede realizar operaciones aritméticas básicas como suma, resta, multiplicación o división, según la entrada del usuario. Hacer esta aplicación te dará una buena revisión de los conceptos básicos de aleteo y dardos. Los conceptos que se tratan son:
- Mostrando Widgets en la pantalla.
- Gridview.builder
- Escritura de funciones
- Si y si no en dart
Siga los pasos a continuación para implementar la calculadora simple. Empecemos.
Paso 1: crear una aplicación de Flutter
Abra la Terminal / Símbolo del sistema. Cambie el directorio a su elección y ejecute flutter create calculadoraApp. Abra la aplicación de calculadora en VS Code o Android Studio.
Paso 2: aplicación de calculadora de codificación
En la carpeta Lib, ya hay un archivo main.dart presente. Y ahora, en la misma carpeta, cree un nuevo archivo llamadobuttons.dart. Comenzando con el archivo main.dart . Cree la clase MyApp y conviértala en StatelessWidget . Agregue una serie de botones para que se muestren. Establezca el color de fondo, el color del texto y la funcionalidad Tocado en los botones. Escribe una función para calcular las respuestas
Dart
import 'package:flutter/material.dart';
import 'buttons.dart';
import 'package:math_expressions/math_expressions.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
); // MaterialApp
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
var userInput = '';
var answer = '';
// Array of button
final List<String> buttons = [
'C',
'+/-',
'%',
'DEL',
'7',
'8',
'9',
'/',
'4',
'5',
'6',
'x',
'1',
'2',
'3',
'-',
'0',
'.',
'=',
'+',
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("Calculator"),
), //AppBar
backgroundColor: Colors.white38,
body: Column(
children: <Widget>[
Expanded(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
padding: EdgeInsets.all(20),
alignment: Alignment.centerRight,
child: Text(
userInput,
style: TextStyle(fontSize: 18, color: Colors.white),
),
),
Container(
padding: EdgeInsets.all(15),
alignment: Alignment.centerRight,
child: Text(
answer,
style: TextStyle(
fontSize: 30,
color: Colors.white,
fontWeight: FontWeight.bold),
),
)
]),
),
),
Expanded(
flex: 3,
child: Container(
child: GridView.builder(
itemCount: buttons.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4),
itemBuilder: (BuildContext context, int index) {
// Clear Button
if (index == 0) {
return MyButton(
buttontapped: () {
setState(() {
userInput = '';
answer = '0';
});
},
buttonText: buttons[index],
color: Colors.blue[50],
textColor: Colors.black,
);
}
// +/- button
else if (index == 1) {
return MyButton(
buttonText: buttons[index],
color: Colors.blue[50],
textColor: Colors.black,
);
}
// % Button
else if (index == 2) {
return MyButton(
buttontapped: () {
setState(() {
userInput += buttons[index];
});
},
buttonText: buttons[index],
color: Colors.blue[50],
textColor: Colors.black,
);
}
// Delete Button
else if (index == 3) {
return MyButton(
buttontapped: () {
setState(() {
userInput =
userInput.substring(0, userInput.length - 1);
});
},
buttonText: buttons[index],
color: Colors.blue[50],
textColor: Colors.black,
);
}
// Equal_to Button
else if (index == 18) {
return MyButton(
buttontapped: () {
setState(() {
equalPressed();
});
},
buttonText: buttons[index],
color: Colors.orange[700],
textColor: Colors.white,
);
}
// other buttons
else {
return MyButton(
buttontapped: () {
setState(() {
userInput += buttons[index];
});
},
buttonText: buttons[index],
color: isOperator(buttons[index])
? Colors.blueAccent
: Colors.white,
textColor: isOperator(buttons[index])
? Colors.white
: Colors.black,
);
}
}), // GridView.builder
),
),
],
),
);
}
bool isOperator(String x) {
if (x == '/' || x == 'x' || x == '-' || x == '+' || x == '=') {
return true;
}
return false;
}
// function to calculate the input operation
void equalPressed() {
String finaluserinput = userInput;
finaluserinput = userInput.replaceAll('x', '*');
Parser p = Parser();
Expression exp = p.parse(finaluserinput);
ContextModel cm = ContextModel();
double eval = exp.evaluate(EvaluationType.REAL, cm);
answer = eval.toString();
}
}
En Flutter, el archivo main.dart es el punto de entrada desde el cual el código comienza a ejecutarse. En el archivo main.dart, en primer lugar, se ha importado el paquete de diseño de materiales, además del archivo math_expressions ybuttons.dart . Luego, se ha creado una función runApp con el parámetro MyApp . Después de la declaración de la clase MyApp , que es un widget sin estado, se ha establecido el estado de la clase MyApp .
Paso 3: Construcción de los botones.dart
Enbuttons.dart , que ya está importado en el archivo main.dart , estamos declarando variables que se usarán en todo el programa usando un constructor. El color, el color del texto, el texto del botón y la funcionalidad del botón al tocarlo se implementarán en el archivo main.dart
Dart
import 'package:flutter/material.dart';
// creating Stateless Widget for buttons
class MyButton extends StatelessWidget {
// declaring variables
final color;
final textColor;
final String buttonText;
final buttontapped;
//Constructor
MyButton({this.color, this.textColor, this.buttonText, this.buttontapped});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: buttontapped,
child: Padding(
padding: const EdgeInsets.all(0.2),
child: ClipRRect(
// borderRadius: BorderRadius.circular(25),
child: Container(
color: color,
child: Center(
child: Text(
buttonText,
style: TextStyle(
color: textColor,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
);
}
}
Paso 4: Agregar dependencias en el archivo pubspec.yaml
Para facilitar el proceso, usamos el paquete math_expressions: ^2.0.0 que se importa en el archivo main.dart para manejar todos los cálculos y las excepciones de errores de tiempo de ejecución.
Adición de expresiones_matemáticas: dependencia ^2.0.0
Producción:
Publicación traducida automáticamente
Artículo escrito por mohitkhedkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA