<style>/*<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=548045071468246972&zx=2f60e946-9a4b-4c0a-997b-04338adedcf3' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=548045071468246972&zx=2f60e946-9a4b-4c0a-997b-04338adedcf3' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6102615754735220&host=ca-host-pub-1556223355139109" crossorigin="anonymous"></script>

<!-- data-ad-client=ca-pub-6102615754735220 -->

</head><body>*/</style>

Flutter UI Tutorial - Scooter Rent App UI Design (Figma to Flutter)

Abdul Aziz Ahwan

6 Dec, 2023

Hi everyone, I am Abdul Aziz Ahwan Indonesia,

In this post, we will learn Flutter UI which we are going to convert Job Search App UI Design to Flutter. Thank you PIXELT15 for creating this awesome design! https://s.id/1Y0TY

🔖 JOIN FLUTTER COURSE 🔖

Build real, responsive applications! (Portfolio, E-commerce, Crypto App, Budget Tracker)

This course is designed for beginner to intermediate developers who want to build their future with Flutter

https://gumroad.com/a/659170419/fqamxr

💻 MY SCREEN RECORDING 💻

Screen Studio makes it easy to create beautiful screen recordings in minutes. Pay One Use Screen Studio Forever.

https://screen.studio/@Zgn84

https://screen.studio/@Zgn84

🔨 PACKAGE FOR THIS PROJECT

- google_fonts (https://pub.dev/packages/google_fonts)

- flutter_svg (https://pub.dev/packages/flutter_svg)

📂 PROJECT FILE

- UI Design File (https://s.id/1Y0TY)

- Flutter Project Code (abdulazizahwan.gumroad.com/l/ghpdsz)

This post was made with great effort,

If you want to support me you can donate to the following link

👨🏻‍💻 BE A SUPPORTER ON YOUTUBE

Link ► https://www.youtube.com/channel/UCQUfwiydQHf0u4Gb6uT-hyA/join

💰 PAYPAL

Link ► https://paypal.me/abdulazizahwan

🧧 SAWERIA

Link ► https://saweria.co/abdulazizahwan

🪙 TRAKTEER

Link ► https://trakteer.id/abdulazizahwan

☕ BUY ME A COFFEE

Link ► https://buymeacoffee.com/abdulazizahwan

⚠️ FLUTTER & DART VERSION

- Flutter 3.13.9

- Dart 3.1.5

coders Design Figma To Flutter flutter free github react react native rent scooter Source Code UI ux

<style>/*
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/984859869-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY73SuiRW1bPJgr6n1S5pADMn-GhSQ:1732196061001';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d548045071468246972','//www.abdulazizahwan.com/2023/12/flutter-ui-tutorial-scooter-rent-app-ui-design-figma-to-flutter.html','548045071468246972');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '548045071468246972', 'title': 'Abdul Aziz Ahwan', 'url': 'https://www.abdulazizahwan.com/2023/12/flutter-ui-tutorial-scooter-rent-app-ui-design-figma-to-flutter.html', 'canonicalUrl': 'https://www.abdulazizahwan.com/2023/12/flutter-ui-tutorial-scooter-rent-app-ui-design-figma-to-flutter.html', 'homepageUrl': 'https://www.abdulazizahwan.com/', 'searchUrl': 'https://www.abdulazizahwan.com/search', 'canonicalHomepageUrl': 'https://www.abdulazizahwan.com/', 'blogspotFaviconUrl': 'https://www.abdulazizahwan.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'G-KJG2YX6J4R', 'analytics4': true, 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Abdul Aziz Ahwan - Atom\x22 href\x3d\x22https://www.abdulazizahwan.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Abdul Aziz Ahwan - RSS\x22 href\x3d\x22https://www.abdulazizahwan.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Abdul Aziz Ahwan - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/548045071468246972/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Abdul Aziz Ahwan - Atom\x22 href\x3d\x22https://www.abdulazizahwan.com/feeds/427493866555954590/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-6102615754735220', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/8f7002974bbf4dbb', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '427493866555954590', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMO_Jf5ginbm8suCfloqs8Ivrk007mvgZRm_KUlKQTMNiZoSYyAiPmzTC5L4FaUOFp8M-UPM4TJ6uEQrd-z3qRCRdJqWHKDULKS9uKPDLnXBZh2wZrFko5MrllZ0ZSiGwPK7vdR33FaKI5Gq-I6W01vcOSXej_KAKvAFP3gVIAWHRJvZehs4xg0Qnu3G2Y/s72-w640-c-h360/Flutter%20UI%20Scooter%20Rent%20App%20(1).png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMO_Jf5ginbm8suCfloqs8Ivrk007mvgZRm_KUlKQTMNiZoSYyAiPmzTC5L4FaUOFp8M-UPM4TJ6uEQrd-z3qRCRdJqWHKDULKS9uKPDLnXBZh2wZrFko5MrllZ0ZSiGwPK7vdR33FaKI5Gq-I6W01vcOSXej_KAKvAFP3gVIAWHRJvZehs4xg0Qnu3G2Y/w640-h360/Flutter%20UI%20Scooter%20Rent%20App%20(1).png', 'pageName': 'Flutter UI Tutorial - Scooter Rent App UI Design (Figma to Flutter)', 'pageTitle': 'Abdul Aziz Ahwan: Flutter UI Tutorial - Scooter Rent App UI Design (Figma to Flutter)', 'metaDescription': 'Flutter UI Tutorial - Scooter Rent App UI Design (Figma to Flutter)'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Flutter UI Tutorial - Scooter Rent App UI Design (Figma to Flutter)', 'description': 'Flutter UI Tutorial - Scooter Rent App UI Design (Figma to Flutter)', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMO_Jf5ginbm8suCfloqs8Ivrk007mvgZRm_KUlKQTMNiZoSYyAiPmzTC5L4FaUOFp8M-UPM4TJ6uEQrd-z3qRCRdJqWHKDULKS9uKPDLnXBZh2wZrFko5MrllZ0ZSiGwPK7vdR33FaKI5Gq-I6W01vcOSXej_KAKvAFP3gVIAWHRJvZehs4xg0Qnu3G2Y/w640-h360/Flutter%20UI%20Scooter%20Rent%20App%20(1).png', 'url': 'https://www.abdulazizahwan.com/2023/12/flutter-ui-tutorial-scooter-rent-app-ui-design-figma-to-flutter.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 427493866555954590}}, {'name': 'widgets', 'data': [{'title': 'Upload Image', 'type': 'Image', 'sectionId': 'upload-image', 'id': 'Image10'}, {'title': 'Logo', 'type': 'HTML', 'sectionId': 'header-main', 'id': 'HTML10'}, {'title': 'Icons, Dark, Search', 'type': 'LinkList', 'sectionId': 'header-main', 'id': 'LinkList10'}, {'title': 'Menu', 'type': 'LinkList', 'sectionId': 'header-main', 'id': 'LinkList11'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'before-blog', 'id': 'HTML11'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'before-post', 'id': 'HTML12'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'blog-post', 'id': 'Blog1', 'posts': [{'id': '427493866555954590', 'title': 'Flutter UI Tutorial - Scooter Rent App UI Design (Figma to Flutter)', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMO_Jf5ginbm8suCfloqs8Ivrk007mvgZRm_KUlKQTMNiZoSYyAiPmzTC5L4FaUOFp8M-UPM4TJ6uEQrd-z3qRCRdJqWHKDULKS9uKPDLnXBZh2wZrFko5MrllZ0ZSiGwPK7vdR33FaKI5Gq-I6W01vcOSXej_KAKvAFP3gVIAWHRJvZehs4xg0Qnu3G2Y/w640-h360/Flutter%20UI%20Scooter%20Rent%20App%20(1).png', 'showInlineAds': true}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': 'Posted by'}, {'name': 'timestamp', 'label': 'd MMM, yyyy'}, {'name': 'comments', 'label': 'Comments'}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'Labels:'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Posted by'}, {'name': 'timestamp', 'label': 'd MMM, yyyy'}, {'name': 'comments', 'label': 'Comments'}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': 'Labels:'}]}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'ads-post', 'id': 'HTML13'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'ads-post', 'id': 'HTML14'}, {'title': '#You may also like', 'type': 'HTML', 'sectionId': 'ads-post', 'id': 'HTML15'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'ads-post', 'id': 'HTML16'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'ads-post', 'id': 'HTML17'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'after-blog', 'id': 'HTML18'}, {'title': '#Recent Post', 'type': 'HTML', 'sectionId': 'sidebar-static', 'id': 'HTML19'}, {'title': 'Blog Archive', 'type': 'BlogArchive', 'sectionId': 'sidebar-static', 'id': 'BlogArchive10'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'sidebar-sticky', 'id': 'HTML2'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'sidebar-sticky', 'id': 'HTML20'}, {'type': 'AdSense', 'sectionId': 'sidebar-sticky', 'id': 'AdSense1'}, {'title': 'About Us', 'type': 'HTML', 'sectionId': 'footer-widget', 'id': 'HTML21'}, {'title': 'Verified by', 'type': 'HTML', 'sectionId': 'footer-widget', 'id': 'HTML1'}, {'title': 'Learn More', 'type': 'LinkList', 'sectionId': 'footer-widget', 'id': 'LinkList13'}, {'title': 'Follow Us', 'type': 'LinkList', 'sectionId': 'footer-widget', 'id': 'LinkList14'}, {'title': 'Copyright', 'type': 'HTML', 'sectionId': 'copyright', 'id': 'HTML23'}, {'title': 'SVG Icons', 'type': 'HTML', 'sectionId': 'jet-options', 'id': 'HTML24'}]}]);
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image10', 'upload-image', document.getElementById('Image10'), {'resize': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML10', 'header-main', document.getElementById('HTML10'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList10', 'header-main', document.getElementById('LinkList10'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList11', 'header-main', document.getElementById('LinkList11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML11', 'before-blog', document.getElementById('HTML11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML12', 'before-post', document.getElementById('HTML12'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'blog-post', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2646514562-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/1964470060-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML13', 'ads-post', document.getElementById('HTML13'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML14', 'ads-post', document.getElementById('HTML14'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML15', 'ads-post', document.getElementById('HTML15'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML16', 'ads-post', document.getElementById('HTML16'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML17', 'ads-post', document.getElementById('HTML17'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML18', 'after-blog', document.getElementById('HTML18'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML19', 'sidebar-static', document.getElementById('HTML19'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive10', 'sidebar-static', document.getElementById('BlogArchive10'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'sidebar-sticky', document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML20', 'sidebar-sticky', document.getElementById('HTML20'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AdSenseView', new _WidgetInfo('AdSense1', 'sidebar-sticky', document.getElementById('AdSense1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML21', 'footer-widget', document.getElementById('HTML21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'footer-widget', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList13', 'footer-widget', document.getElementById('LinkList13'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList14', 'footer-widget', document.getElementById('LinkList14'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML23', 'copyright', document.getElementById('HTML23'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML24', 'jet-options', document.getElementById('HTML24'), {}, 'displayModeFull'));
</script>
</body>*/</style>