Do anyone know how to hide flat shipping when free shipping is eligible in magento 2.1?
As far as I know, this is not default functionality. I can think of a few routes to address this issue.
hack - use jQuery to detect free shipping loaded, hide flat shipping if so. I will note that you can finish the task quickly, but it will become very difficult in the future to keep track of. I recommend following more of a Magento-approved style.
Override the template that displays that step in checkout. A quick look indicates that the relevant template is
vendor/magento/module-checkout/view/frontend/web/template/shipping.html. So, you would bring that template into your theme as described in the M2 docs.
It looks like the table is populated using the knockout.js framework. This is a bit more involved. To integrate with knockout you're gonna want to do some climbing up the learning curve, first. 1) interactive beginning tutorial 2) Alan Storm series. But yeah, that's probably the most direct route: override the template and modify to suit your needs.
- Alternatively, you could get more tricky with knockout, or possibly with a Magento interceptor, in order to modify the template's behavior without overriding it.