Author: admin

27 May

Posted at 09:14h in app, Flutter, GetX, movile by

Robot Testing is an end-to-end (E2E) technique that mimics a human. Its main advantage is that it focuses on the WHAT and not the HOW we are testing it. When a requirement changes or as our project or application envolves, we can continue to use the robot tests and its components. Yootube video :  https://youtu.be/L7sJGihkNr8

 

Let’s see a sample of a testing scenario with the Robot Pattern :

We use the integration_test package for writing integration tests. Add the plugin to your pubspec.yaml file as a development dependency

 

Using Robot Pattern for testing

 

Instead of writing all the tests in one file, we basically create robots per screen and then use the integration testing tools to test our application.

 

Take a look to the  file ‘home_screen_robot.dart‘ already created lib/integration_test/robots/home_screen_robot.dart into our project  flutter App

Note :  Every robot takes in the WidgetTester as a constructor parameter and defines the methods as required by that screen

Inside our, app_test.dart we initialize the HomeScreenRobot y DetailScreenRobot

and inside thetestWidgets function we can  use the methods as per the behavior

Test the App

 

To run our integration tests, first, make sure the emulators are running, and then we run the following. Then you have some ways to run the test.

1.  Go to the terminal  (I’m using VSCode)  write there this :

     flutter drive \ –driver=test_driver/integration_test.dart \ –target=integration_test/app_test.dart

2. Create a scrip file integration_test.sh. The content will be the command : flutter drive \ –driver=test_driver/integration_test.dart \ –target=integration_test/app_test.dart

3. If you are using VSCode (like me!!) go to left panel and click on icon ‘testing’, you will find on the left , the list of tests that you’ve already created

 

 

Robot testing is an additional step that can increase the confidence in your ability to release your product to the market,
as well as decrease the cost and amount of manual testing needed, especially when there are regular releases that need to be tested.

02 Jul

Posted at 16:53h in app, Art, Business, Design, Flutter, GetX by

This an Flutter App. Calculina.

Calculina App. It is used to make a quick calculation of the corresponding insulin units for each meal, for people who suffer from diabetes, and need to calculate the units of rapid insulin. With its elegant design, easy and understandable, people can interact with Calculina and understand very quickly how to use the App to get the calculation they need. You can also share this result on the social networks that the device has installed.

 

 

26 May

Posted at 09:40h in app, Art, Flutter, GetX, movile by

 

  • GetX has 3 basic principles. This means that these are the priority for all resources in the library: PRODUCTIVITY, PERFORMANCE AND ORGANIZATION.

Well, the first concept that we have to keep on mind is  WE DON’T CARE ABOUT THE CONTEXT!!, why??? because getX manages that for us!!…

You do not need context to navigate between routes, so you are not dependent on the widget tree (visualization) for this. You don’t need context to access your controllers/blocs through an inheritedWidget, so you completely decouple your presentation logic and business logic from your visualization layer. You do not need to inject your Controllers/Models/Blocs classes into your widget tree through MultiProviders. For this, GetX uses its own dependency injection feature.

Go to official documentation

Before, I want to show , how this project is structured,

Well , today we are going to explain in detail the first, part of this video, Showing an snackbar using GetX.

1.Step install dependencies :

(Go to  your pubspec.yaml file, in your flutter project)

In this example we are going to need two additional dependencies: folding cell, google_fonts, awesome packages!!

2.Change file Main.dart

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widgetbuild(BuildContextcontext) {
return GetMaterialApp(
title:’Flutter GetX’,
debugShowCheckedModeBanner :false,
theme:  ThemeData(primarySwatch:Colors.blue,),
home: FoldingCell(),
initialBinding: MyBindings(),);}}

Our Main.dart file should return Get MaterialApp instead of traditional MaterialApp

3.Create a file  call folding_main.dart.

( Now is the time to use the pack folding cell Go to package )In this point, we are going to build , two main widgets, that we need frontWidget and innerWidget to fold and unfold. (see details on github…. https://github.com/Liliana99/my_getx)

Now we need to create our only controller , it so amazing, only for one controller !! ok , let’s go:

4.Create a folder call controllers, into their create a file call main controller.dart. path : lib/controlllers/main_controller.dart

Our controller needs to extends GetxController, it comes from Getx library. We create the get to have access in different places. So it is all, we’ve already injected our controller in the UI.  Goal accomplished, show that GetX does not need to call context to display snackbar!! . In my next articles, we are going to deep will the access with controllers and binding

 

 

 

13 Jul

Posted at 18:40h in app, Design, Flutter, programación by

This plugin adds information overlay.  You can customize the content, you can add one o more contents that you want .Futter plugin Click here to see the video

 

This an simple example to create an one  customize contents.
Future<void>initTargets()
async {
targets.add(TargetFocus(
identify: «Target 1»,
keyTarget: keyButton,
contents: [
ContentTarget(
align: AlignContent.top,
child: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
«Cuidador»,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 20.0),
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: CustomText(data:dataCuidadorText,
style: TextStyle(color: Colors.white,
),
color: Colors.white,
fontSize: 17.0,
),
)
],
),
),),

 

 

……to more information visit the link  https://github.com/RafaelBarbosatec/tutorial_coach_mark

 

 

 

11 May

Posted at 22:51h in Flutter, programación by

Retomando el gráfico anterior  …

El gráfico anterior, representa la manera de escribir ( en este caso, lenguaje Dart, para Flutter..) como crear una variable y inicializarla. Antes expliquemos brevemente que es una variable?, ok una variable es una referencia que se utiliza en todo lenguaje de programación para guardar un valor.

