teleren/devto huggingface dataset:
WINAMP - Flutter CodePen Challenge
Tags: flutter, challenge, codepen, flutterchallenge
Published: 2020-07-10 11:36:13

As you might know, the Flutter CodePen challenge is currently ongoing for this month of July. 

For those who don't know,
>The Flutter CodePen challenge is a month-long challenge in July to build user experiences with CodePen’s new Flutter editor.

You can read more about it [here](https://codepen.io/challenges/2020/july/).


#### CODE PEN :  
<a href="https://codepen.io/ishandeveloper/pen/WNrzveY">codepen.io/ishandeveloper/pen/WNrzveY</a>

#### LIVE WORKING DEMO :  
<a href="http://winamp.ishandeveloper.com">winamp.ishandeveloper.com</a>

#### SOURCE CODE :
<a href="https://github.com/ishandeveloper/WinAMP_Flutter">github.com/ishandeveloper/WinAMP_Flutter</a>

### QUICK SHOWCASE:
  `Note : The GIF might take some time to load.`

![WinAMP Music GIF](https://dev-to-uploads.s3.amazonaws.com/i/az5043ueudikeyzvnh2t.gif)

This was my first Pen that I've ever created (I have forked a few before) on my own. It's a tribute to the **WinAMP Music Player**.

I originally made this as a part of the **#Hack20** Flutter Hackathon. This project of mine was chosen as one of the **Top 5** submissions this year.

## Few Hacks

I have used a bunch of hacks towards building this project. Mainly, as currently there is no native support for playing audio files in flutter web, I used `dart:js` package to actually call the custom JavaScript functions using Dart.

All Thanks to this amazing post [here](https://medium.com/flutter-community/flutter-web-audio-player-24bded45b928).

### A Brief Look At The Widget Tree

I have tried to make it as modular as possible by using a lot of widgets, and would be honest the code is somewhat messy, because I had to create all this in less than 8 hours.
```
 MaterialApp             
 └── LayoutBuilder
   └── UI
     └── Scaffold
       └── Navbar
       └── Main (Column)
         └── Row
           └── SidebarText
           └── MusicInfoWidget
           └── TrackName
           └── MiniScrollControls
           └── MonoStereoButtons
         └── Row
           └── Column 
             └── Seekbar
             └── Controls 
```

## Inspiration Behind This

<p>Almost a decade ago, most of us used Winamp for listening to music on our PC devices. It was one of the first music player apps, that was compatible with most modern file types mp3, mp4, avi etc and it featured a wide variety of amazing skins, along with a radio and a browser.</p>

<p>This is just a small attempt to recreate that same experience using <a href="https://codepen.io/flutter" target="_blank">@flutter</a> .</p>

### CodePen
Here's the actual codepen. If any bottom overflow occurs, please switch to full view.
{% codepen https://codepen.io/ishandeveloper/pen/WNrzveY %}

Keep Fluttering 💜
#### Catch you guys in the next one. 🤙🏻
Use MirageJS to fake API calls with NextJS
Tags: javascript, nextjs, miragejs, api
Published: 2020-07-10 11:29:59

Welcome!

In this post, I am going to write an introduction to [MirageJS](https://miragejs.com/), a tool that I discovered recently and I think that is very useful when you develop a Frontend application that will use an API to get its data without having the backend fully developed.

Assuming we already have a working frontend project in which we want to use Mirage, we have to follow the next steps:

## 1. Install Mirage in our project:
```bash
# Using npm
npm install --save-dev miragejs

# Using Yarn
yarn add --dev miragejs
```
## 2. Create a `mirage` folder
Now we need to create a folder called `mirage`. I located it at `lib` folder with the next structure:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1ju4v9g204jo6dnfxfm0.png)

## 3. Inside `index.js`
Inside `index.js` we have to create a mirage server which will serve to generate our fake api:
```javascript
import { Server } from 'miragejs'

// Some imports from routes folder. Ex:
// import { mock1Routes } from './routes/mock1Routes'

const createMirageServer = () => {
  const server = new Server({
    routes () {
      this.urlPrefix = process.env.API_BASE_URL
      
      // Examples:
      // mock1Routes(this)
      // mock2Routes(this)
    }
  })

  return server
}

export default createMirageServer
```
In `urlPrefix` we have to set the API base URL of our development API.

## 4. Create the mock routes
Now, inside the folder called `routes` we have to create those calls to the api that we want to mock.
For example we create a `routes/mock1Routes.ts` file with the next content:
```javascript
import { Server, Response } from 'miragejs'

const mock1Routes = (server: Server) => {
  server.get('/api/whatever/', (_, request) => {
    if (successCondition) {
      return new Response(200, {}, {})
    } else {
      return new Response(404, {}, {})
    }
  })
}

export default mock1Routes
```
We can customize responses according to what we need.

**NOTE:**
In this example we are mocking a `GET` method with `server.get`, but we can mock any method: `server.post`, `server.patch`...

## 5. Configure our Next.js app to use Mirage
To finish, we have to configure our Nextjs app to use this.
I added a `.env` variable to switch between use or not use mirage.
```
USE_MIRAGE_SERVER=true
```
Then we need to configure the `next.config.js` file in order to use our env variables:
```javascript
if (process.env.NODE_ENV === 'development') {
  require('dotenv').config()
}

module.exports = {
  env: {
    API_BASE_URL: process.env.API_BASE_URL,
    USE_MIRAGE_SERVER: process.env.USE_MIRAGE_SERVER
  }
}
```
And now in our `_app.tsx` file we have to use this env variable and create the mirage server:
```javascript
if (process.env.USE_MIRAGE_SERVER === 'true') {
  console.log('ATTENTION - Using mirage server')
  createMirageServer()
}
```

And with this would be everything. We already have a functional API mock for our frontend development. 🎉🎉🎉

**THANKS FOR READ ME**
![Alt text](https://media.giphy.com/media/3o6Zt6KHxJTbXCnSvu/giphy.gif)
How to generate an aggregated code coverage report for all Gradle subprojects
Tags: kotlin, jacoco, gradle, junit
Published: 2020-07-10 11:20:12

When using Gradle's multi-project builds, test and coverage reports are generated separately in each build directory of every sub-project.

To make Azure Pipelines happy I needed to generate an index file for all coverage-reports:
 

```kotlin
// build.gradle.kts

plugins {
    base
    kotlin("jvm") version "1.3.72" apply false
}

allprojects {
    group = "com.kaffeinelabs"
    version = "1.0.0-SNAPSHOT"
    apply(plugin = "jacoco")
}
tasks.register<JacocoReport>("jacocoRootReport") {
    subprojects {
        this@subprojects.plugins.withType<JacocoPlugin>().configureEach {
            this@subprojects.tasks.matching {
                it.extensions.findByType<JacocoTaskExtension>() != null }
           .configureEach {
                sourceSets(this@subprojects.the<SourceSetContainer>().named("main").get())
                executionData(this)
            }
        }
    }

    reports {
        xml.isEnabled = true
        html.isEnabled = true
    }
}
```

Jacoco configuration for sub-projects should be done as per usual.

To generate the report the `jacocoRootReport` task needs to be added to the build:

```bash
./gradlew test jacocoRootReport
```

If you also need to aggregate test reports, I covered it in another article: 

* [How to generate an aggregated test report for all Gradle subprojects](https://dev.to/jakub_zalas/how-to-generate-an-aggregated-test-report-for-all-gradle-subprojects-1me6)
Remove all Git branch except 1 with Single Script
Tags: shell, script, learn, git
Published: 2020-07-10 11:17:39

Hi all, I am just learning about shell script. And I also have too many unused branch in my workspace.
So I decided to create a simple script to run a `git` command, which can delete all branch except 1 branch.

The script is simple, it's only taking a single argument that will replace the branch name inside the `git` command.

With this script, I learned about:
- Taking argument in a script
- Make and calling a function in a script
- Calling a command inside a script

You can see the script here:
https://github.com/ridhoperdana/brove

Have a nice weekend! 🖖
Wrote a small library for text based avatar generation in SVGs.
Tags: svg, silhouettejs, sideprojects, avatar
Published: 2020-07-10 11:11:17

Wrote a dead-simple, small library in Javascript for generating text-based avatars(eg. Gmail pfp's with initials) in the SVG format. You could either save it in your database and directly include the svg code, or generate random avatars each time you reload.

Check it out with the documentation here: https://github.com/utkarshdubey/silhouette/

A live example has been hosted here:
https://silhouette-example.netlify.app
Convert a image to sketch using python
Tags: python
Published: 2020-07-10 11:10:39

image-to-sketch-python
in this tutorial we will create a intresting project which is how to convert a image into a sketch

let's get start...... :) 
modules required for the project.. 
     1.numpy 
      to install this modules you 
      have to use the command:)=
         pip install numpy
     2.imageio 
         installation:)= 
         pip install imageio 
     3.opencv 
       installation:)=
       pip install opencv-python

let's go the editor i.e.VSCode

        #import the libraries
         import numpy as np
         import imageio
         import scipy.ndimage
         import cv2
  
         #lets create a variable 
          which   
          will store a image
          
         img="my.jpg"
  
        def grayscale(rgb):
         return 
            np.dot(rgb[...,:3],. 
         [0.299,0.587,0.114]) 
        #this is the formuleto 
        convert an image to black 
        and white image
  
        #this function will 
         convert your image into 
         sketch formate
        
     
        def dodge(front,back):
           result=front*255/
           (255- back)
           result[result>255]=255
          result[result==255]=255
           return 
          result.astype('uint8')
       
       s=imageio.imread("my.jpg")
       g=grayscale(s)
       i=255-g
  
       #lets create blurred image
   
        b=scipy.ndimage.filters.
      gaussian_filter(i,sigma=10)
       r=dodge(b,g)
  
      #write the name of the 
      picture which you have to 
        want
      cv2.imwrite
      ("my_sketch.png",r)


https://youtu.be/cws4_6yRSTo
WeeklyFinds(2): github-readme-stats | Add stats to your GitHub readme
Tags: weeklyfinds
Published: 2020-07-10 11:08:39

_I was considering making this installment of WeeklyFinds about cool form utilities._

But, as the new GitHub feature has brought so many cool projects and ideas to the table, I will be featuring [github-readme-stats](https://github.com/anuraghazra/github-readme-stats), "Dynamically generated stats for your GitHub readmes".

It does not only work for GitHub readme, but you can also use it here on DEV.to, and I imagine other markdown renderers as well.

Here is a sample of what it can do _(take into account that it's a newborn, was created yesterday)_:
[![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=nombrekeff&show_icons=true)](https://github.com/nombrekeff/github-readme-stats)


Go check it out, and give some love. ❤️

{% github anuraghazra/github-readme-stats %}
Deno: Ogone's JSX output
Published: 2020-07-10 11:04:14

# Intro
Hey! I'm Rudy Alula, and I work as Front-end Developer for [Stanley Robotics](https://www.youtube.com/watch?v=Wo1OmfoufmQ), which is solding the first outdoor robot parking vallet in automobile industry.

with this article, you're about to understand how `<div><img src="..."/></div>` is rendered by Ogone on your browser.

Actually Deno don't have a native DOMParser or std one, so Ogone implements a custom DOMParser, this allows some custom stuffs and let Ogone out of React's JSX supremacy.

this `<div><img src="..."/></div>` will simply output like this:
```ts
(function(ctx, pos = [], i = 0, l = 0, ap = (p,n) => {p.append(n);}, h = (...a) => document.createElement(...a), at = (n,a,b) => n.setAttribute(a,b)){
  let p = pos; 
  const nt = h('template'), n1 = h('div'), n2 = h('img');
  at(n2, 'src', '...');
  ap(nt,n1); ap(n1, n2);
  return nt;
});
```
ต่างกันอย่างไร... ?
Published: 2020-07-10 11:01:55

สวัสดีครับ ที่ผ่านมาผมเขียนบทความเกี่ยวกับความร่ำรวยมา 3 บทความ ตอนนี้ผมจะเขียนบทความเกี่ยวกับการออกกำลังกายซักช่วงเวลาหนึ่งน่ะครับ ผมสนใจเรื่องการฝึกกล้ามหน้าท้อง (sixpack) มานานแล้วครับแต่ไม่ได้เริ่มฝึกฝนแบบจริงๆจังๆซักที ดังนั้นผมจะอาศัยโอกาสนี้ในการเริ่มต้นลงมือทำครับ โดยผมวางเส้นทางไว้ดังนี้คือ

  1. หาข้อมูลและฝึกฝนด้วยตนเอง ( ระยะเวลา 3 เดือน )
  2. หาต้นแบบคนที่มี sixpack แล้วทำตามคำแนะนำของเขา

โดยผมจะเริ่มบันทึกผลตั้งแต่สัปดาห์หน้าเป็นต้นไป และบทสรุปของแต่ละเส้นทางมีข้อดีข้อเสียต่างกันอย่างไร.... ขอบคุณมากครับที่ติดตามอ่านแล้วเจอกันใหม่บทความถัดไปครับ
Favourite Linux distro
Tags: linux
Published: 2020-07-10 11:00:07

Hi Linux users! Comment down Linux distribution that you like the most.
My favourite distro is Kali, because I do lot of penetration testin stuff. Kali has lot of excellent hacking software preinstalled. But it's not good distro for daily usage and normal programming stuff. For that, I like Linux Mint. It is easy to use and lightweight and powerful. So write your favourite distribution below!
Run docker commands without sudo :))
Tags: docker
Published: 2020-07-10 10:41:37

#### First create a docker group
```
sudo groupadd docker
```

#### Add the connected user $USER to the docker group
```
sudo gpasswd -a $USER docker
```

### Done
Log out and log back in so that your group membership is re-evaluated.

If testing on a virtual machine, it may be necessary to restart the virtual machine for changes to take effect.

On a desktop Linux environment such as X Windows, log out of your session completely and then log back in.

On Linux, you can also run the following command to activate the changes to groups:
```
 newgrp docker 
```
When to use Six Sigma
Tags: sixsigma, beginners, cloud, javascript
Published: 2020-07-10 10:41:28

![when?](https://media.giphy.com/media/3o6ozlXnM5JSgopPPy/giphy.gif)

Some organizations make use of various project improvement methods. As a Six Sigma expert, you might have to champion your own method on occasion. Here are some reasons to choose Six Sigma over other methods described in this part.

---

### **1. When facing the unknown**
 
> Six Sigma is designed so you can begin a project even when you don’t know the cause of the problem. In some cases, teams aren’t even sure what the exact problem is – they only know some metric is not performing as desired. For example, an organization might experience a drop in profits that doesn’t correct itself in several consecutive quarters. Six Sigma methods can begin to seek the causes of the problem, prioritize them, and work toward solutions.

### **2. When problems are widespread and not defined**
 
> Even when a problem is understood, if it is wide in scope and not well defined, improvement projects that are not tightly managed can escalate in scope to a point that they become unmanageable. In this situation, teams attempt to solve increasingly bigger issues. As a result, no problem is ever completely solved. Six Sigma includes controls for avoiding such scope creep so teams can make incremental improvements that steadily improve a process over time. We’ll talk about scope creep more in later chapters.

### **3. When solving complex problems** 
> If processes are complex and feature many variables, it is difficult to determine how to approach a solution, much less define, and measure success. Knowledge of statistical analysis and process control lets teams approach problems that involve enormous amounts of data and many variables. Through analysis and a graphical representation, complex ideas can be distilled to specific hypotheses, premises, and conclusions.

### **4. When costs are closely tied to processes**
 
> Because Six Sigma’s statistical process control component lets teams make more accurate assumptions than almost any other method, it is very appropriate for situations that are closely tied to revenue or cost. When a single tiny change can result in millions of dollars in gains or losses, teams must validate assumptions with an extremely small margin of error. Guesswork, basic research, and even years of experience cannot do that as accurately as properly implemented Six Sigma methods. 

---
What is React and why to use it?
Tags: react, javascript, webdev
Published: 2020-07-10 10:38:50

React is a modular Javascript library created by Facebook which helps to make web apps fast and efficient with minimal coding.

Why React?
React comes with a wide range of advantages and some of them are as follows:

Easy to learn and easy to use
React comes with a good supply of documentation and tutorials. Anyone who does JavaScript can easily understand React and start using it in just a few days.

Reusable components
React allows a developer to break the app into smaller components that can be reused later hence minimizing the codebase. We will understand more about components in the next section.

Use of virtual DOM
DOM manipulation is one of the most expensive tasks for any framework, especially when the application is big. React solves this issue by using a Virtual DOM, which is basically a lightweight copy of the Real DOM. It is only an in-memory representation and is not rendered on the actual screen.
Instead of rendering the whole DOM again, React compares the changes in Virtual DOM and then renders it in the Real DOM accordingly.

Easy to write JSX
JSX is just a combination of HTML and Javascript. It makes coding a lot easier and also helps in preventing injection attacks like XSS.
Set Goal...🙂
Tags: goal, success, learning, coaching
Published: 2020-07-10 10:38:07

การตั้งเป้าหมายนั้น เป็นสิ่งที่คุ้นชินกันมาตั้งแต่เด็กๆ แต่เราอาจไม่ได้ให้ความสนใจมากนัก แต่ถึงอย่างนั้น ทุกคนจะมีเป้าหมายของตนอยู่แล้ว แม้ว่าจะไม่ได้ เรียกว่า "เป้าหมาย" แต่ในทุกการเดินทางแต่ละช่วงชีวิตของทุกคน ก็ต้องผ่านสิ่งที่เรียกว่า "เป้าหมาย" มาแล้วทั้งนั้น 

หากยังนึกไม่ออก ยกตัวอย่างง่ายๆเลย ในเรื่องการเรียน ตอนเด็กๆเราไม่รู้หรอกว่าเป้าหมายที่เราต้องไปให้ถึงคืออะไร พ่อแม่ก็จะกำหนดไว้ให้เราแล้ว คือ การเข้าเรียนชั้นอนุบาล เรียนจบอนุบาล เป้าหมายต่อไป ขึ้น ป.1 จน ไป จบที่ชั้น ป.6 เป้าหมายต่อไป เข้าเรียนชั้น มัธยม 1 ถึง มัธยม 6 แต่ในช่วงระดับมัธยม เริ่มจะมีกิจกรรมต่างๆ เข้ามา ทำให้เกิดมี เป้าหมายที่ตั้งขึ้นเองที่อยากจะสำเร็จให้ได้ขึ้นมา เช่น ความฝันที่อยากเป็นอะไร เป็นหมอ ต้องเรียนสายวิทย์ เป็นวิศวกร หรือว่าเป็นแอร์โฮสเตส เก่งภาษา หากใครเป็นเด็ก ตจว.(ต่างจังหวัด) ช่วง จบ ม.3 จะขึ้น ม.4 จะเป็นช่วงที่เราต้องเลือกสายการเรียน และ การเปลี่ยนที่เรียน เด็ก ตจว. พ่อแม่ บางท่านก็อยากให้เข้าเรียน รร.ใน กทม และ เป็น รร.ที่ (สมัยนั้น หรือ สมัยนี้ด้วยไหม ไม่ทราบได้ เพราะล่วงเลยวัยมานานเหลือเกิน...😙) การันตีว่าเมื่อสอบเข้าเรียนได้ เราจะสามารถสอบเข้า มหาลัยระดับต้นๆของประเทศได้อย่างแน่นอน และจะได้เป็นอย่างที่ฝันไว้ เป็นต้น เห็นไหมว่า เป้าหมายหนึ่งจะโยงเกี่ยวพันกันไปอีกเป้าหมายหนึ่งเสมอๆ 

มาถึงตรงนี้ การตั้งเป้าหมายดูจะไม่ใช่เรื่องยาก เพียงแค่เรามองหาในสิ่งที่เราสนใจถนัด หรือ เป็นสิ่งที่เมื่อเราไปถึงได้แล้ว จะเป็นการเปิดทางเพื่อให้ไปถึงเป้าหมายต่อๆไปได้

ลองตั้งเป้าสุดท้ายของชีวิตดู ว่าเราต้องการอะไร เช่น ในอีกสัก 30 ปี ข้างหน้า เห็นตัวเองเป็นอย่างไร แล้วค่อยๆย่อยลงมา เป็น 20 ปี 10 ปี 5 ปี 1 ปี และ 1 เดือน จากนี้ ไม่ว่าจะเป็นด้าน สุขภาพ, ความสัมพันธ์, การงาน, การเงิน, สังคม, จิตใจ เป็นต้น ใส่เป้าหมายลงไปในทุกๆด้านของชีวิต จะทำให้เราเห็นภาพชัดเจนและสามารถกำหนดเส้นทางเพื่อไปถึงเป้าหมายได้แน่นอน และ สิ่งสำคัญที่จะทำให้เราบรรลุเป้าหมายคือ การลงมือทำ (กำแพง Berlin ไม่ได้สร้างเสร็จในวันเดียวฉันใด เป้าหมายจะสำเร็จได้ หากเราลงมือทำ).....😉😁
Déclaration simplifiée des grids Xamarin.Forms
Tags: xamarinforms, xaml, gridlayout, french
Published: 2020-07-10 14:44:04

---
title: Déclaration simplifiée des grids Xamarin.Forms
published: true
date: 2020-07-10 10:36:35 UTC
tags: XamarinForms,XAML,GridLayout,french
canonical_url: https://www.sylvainmoingeon.fr/declaration-simplifiee-des-grids-xamarinforms/
---
Si la mise-en-page sous Xamarin.Forms passe par l’application de `Layouts` divers et variés, la `grid` est sans doute l’un des plus utilisé puisqu’elle permet d’organiser les éléments visuels en lignes et en colonnes.

![Mise-en-page Grid](https://www.sylvainmoingeon.fr/media/posts/18/layouts-large.png)

Malheureusement, la définition des lignes et colonnes, particulièrement verbeuse, a vite tendance à alourdir le code `xaml`. Et bien entendu, lorsqu’on imbrique des grids à l’intérieur d’autres grids cela rend très vite notre `xaml` assez touffu, pour ne pas dire illisible.

Il était donc temps de mettre la `grid` à la diète. Celle-ci a été mise au régime dans la version 4.7 de Xamarin.Forms.

* * *

# Avant

Initialement, la structure d’une `Grid` était définie par deux groupes de balises, `Grid.ColumnDefinitions` et `Grid.RowDefinitions`, contenant elles-mêmes la liste de chaque colonne et chaque ligne de la grille.

La hauteur et la largeur des lignes et colonnes étaient définies dans chaque balise `RowDefinition` et `ColumnDefinition` via les attributs `Height` et `Width`.

C’est aussi lourd à appliquer qu’à expliquer :

```xml
<Grid>
    <!-- Structure de la grille -->
    <Grid.RowDefinitions>
          <RowDefinition Height="1*"/>
          <RowDefinition Height="Auto"/>
          <RowDefinition Height="25"/>
          <RowDefinition Height="14"/>
          <RowDefinition Height="20"/>
      </Grid.RowDefinitions>

      <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="2*"/>
          <ColumnDefinition Width="Auto"/>
          <ColumnDefinition Width="300"/>
      </Grid.ColumnDefinitions>

    <!-- Contenu de la grille -->
</Grid>
```

Voilà, la grille est déclarée, occupe déjà une place non négligeable dans le fichier `xaml` et pourtant elle ne contient encore aucun contenu !

Désormais, c’est possible de faire beaucoup plus rapide et concis. 😊

# Après

Grace à la [syntaxe simplifiée](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid#simplify-row-and-column-definitions "syntaxe simplifée de déclaration des Grids sous Xamarin.Forms") introduite dans Xamarin.Forms 4.7, l’ensemble des lignes et colonnes sont simplement définies à l’intérieur de la balise `Grid`, via des attributs `RowDefinitions` et `GridDefinitions`, par une liste de valeurs séparées par des virgules.

Tout le code précédent se résume alors à ça :

```xml
<Grid RowDefinitions="1*, Auto, 25, 14, 20"
      ColumnDefinitions="*, 2*, Auto, 300">
    <!-- Contenu de la grille -->
</Grid>
```

C’est-y pas magnifique ? 😍
Widget testing passed in function
Tags: mockito, widgettesting, flutter, unittesting
Published: 2020-07-10 12:38:21

---
title: Widget testing passed in function
published: true
date: 2020-07-10 10:31:23 UTC
tags: mockito,widgettesting,flutter,unittesting
canonical_url: https://medium.com/wyzetalk-tech/widget-testing-passed-in-function-169c2633180b
---

![](https://cdn-images-1.medium.com/max/534/1*4ezoav544ciIcSAa67ci1w.png)

In this post, we going to go through how, at least in my opinion, one would go about testing that a function is called within a widget when that function is one of the Widgets arguments.

Take the following overly simplified example…

```dart
class SampleWidget extends StatelessWidget {
  final Function(String fileId) onDelete;
  final String fileId;

  const SampleWidget({
    @required this.onDelete,
    @required this.fileId,
    foundation.Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    throw FlatButton(
      onPressed: () => onDelete(fileId),
      child: const Text('Delete'),
    );
  }
}
```

As you can see we have a simple “reusable” widget that takes a `fileId` and a `onDelete` function.

Testing this in the implementing widget is quite simple as you would simply verify the resulting function is called.

However, if you wished to test this widget in isolation, there are a few more steps required.

In our current project, we added a very simple helper class:

```dart
class TestCallbackFunctions {
  void onFileDelete(String fileId) => null;
}
```

This class will then hold simply “mock” functions that we can pass into reusable widgets to test it completely.

* * *