うまとま君の技術めも

2015年新卒入社した社畜の勉強内容などなど

Flutter Widget of the Week まとめ 1

Flutter

Flutter Widget of the Week

Flutter Widget of the Week で紹介されたWidgetを実際に使ってみたいと思います。

Flutter Widget of the Week - YouTube

SafeArea

YouTube
- https://www.youtube.com/watch?v=lkF0TQJO0bA
API Docs
- https://api.flutter.dev/flutter/widgets/SafeArea-class.html
サンプルコード
- https://dartpad.dev/14b18bdb0915860266fcf1cd59c9c467

Expanded

YouTube
- https://www.youtube.com/watch?v=_rnZaagadyo
API Docs
- https://api.flutter.dev/flutter/widgets/Expanded-class.html
サンプルコード
- https://dartpad.dev/0085c02e9570644743f47ded6fe34759

Wrap

YouTube
- https://www.youtube.com/watch?v=z5iw2SeFx2M
API Docs
- https://api.flutter.dev/flutter/widgets/Wrap-class.html
サンプルコード
- https://dartpad.dev/6140af4c2e2381912c355c37dd9afe57

AnimatedContainer

YouTube
- https://www.youtube.com/watch?v=yI-8QHpGIP4
API Docs
- https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html
サンプルコード
- https://dartpad.dev/2de98baa862349c2d8817148e5437927

Opacity

YouTube
- https://www.youtube.com/watch?v=9hltevOHQBw
API Docs
- https://api.flutter.dev/flutter/widgets/Opacity-class.html
サンプルコード
- https://dartpad.dev/2597aada5a2062b9a08480574741312e

FutureBuilder

YouTube
- https://www.youtube.com/watch?v=ek8ZPdWj4Qo
API Docs
- https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html
サンプルコード
- https://dartpad.dev/f02cf37b5e261ffdeb4f65eafbd42e5d

FadeTransition

YouTube
- https://www.youtube.com/watch?v=rLwWVbv3xDQ
API Docs
- https://api.flutter.dev/flutter/widgets/FadeTransition-class.html
サンプルコード
- https://dartpad.dev/bcc65888260503b14eb555aa2058f328

FloatingActionButton

YouTube
- https://www.youtube.com/watch?v=2uaoEDOgk_I
API Docs
- https://api.flutter.dev/flutter/material/FloatingActionButton-class.html
サンプルコード
- https://dartpad.dev/885edaa2ded97c35cbc69b420c95a371

PageView

YouTube
- https://www.youtube.com/watch?v=J1gE9xvph-A
API Docs
- https://api.flutter.dev/flutter/widgets/PageView-class.html
サンプルコード
- https://dartpad.dev/4a8164727927ce8bfa836a82759ce631

Table

YouTube
- https://www.youtube.com/watch?v=_lbE0wsVZSw
API Docs
- https://api.flutter.dev/flutter/widgets/Table-class.html
サンプルコード
- https://dartpad.dev/0abc021a01912bc6b87332056754bad4

SliverAppBar

YouTube
- https://www.youtube.com/watch?v=R9C5KMJKluE
API Docs
- https://api.flutter.dev/flutter/material/SliverAppBar-class.html
サンプルコード
- https://dartpad.dev/a22021f999a44602daca5402983268d0

SliverList & SliverGrid

FadeInImage

YouTube
- https://www.youtube.com/watch?v=pK738Pg9cxc
API Docs
- https://api.flutter.dev/flutter/widgets/FadeInImage-class.html
サンプルコード
- https://dartpad.dev/48087ff082d375c56bd2c4d247bbaa50

StreamBuilder

YouTube
- https://www.youtube.com/watch?v=MkKEWHfy99Y
API Docs
- https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html
サンプルコード
- https://dartpad.dev/5226e81f182809cac8919c59405b7ef3

InheritedModel

YouTube
- https://www.youtube.com/watch?v=ml5uefGgkaA
API Docs
- https://api.flutter.dev/flutter/widgets/InheritedModel-class.html
サンプルコード
- https://dartpad.dev/fbfb6a3ac3883d6c4159c21fbce01593

ClipRRect

YouTube
- https://www.youtube.com/watch?v=eI43jkQkrvs
API Docs
- https://api.flutter.dev/flutter/widgets/ClipRRect-class.html
サンプルコード
- https://dartpad.dev/d91c8743a4e10e9a639c62cf4bc289d3

Hero

YouTube
- https://www.youtube.com/watch?v=Be9UH1kXFDw
API Docs
- https://api.flutter.dev/flutter/widgets/Hero-class.html
サンプルコード
- https://dartpad.dev/696f2bf5385e8a3580175e3dddd8c0db

CustomPaint

YouTube
- https://www.youtube.com/watch?v=kp14Y4uHpHs
API Docs
- https://api.flutter.dev/flutter/widgets/CustomPaint-class.html
サンプルコード
- https://dartpad.dev/266bd7ee9dc2e3c55c6fc55d2552b742

Tooltip

YouTube
- https://www.youtube.com/watch?v=EeEfD5fI-5Q
API Docs
- https://api.flutter.dev/flutter/material/Tooltip-class.html
サンプルコード
- https://dartpad.dev/012b74659c45a09e2ffd7d0d14be7ca7