En nuestro gráfico hemos creado una variable , tipo string , le hemos asignado un valor por medio del operador «=» para la variable que hemos escogido ponerle «name«, esta variable le hemos asignado que sea del tipo «string» para guardar una secuencia de caracteres, en este caso el valor es «Liliana«.  Vamos a la pregunta de este post, ¿ cual es la diferencia entre declaración de variable y inicialización de variable…?

» Declaración de variable » es el proceso de encontrar una variable y asignarle un nombre. La cual podemos usar después .

En cuanto a » Inicialización de variable » es el proceso de asignarle un valor inicial a esa variable.

String  interpolación

En el siguiente video , veremos que es.. , para que se utiliza… y como se utiliza, este concepto en Dart II.

 

 

 

05 May

Posted at 20:09h in Design, Flutter by

Orientado a Objetos => Veremos en el código las típicas estructura de classes

Classes que dentro tendrán datos y métodos para poder su manipulación.

C-Style Syntax => Similar a C,Java,Javascript,Swift.

Multiple  Entornos => Dart es un lenguaje que se adapta al entorno en el cual se esta ejecutando, por ejemplo si en un  dispositivo móvil se ejecuta una aplicación escrita en lenguaje Dart, no se reflejará ningún cambio en su ejecución, la aplicación funcionará igual que una aplicación escrita en  otras plataformas : como Android o IOS. También puede ejecutarse en cualquier navegador web moderno.  En este link puedes comprobar con un ejemplo , https://www.dartlang.org/guides/get-started

Productividad y Velocidad => Just-intime(JIT) Se puede decir que es el compilador que e ejecuta durante la ejecución del programa , compilando sobre la marcha es decir => Hot Reload.

Vamos a comprobar lo que hemos comentado anteriormente, para hacer esta primera práctica vamos al siguiente sitio https://dartpad.dartlang.org/

DartPad es un servicio gratuito de código abierto para ayudar a los desarrolladores a aprender sobre el lenguaje y las bibliotecas de Dart. El código fuente ingresado en DartPad se puede enviar a los servidores que se ejecutan en Google Cloud Platform para que se analicen en busca de errores / advertencias, se compilen en JavaScript y se devuelvan al navegador.

 Ver en yootube

Explicación en detalle , de nuestro programa anterior.

 

04 Nov

Posted at 11:49h in Design, Flutter by

 

En cualquier app moderna, que implique subir una imagén , bien sea de galeria o directamente desde la camára, es prioritario incorporar a nuestro codigo, una libreria que nos permita hacer una captura que sea posible recortar, aumentar o disminuir la imagen, para adaptarla al cuadro de la imagen final!! pues en el caso de flutter , la libreria image_cropper ^0.0.8.

He realizado una pequeña aplicación en flutter, para capturar la imagen según la selección del usuario : galeria o camára, despues se hará el crop de la imagen. Este desarrollo se ha realizado en la plataforma android studio, codigo dart2 , en flutter.

He seguido las instrucciones de este blog Developer-Libs .  A cotinuación se muestra la funcionalidad de esta mariavillosa libreria , en mi caso , al tener instalado flutter en la plataforma Android Studio, se tiene que poner en el Manifest.xml el activity  «com.yalantis.ucrop.UCropActivity«.

 

Despúes de haber guardado en Android Manifest.xml, podremos guardar en pubspec.yaml , la librería image_cropper: ^0.0.8  (dentro de la plataforma de desarrollo xcode no es necesario guaradar este activity, solo para Android)

 

Esta es la funcionalidad de la libreria – image_cropper – de flutter, podemos alinear la imagen a nuestro gusto, girar, hacer más grande o más pequeño.

 

 

A continuación mostramos la pantalla inicial de la aplicación, tal como la encontraria el usuario :

 

Y finalmente la imagen queda asi:

Ver video en Linkedln    https://www.linkedin.com/feed/update/urn:li:activity:6464827493160353792

04 Nov

Posted at 10:10h in Design, Firebase by

Demo de Aplicación realizada en android studio, aqui podemos ver en forma rápida y sencilla autenticar en firebase de google, con email de gmail.

Esta sencilla App, con solo entrar tu cuenta de correo electronico, en este caso hemos utilizado una d egmail, entrando la clave, automáticamente firebase se encarga de la validación de usuario, previamente hemos creado y configurado el proyecto en firebase console.

17 Sep

Posted at 12:47h in Android, Flutter by

 

Por si no conocíais al nuevo desarrollo del gigante del buscador, se trata de un framework diseñado para desarrollar sobre él aplicaciones móviles multiplataforma. O lo que es lo mismo, es un entorno de desarrollo que permite crear apps para iOS y Android de forma directa y sin necesidad de adaptaciones posteriores.

Podeis buscar mas detalles en la red, quiero presentaros una pequeña, aplicación demo, realizada en flutter, bajo plataforma Android Studio. Es una entrada limpia , de ingreso de usuario, pasword,  validación en los datos.

Para el usuario , esto podría tener poca importancia , pero para el desarollador será mas dinámico y más productivo , tenemos mas herramientas !!

 

29 Ene

Posted at 23:37h in Android, RxJava by

The result is   the same with «from» method  with «just» method. !!

 

–From : when we pass into an array or list item, it will issue an array and list that item and subscriber will also take the parameter as an array or list.

–Just : it will issue each item in the list (will call onNext times the size of the list in error condition)