Help us understand the problem. What is going on with this article?

DribbbleでFlutterのUI実装力を高める

みなさん、こんにちは
とあるサラダ🥗の会社で開発やってます umatoma です。

最近はFlutterのUI実装力を高めようと、
Dribbbleで公開されているデザインをFlutterで再現してみているので、紹介したいと思います。

Dribbble

https://dribbble.com/

Dribbble is the world’s leading community for creatives to share, grow, and get hired.

Dribbbleには👇のように、様々なデザインが投稿されていて、
アプリUIに関するデザインも沢山🤩あります。

また、動画で投稿されているものもあったりして、
アニメーションを含んだデザインが見れる点はとても良いです👍

で、このDribbleで公開されているデザインをFlutterで再現して、
FlutterのUI実装力を高めようと試みています💪💪💪

スクリーンショット 2020-05-22 19.49.39.png

DribbbleのデザインをFlutterで再現してみる

今の所、こんな感じでDribbbleのデザインをベースにFlutterで再現してみました。

デザイン Flutterで再現してみたやつ
Mobile Digital Wellbeing Application by Umar Abdul Azis on Dribbble sign-in-sign-up.png
Sign In/ Sign Up Page App UI by Md. Hafizur Rahaman on Dribbble
Flight and Hotel Booking App by Subash Chandra on Dribbble flight-booking.png
UI modeling. Admin mobile main views set by Maxim Aginsky on Dribbble

詳しい実装方法の説明は👇で紹介しているので、良かったら見てみて下さい👀

Flutterで再現してみて

形状が複雑でない多くのパーツは
標準で提供されいるWidgetを組み合わせることで簡単に実装することができました。

ですが、少し凝った形状になるとただWidgetを組み合わせるだけで
実現するのが難しくなりました😥

そういった時は ClipPathCustomPaint などを使って、
自分で Path を描きデザインを実装する必要があります。

それがデメリットかと言うと、そうでもないかなと思っています。

UI modeling. Admin mobile main views set by Maxim Aginsky のインジケーター部分のように、
複雑なデザインのパーツがあたっとしても
CustomPaint などを使えば自分で描画すれば実装できてしまうという事です。

Flutterは提供されているWidgetを組み合わせるだけでも整ったUIを実装することができますが、
やはり、凝ったデザインを実装するには CustomPaint などを使いこなす必要がありそうです💪

今後は、アニメーションを含めたUIの実装にチャレンジして行きたいと思います。

まとめ

  • Flutterに限らず、UI実装力を高めたい時のデザインを探すにはDribbbleを使うと良い
  • FlutterのUI実装力を高めるには CustomPaint などを扱えるようにする

最後に

今回のデザインの実装方法を含めた、
Flutter入門用のWebサイトを公開しているので、興味があったら使ってみて下さい。

Flutterで始めるアプリ開発
https://www.flutter-study.dev/

umatoma
どこにでもいる普通のエンジニアです。 最近はFlutter・Firebase辺りを使ってます。
https://www.flutter-study.dev/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした