<!DOCTYPE html> <html> <head itemscope itemtype="https://schema.org/WebSite"> <meta charset="utf-8"> <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","errorBeacon":"bam.nr-data.net","licenseKey":"50be1a5c2f","applicationID":"10371034","transactionName":"JlhdRhEOCQhdExoUEQpTRlEXThYMVxZqBwIRUlRdERg=","queueTime":2,"applicationTime":171,"agent":""}</script> <script type="text/javascript">(window.NREUM||(NREUM={})).init={ajax:{deny_list:["bam.nr-data.net"]}};(window.NREUM||(NREUM={})).loader_config={licenseKey:"50be1a5c2f",applicationID:"10371034"};;/*! For license information please see nr-loader-rum-1.274.0.min.js.LICENSE.txt */ (()=>{var e,t,r={8122:(e,t,r)=>{"use strict";r.d(t,{a:()=>i});var n=r(944);function i(e,t){try{if(!e||"object"!=typeof e)return(0,n.R)(3);if(!t||"object"!=typeof t)return(0,n.R)(4);const r=Object.create(Object.getPrototypeOf(t),Object.getOwnPropertyDescriptors(t)),o=0===Object.keys(r).length?e:r;for(let a in o)if(void 0!==e[a])try{if(null===e[a]){r[a]=null;continue}Array.isArray(e[a])&&Array.isArray(t[a])?r[a]=Array.from(new Set([...e[a],...t[a]])):"object"==typeof e[a]&&"object"==typeof t[a]?r[a]=i(e[a],t[a]):r[a]=e[a]}catch(e){(0,n.R)(1,e)}return r}catch(e){(0,n.R)(2,e)}}},2555:(e,t,r)=>{"use strict";r.d(t,{Vp:()=>c,fn:()=>s,x1:()=>u});var n=r(384),i=r(8122);const o={beacon:n.NT.beacon,errorBeacon:n.NT.errorBeacon,licenseKey:void 0,applicationID:void 0,sa:void 0,queueTime:void 0,applicationTime:void 0,ttGuid:void 0,user:void 0,account:void 0,product:void 0,extra:void 0,jsAttributes:{},userAttributes:void 0,atts:void 0,transactionName:void 0,tNamePlain:void 0},a={};function s(e){try{const t=c(e);return!!t.licenseKey&&!!t.errorBeacon&&!!t.applicationID}catch(e){return!1}}function c(e){if(!e)throw new Error("All info objects require an agent identifier!");if(!a[e])throw new Error("Info for ".concat(e," was never set"));return a[e]}function u(e,t){if(!e)throw new Error("All info objects require an agent identifier!");a[e]=(0,i.a)(t,o);const r=(0,n.nY)(e);r&&(r.info=a[e])}},9417:(e,t,r)=>{"use strict";r.d(t,{D0:()=>g,gD:()=>h,xN:()=>p});var n=r(993);const i=e=>{if(!e||"string"!=typeof e)return!1;try{document.createDocumentFragment().querySelector(e)}catch{return!1}return!0};var o=r(2614),a=r(944),s=r(384),c=r(8122);const u="[data-nr-mask]",d=()=>{const e={mask_selector:"*",block_selector:"[data-nr-block]",mask_input_options:{color:!1,date:!1,"datetime-local":!1,email:!1,month:!1,number:!1,range:!1,search:!1,tel:!1,text:!1,time:!1,url:!1,week:!1,textarea:!1,select:!1,password:!0}};return{ajax:{deny_list:void 0,block_internal:!0,enabled:!0,harvestTimeSeconds:10,autoStart:!0},distributed_tracing:{enabled:void 0,exclude_newrelic_header:void 0,cors_use_newrelic_header:void 0,cors_use_tracecontext_headers:void 0,allowed_origins:void 0},feature_flags:[],generic_events:{enabled:!0,harvestTimeSeconds:30,autoStart:!0},harvest:{tooManyRequestsDelay:60},jserrors:{enabled:!0,harvestTimeSeconds:10,autoStart:!0},logging:{enabled:!0,harvestTimeSeconds:10,autoStart:!0,level:n.p_.INFO},metrics:{enabled:!0,autoStart:!0},obfuscate:void 0,page_action:{enabled:!0},page_view_event:{enabled:!0,autoStart:!0},page_view_timing:{enabled:!0,harvestTimeSeconds:30,autoStart:!0},performance:{capture_marks:!1,capture_measures:!1},privacy:{cookies_enabled:!0},proxy:{assets:void 0,beacon:void 0},session:{expiresMs:o.wk,inactiveMs:o.BB},session_replay:{autoStart:!0,enabled:!1,harvestTimeSeconds:60,preload:!1,sampling_rate:10,error_sampling_rate:100,collect_fonts:!1,inline_images:!1,fix_stylesheets:!0,mask_all_inputs:!0,get mask_text_selector(){return e.mask_selector},set mask_text_selector(t){i(t)?e.mask_selector="".concat(t,",").concat(u):""===t||null===t?e.mask_selector=u:(0,a.R)(5,t)},get block_class(){return"nr-block"},get ignore_class(){return"nr-ignore"},get mask_text_class(){return"nr-mask"},get block_selector(){return e.block_selector},set block_selector(t){i(t)?e.block_selector+=",".concat(t):""!==t&&(0,a.R)(6,t)},get mask_input_options(){return e.mask_input_options},set mask_input_options(t){t&&"object"==typeof t?e.mask_input_options={...t,password:!0}:(0,a.R)(7,t)}},session_trace:{enabled:!0,harvestTimeSeconds:10,autoStart:!0},soft_navigations:{enabled:!0,harvestTimeSeconds:10,autoStart:!0},spa:{enabled:!0,harvestTimeSeconds:10,autoStart:!0},ssl:void 0,user_actions:{enabled:!0}}},l={},f="All configuration objects require an agent identifier!";function g(e){if(!e)throw new Error(f);if(!l[e])throw new Error("Configuration for ".concat(e," was never set"));return l[e]}function p(e,t){if(!e)throw new Error(f);l[e]=(0,c.a)(t,d());const r=(0,s.nY)(e);r&&(r.init=l[e])}function h(e,t){if(!e)throw new Error(f);var r=g(e);if(r){for(var n=t.split("."),i=0;i<n.length-1;i++)if("object"!=typeof(r=r[n[i]]))return;r=r[n[n.length-1]]}return r}},3371:(e,t,r)=>{"use strict";r.d(t,{V:()=>f,f:()=>l});var n=r(8122),i=r(384),o=r(6154),a=r(9324);let s=0;const c={buildEnv:a.F3,distMethod:a.Xs,version:a.xv,originTime:o.WN},u={customTransaction:void 0,disabled:!1,isolatedBacklog:!1,loaderType:void 0,maxBytes:3e4,onerror:void 0,ptid:void 0,releaseIds:{},appMetadata:{},session:void 0,denyList:void 0,timeKeeper:void 0,obfuscator:void 0},d={};function l(e){if(!e)throw new Error("All runtime objects require an agent identifier!");if(!d[e])throw new Error("Runtime for ".concat(e," was never set"));return d[e]}function f(e,t){if(!e)throw new Error("All runtime objects require an agent identifier!");d[e]={...(0,n.a)(t,u),...c},Object.hasOwnProperty.call(d[e],"harvestCount")||Object.defineProperty(d[e],"harvestCount",{get:()=>++s});const r=(0,i.nY)(e);r&&(r.runtime=d[e])}},9324:(e,t,r)=>{"use strict";r.d(t,{F3:()=>i,Xs:()=>o,xv:()=>n});const n="1.274.0",i="PROD",o="CDN"},6154:(e,t,r)=>{"use strict";r.d(t,{OF:()=>c,RI:()=>i,WN:()=>d,bv:()=>o,gm:()=>a,mw:()=>s,sb:()=>u});var n=r(1863);const i="undefined"!=typeof window&&!!window.document,o="undefined"!=typeof WorkerGlobalScope&&("undefined"!=typeof self&&self instanceof WorkerGlobalScope&&self.navigator instanceof WorkerNavigator||"undefined"!=typeof globalThis&&globalThis instanceof WorkerGlobalScope&&globalThis.navigator instanceof WorkerNavigator),a=i?window:"undefined"!=typeof WorkerGlobalScope&&("undefined"!=typeof self&&self instanceof WorkerGlobalScope&&self||"undefined"!=typeof globalThis&&globalThis instanceof WorkerGlobalScope&&globalThis),s=Boolean("hidden"===a?.document?.visibilityState),c=/iPad|iPhone|iPod/.test(a.navigator?.userAgent),u=c&&"undefined"==typeof SharedWorker,d=((()=>{const e=a.navigator?.userAgent?.match(/Firefox[/\s](\d+\.\d+)/);Array.isArray(e)&&e.length>=2&&e[1]})(),Date.now()-(0,n.t)())},1687:(e,t,r)=>{"use strict";r.d(t,{Ak:()=>c,Ze:()=>l,x3:()=>u});var n=r(7836),i=r(3606),o=r(860),a=r(2646);const s={};function c(e,t){const r={staged:!1,priority:o.P3[t]||0};d(e),s[e].get(t)||s[e].set(t,r)}function u(e,t){e&&s[e]&&(s[e].get(t)&&s[e].delete(t),g(e,t,!1),s[e].size&&f(e))}function d(e){if(!e)throw new Error("agentIdentifier required");s[e]||(s[e]=new Map)}function l(e="",t="feature",r=!1){if(d(e),!e||!s[e].get(t)||r)return g(e,t);s[e].get(t).staged=!0,f(e)}function f(e){const t=Array.from(s[e]);t.every((([e,t])=>t.staged))&&(t.sort(((e,t)=>e[1].priority-t[1].priority)),t.forEach((([t])=>{s[e].delete(t),g(e,t)})))}function g(e,t,r=!0){const o=e?n.ee.get(e):n.ee,s=i.i.handlers;if(!o.aborted&&o.backlog&&s){if(r){const e=o.backlog[t],r=s[t];if(r){for(let t=0;e&&t<e.length;++t)p(e[t],r);Object.entries(r).forEach((([e,t])=>{Object.values(t||{}).forEach((t=>{t[0]?.on&&t[0]?.context()instanceof a.y&&t[0].on(e,t[1])}))}))}}o.isolatedBacklog||delete s[t],o.backlog[t]=null,o.emit("drain-"+t,[])}}function p(e,t){var r=e[1];Object.values(t[r]||{}).forEach((t=>{var r=e[0];if(t[0]===r){var n=t[1],i=e[3],o=e[2];n.apply(i,o)}}))}},7836:(e,t,r)=>{"use strict";r.d(t,{P:()=>c,ee:()=>u});var n=r(384),i=r(8990),o=r(3371),a=r(2646),s=r(5607);const c="nr@context:".concat(s.W),u=function e(t,r){var n={},s={},d={},l=!1;try{l=16===r.length&&(0,o.f)(r).isolatedBacklog}catch(e){}var f={on:p,addEventListener:p,removeEventListener:function(e,t){var r=n[e];if(!r)return;for(var i=0;i<r.length;i++)r[i]===t&&r.splice(i,1)},emit:function(e,r,n,i,o){!1!==o&&(o=!0);if(u.aborted&&!i)return;t&&o&&t.emit(e,r,n);for(var a=g(n),c=h(e),d=c.length,l=0;l<d;l++)c[l].apply(a,r);var p=m()[s[e]];p&&p.push([f,e,r,a]);return a},get:v,listeners:h,context:g,buffer:function(e,t){const r=m();if(t=t||"feature",f.aborted)return;Object.entries(e||{}).forEach((([e,n])=>{s[n]=t,t in r||(r[t]=[])}))},abort:function(){f._aborted=!0,Object.keys(f.backlog).forEach((e=>{delete f.backlog[e]}))},isBuffering:function(e){return!!m()[s[e]]},debugId:r,backlog:l?{}:t&&"object"==typeof t.backlog?t.backlog:{},isolatedBacklog:l};return Object.defineProperty(f,"aborted",{get:()=>{let e=f._aborted||!1;return e||(t&&(e=t.aborted),e)}}),f;function g(e){return e&&e instanceof a.y?e:e?(0,i.I)(e,c,(()=>new a.y(c))):new a.y(c)}function p(e,t){n[e]=h(e).concat(t)}function h(e){return n[e]||[]}function v(t){return d[t]=d[t]||e(f,t)}function m(){return f.backlog}}(void 0,"globalEE"),d=(0,n.Zm)();d.ee||(d.ee=u)},2646:(e,t,r)=>{"use strict";r.d(t,{y:()=>n});class n{constructor(e){this.contextId=e}}},9908:(e,t,r)=>{"use strict";r.d(t,{d:()=>n,p:()=>i});var n=r(7836).ee.get("handle");function i(e,t,r,i,o){o?(o.buffer([e],i),o.emit(e,t,r)):(n.buffer([e],i),n.emit(e,t,r))}},3606:(e,t,r)=>{"use strict";r.d(t,{i:()=>o});var n=r(9908);o.on=a;var i=o.handlers={};function o(e,t,r,o){a(o||n.d,i,e,t,r)}function a(e,t,r,i,o){o||(o="feature"),e||(e=n.d);var a=t[o]=t[o]||{};(a[r]=a[r]||[]).push([e,i])}},3878:(e,t,r)=>{"use strict";function n(e,t){return{capture:e,passive:!1,signal:t}}function i(e,t,r=!1,i){window.addEventListener(e,t,n(r,i))}function o(e,t,r=!1,i){document.addEventListener(e,t,n(r,i))}r.d(t,{DD:()=>o,jT:()=>n,sp:()=>i})},5607:(e,t,r)=>{"use strict";r.d(t,{W:()=>n});const n=(0,r(9566).bz)()},9566:(e,t,r)=>{"use strict";r.d(t,{LA:()=>s,bz:()=>a});var n=r(6154);const i="xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";function o(e,t){return e?15&e[t]:16*Math.random()|0}function a(){const e=n.gm?.crypto||n.gm?.msCrypto;let t,r=0;return e&&e.getRandomValues&&(t=e.getRandomValues(new Uint8Array(30))),i.split("").map((e=>"x"===e?o(t,r++).toString(16):"y"===e?(3&o()|8).toString(16):e)).join("")}function s(e){const t=n.gm?.crypto||n.gm?.msCrypto;let r,i=0;t&&t.getRandomValues&&(r=t.getRandomValues(new Uint8Array(e)));const a=[];for(var s=0;s<e;s++)a.push(o(r,i++).toString(16));return a.join("")}},2614:(e,t,r)=>{"use strict";r.d(t,{BB:()=>a,H3:()=>n,g:()=>u,iL:()=>c,tS:()=>s,uh:()=>i,wk:()=>o});const n="NRBA",i="SESSION",o=144e5,a=18e5,s={STARTED:"session-started",PAUSE:"session-pause",RESET:"session-reset",RESUME:"session-resume",UPDATE:"session-update"},c={SAME_TAB:"same-tab",CROSS_TAB:"cross-tab"},u={OFF:0,FULL:1,ERROR:2}},1863:(e,t,r)=>{"use strict";function n(){return Math.floor(performance.now())}r.d(t,{t:()=>n})},944:(e,t,r)=>{"use strict";function n(e,t){"function"==typeof console.debug&&console.debug("New Relic Warning: https://github.com/newrelic/newrelic-browser-agent/blob/main/docs/warning-codes.md#".concat(e),t)}r.d(t,{R:()=>n})},5284:(e,t,r)=>{"use strict";r.d(t,{t:()=>c,B:()=>s});var n=r(7836),i=r(6154);const o="newrelic";const a=new Set,s={};function c(e,t){const r=n.ee.get(t);s[t]??={},e&&"object"==typeof e&&(a.has(t)||(r.emit("rumresp",[e]),s[t]=e,a.add(t),function(e={}){try{i.gm.dispatchEvent(new CustomEvent(o,{detail:e}))}catch(e){}}({loaded:!0})))}},8990:(e,t,r)=>{"use strict";r.d(t,{I:()=>i});var n=Object.prototype.hasOwnProperty;function i(e,t,r){if(n.call(e,t))return e[t];var i=r();if(Object.defineProperty&&Object.keys)try{return Object.defineProperty(e,t,{value:i,writable:!0,enumerable:!1}),i}catch(e){}return e[t]=i,i}},6389:(e,t,r)=>{"use strict";function n(e,t=500,r={}){const n=r?.leading||!1;let i;return(...r)=>{n&&void 0===i&&(e.apply(this,r),i=setTimeout((()=>{i=clearTimeout(i)}),t)),n||(clearTimeout(i),i=setTimeout((()=>{e.apply(this,r)}),t))}}function i(e){let t=!1;return(...r)=>{t||(t=!0,e.apply(this,r))}}r.d(t,{J:()=>i,s:()=>n})},5289:(e,t,r)=>{"use strict";r.d(t,{GG:()=>o,sB:()=>a});var n=r(3878);function i(){return"undefined"==typeof document||"complete"===document.readyState}function o(e,t){if(i())return e();(0,n.sp)("load",e,t)}function a(e){if(i())return e();(0,n.DD)("DOMContentLoaded",e)}},384:(e,t,r)=>{"use strict";r.d(t,{NT:()=>o,US:()=>d,Zm:()=>a,bQ:()=>c,dV:()=>s,nY:()=>u,pV:()=>l});var n=r(6154),i=r(1863);const o={beacon:"bam.nr-data.net",errorBeacon:"bam.nr-data.net"};function a(){return n.gm.NREUM||(n.gm.NREUM={}),void 0===n.gm.newrelic&&(n.gm.newrelic=n.gm.NREUM),n.gm.NREUM}function s(){let e=a();return e.o||(e.o={ST:n.gm.setTimeout,SI:n.gm.setImmediate,CT:n.gm.clearTimeout,XHR:n.gm.XMLHttpRequest,REQ:n.gm.Request,EV:n.gm.Event,PR:n.gm.Promise,MO:n.gm.MutationObserver,FETCH:n.gm.fetch,WS:n.gm.WebSocket}),e}function c(e,t){let r=a();r.initializedAgents??={},t.initializedAt={ms:(0,i.t)(),date:new Date},r.initializedAgents[e]=t}function u(e){let t=a();return t.initializedAgents?.[e]}function d(e,t){a()[e]=t}function l(){return function(){let e=a();const t=e.info||{};e.info={beacon:o.beacon,errorBeacon:o.errorBeacon,...t}}(),function(){let e=a();const t=e.init||{};e.init={...t}}(),s(),function(){let e=a();const t=e.loader_config||{};e.loader_config={...t}}(),a()}},2843:(e,t,r)=>{"use strict";r.d(t,{u:()=>i});var n=r(3878);function i(e,t=!1,r,i){(0,n.DD)("visibilitychange",(function(){if(t)return void("hidden"===document.visibilityState&&e());e(document.visibilityState)}),r,i)}},3434:(e,t,r)=>{"use strict";r.d(t,{YM:()=>c});var n=r(7836),i=r(5607);const o="nr@original:".concat(i.W);var a=Object.prototype.hasOwnProperty,s=!1;function c(e,t){return e||(e=n.ee),r.inPlace=function(e,t,n,i,o){n||(n="");const a="-"===n.charAt(0);for(let s=0;s<t.length;s++){const c=t[s],u=e[c];d(u)||(e[c]=r(u,a?c+n:n,i,c,o))}},r.flag=o,r;function r(t,r,n,s,c){return d(t)?t:(r||(r=""),nrWrapper[o]=t,function(e,t,r){if(Object.defineProperty&&Object.keys)try{return Object.keys(e).forEach((function(r){Object.defineProperty(t,r,{get:function(){return e[r]},set:function(t){return e[r]=t,t}})})),t}catch(e){u([e],r)}for(var n in e)a.call(e,n)&&(t[n]=e[n])}(t,nrWrapper,e),nrWrapper);function nrWrapper(){var o,a,d,l;try{a=this,o=[...arguments],d="function"==typeof n?n(o,a):n||{}}catch(t){u([t,"",[o,a,s],d],e)}i(r+"start",[o,a,s],d,c);try{return l=t.apply(a,o)}catch(e){throw i(r+"err",[o,a,e],d,c),e}finally{i(r+"end",[o,a,l],d,c)}}}function i(r,n,i,o){if(!s||t){var a=s;s=!0;try{e.emit(r,n,i,t,o)}catch(t){u([t,r,n,i],e)}s=a}}}function u(e,t){t||(t=n.ee);try{t.emit("internal-error",e)}catch(e){}}function d(e){return!(e&&"function"==typeof e&&e.apply&&!e[o])}},993:(e,t,r)=>{"use strict";r.d(t,{ET:()=>o,p_:()=>i});var n=r(860);const i={ERROR:"ERROR",WARN:"WARN",INFO:"INFO",DEBUG:"DEBUG",TRACE:"TRACE"},o="log";n.K7.logging},3969:(e,t,r)=>{"use strict";r.d(t,{TZ:()=>n,XG:()=>s,rs:()=>i,xV:()=>a,z_:()=>o});const n=r(860).K7.metrics,i="sm",o="cm",a="storeSupportabilityMetrics",s="storeEventMetrics"},6630:(e,t,r)=>{"use strict";r.d(t,{T:()=>n});const n=r(860).K7.pageViewEvent},782:(e,t,r)=>{"use strict";r.d(t,{T:()=>n});const n=r(860).K7.pageViewTiming},6344:(e,t,r)=>{"use strict";r.d(t,{G4:()=>i});var n=r(2614);r(860).K7.sessionReplay;const i={RECORD:"recordReplay",PAUSE:"pauseReplay",REPLAY_RUNNING:"replayRunning",ERROR_DURING_REPLAY:"errorDuringReplay"};n.g.ERROR,n.g.FULL,n.g.OFF},4234:(e,t,r)=>{"use strict";r.d(t,{W:()=>o});var n=r(7836),i=r(1687);class o{constructor(e,t){this.agentIdentifier=e,this.ee=n.ee.get(e),this.featureName=t,this.blocked=!1}deregisterDrain(){(0,i.x3)(this.agentIdentifier,this.featureName)}}},7603:(e,t,r)=>{"use strict";r.d(t,{j:()=>P});var n=r(860),i=r(2555),o=r(3371),a=r(9908),s=r(7836),c=r(1687),u=r(5289),d=r(6154),l=r(944),f=r(3969),g=r(384),p=r(6344);const h=["setErrorHandler","finished","addToTrace","addRelease","addPageAction","setCurrentRouteName","setPageViewName","setCustomAttribute","interaction","noticeError","setUserId","setApplicationVersion","start",p.G4.RECORD,p.G4.PAUSE,"log","wrapLogger"],v=["setErrorHandler","finished","addToTrace","addRelease"];var m=r(1863),b=r(2614),y=r(993);var w=r(2646),A=r(3434);function R(e,t,r,n){if("object"!=typeof t||!t||"string"!=typeof r||!r||"function"!=typeof t[r])return(0,l.R)(29);const i=function(e){return(e||s.ee).get("logger")}(e),o=(0,A.YM)(i),a=new w.y(s.P);return a.level=n.level,a.customAttributes=n.customAttributes,o.inPlace(t,[r],"wrap-logger-",a),i}function E(){const e=(0,g.pV)();h.forEach((t=>{e[t]=(...r)=>function(t,...r){let n=[];return Object.values(e.initializedAgents).forEach((e=>{e&&e.api?e.exposed&&e.api[t]&&n.push(e.api[t](...r)):(0,l.R)(38,t)})),n.length>1?n:n[0]}(t,...r)}))}const x={};function _(e,t,g=!1){t||(0,c.Ak)(e,"api");const h={};var w=s.ee.get(e),A=w.get("tracer");x[e]=b.g.OFF,w.on(p.G4.REPLAY_RUNNING,(t=>{x[e]=t}));var E="api-",_=E+"ixn-";function N(t,r,n,o){const a=(0,i.Vp)(e);return null===r?delete a.jsAttributes[t]:(0,i.x1)(e,{...a,jsAttributes:{...a.jsAttributes,[t]:r}}),j(E,n,!0,o||null===r?"session":void 0)(t,r)}function T(){}h.log=function(e,{customAttributes:t={},level:r=y.p_.INFO}={}){(0,a.p)(f.xV,["API/log/called"],void 0,n.K7.metrics,w),function(e,t,r={},i=y.p_.INFO){(0,a.p)(f.xV,["API/logging/".concat(i.toLowerCase(),"/called")],void 0,n.K7.metrics,e),(0,a.p)(y.ET,[(0,m.t)(),t,r,i],void 0,n.K7.logging,e)}(w,e,t,r)},h.wrapLogger=(e,t,{customAttributes:r={},level:i=y.p_.INFO}={})=>{(0,a.p)(f.xV,["API/wrapLogger/called"],void 0,n.K7.metrics,w),R(w,e,t,{customAttributes:r,level:i})},v.forEach((e=>{h[e]=j(E,e,!0,"api")})),h.addPageAction=j(E,"addPageAction",!0,n.K7.genericEvents),h.setPageViewName=function(t,r){if("string"==typeof t)return"/"!==t.charAt(0)&&(t="/"+t),(0,o.f)(e).customTransaction=(r||"http://custom.transaction")+t,j(E,"setPageViewName",!0)()},h.setCustomAttribute=function(e,t,r=!1){if("string"==typeof e){if(["string","number","boolean"].includes(typeof t)||null===t)return N(e,t,"setCustomAttribute",r);(0,l.R)(40,typeof t)}else(0,l.R)(39,typeof e)},h.setUserId=function(e){if("string"==typeof e||null===e)return N("enduser.id",e,"setUserId",!0);(0,l.R)(41,typeof e)},h.setApplicationVersion=function(e){if("string"==typeof e||null===e)return N("application.version",e,"setApplicationVersion",!1);(0,l.R)(42,typeof e)},h.start=()=>{try{(0,a.p)(f.xV,["API/start/called"],void 0,n.K7.metrics,w),w.emit("manual-start-all")}catch(e){(0,l.R)(23,e)}},h[p.G4.RECORD]=function(){(0,a.p)(f.xV,["API/recordReplay/called"],void 0,n.K7.metrics,w),(0,a.p)(p.G4.RECORD,[],void 0,n.K7.sessionReplay,w)},h[p.G4.PAUSE]=function(){(0,a.p)(f.xV,["API/pauseReplay/called"],void 0,n.K7.metrics,w),(0,a.p)(p.G4.PAUSE,[],void 0,n.K7.sessionReplay,w)},h.interaction=function(e){return(new T).get("object"==typeof e?e:{})};const S=T.prototype={createTracer:function(e,t){var r={},i=this,o="function"==typeof t;return(0,a.p)(f.xV,["API/createTracer/called"],void 0,n.K7.metrics,w),g||(0,a.p)(_+"tracer",[(0,m.t)(),e,r],i,n.K7.spa,w),function(){if(A.emit((o?"":"no-")+"fn-start",[(0,m.t)(),i,o],r),o)try{return t.apply(this,arguments)}catch(e){const t="string"==typeof e?new Error(e):e;throw A.emit("fn-err",[arguments,this,t],r),t}finally{A.emit("fn-end",[(0,m.t)()],r)}}}};function j(e,t,r,i){return function(){return(0,a.p)(f.xV,["API/"+t+"/called"],void 0,n.K7.metrics,w),i&&(0,a.p)(e+t,[(0,m.t)(),...arguments],r?null:this,i,w),r?void 0:this}}function k(){r.e(296).then(r.bind(r,8778)).then((({setAPI:t})=>{t(e),(0,c.Ze)(e,"api")})).catch((e=>{(0,l.R)(27,e),w.abort()}))}return["actionText","setName","setAttribute","save","ignore","onEnd","getContext","end","get"].forEach((e=>{S[e]=j(_,e,void 0,g?n.K7.softNav:n.K7.spa)})),h.setCurrentRouteName=g?j(_,"routeName",void 0,n.K7.softNav):j(E,"routeName",!0,n.K7.spa),h.noticeError=function(t,r){"string"==typeof t&&(t=new Error(t)),(0,a.p)(f.xV,["API/noticeError/called"],void 0,n.K7.metrics,w),(0,a.p)("err",[t,(0,m.t)(),!1,r,!!x[e]],void 0,n.K7.jserrors,w)},d.RI?(0,u.GG)((()=>k()),!0):k(),h}var N=r(9417),T=r(8122);const S={accountID:void 0,trustKey:void 0,agentID:void 0,licenseKey:void 0,applicationID:void 0,xpid:void 0},j={};var k=r(5284);const I=e=>{const t=e.startsWith("http");e+="/",r.p=t?e:"https://"+e};let O=!1;function P(e,t={},r,n){let{init:a,info:c,loader_config:u,runtime:l={},exposed:f=!0}=t;l.loaderType=r;const p=(0,g.pV)();c||(a=p.init,c=p.info,u=p.loader_config),(0,N.xN)(e.agentIdentifier,a||{}),function(e,t){if(!e)throw new Error("All loader-config objects require an agent identifier!");j[e]=(0,T.a)(t,S);const r=(0,g.nY)(e);r&&(r.loader_config=j[e])}(e.agentIdentifier,u||{}),c.jsAttributes??={},d.bv&&(c.jsAttributes.isWorker=!0),(0,i.x1)(e.agentIdentifier,c);const h=(0,N.D0)(e.agentIdentifier),v=[c.beacon,c.errorBeacon];O||(h.proxy.assets&&(I(h.proxy.assets),v.push(h.proxy.assets)),h.proxy.beacon&&v.push(h.proxy.beacon),E(),(0,g.US)("activatedFeatures",k.B),e.runSoftNavOverSpa&&=!0===h.soft_navigations.enabled&&h.feature_flags.includes("soft_nav")),l.denyList=[...h.ajax.deny_list||[],...h.ajax.block_internal?v:[]],l.ptid=e.agentIdentifier,(0,o.V)(e.agentIdentifier,l),e.ee=s.ee.get(e.agentIdentifier),void 0===e.api&&(e.api=_(e.agentIdentifier,n,e.runSoftNavOverSpa)),void 0===e.exposed&&(e.exposed=f),O=!0}},8374:(e,t,r)=>{r.nc=(()=>{try{return document?.currentScript?.nonce}catch(e){}return""})()},860:(e,t,r)=>{"use strict";r.d(t,{$J:()=>o,K7:()=>n,P3:()=>i});const n={ajax:"ajax",genericEvents:"generic_events",jserrors:"jserrors",logging:"logging",metrics:"metrics",pageAction:"page_action",pageViewEvent:"page_view_event",pageViewTiming:"page_view_timing",sessionReplay:"session_replay",sessionTrace:"session_trace",softNav:"soft_navigations",spa:"spa"},i={[n.pageViewEvent]:1,[n.pageViewTiming]:2,[n.metrics]:3,[n.jserrors]:4,[n.spa]:5,[n.ajax]:6,[n.sessionTrace]:7,[n.softNav]:8,[n.sessionReplay]:9,[n.logging]:10,[n.genericEvents]:11},o={[n.pageViewTiming]:"events",[n.ajax]:"events",[n.spa]:"events",[n.softNav]:"events",[n.metrics]:"jserrors",[n.jserrors]:"jserrors",[n.sessionTrace]:"browser/blobs",[n.sessionReplay]:"browser/blobs",[n.logging]:"browser/logs",[n.genericEvents]:"ins"}}},n={};function i(e){var t=n[e];if(void 0!==t)return t.exports;var o=n[e]={exports:{}};return r[e](o,o.exports,i),o.exports}i.m=r,i.d=(e,t)=>{for(var r in t)i.o(t,r)&&!i.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},i.f={},i.e=e=>Promise.all(Object.keys(i.f).reduce(((t,r)=>(i.f[r](e,t),t)),[])),i.u=e=>"nr-rum-1.274.0.min.js",i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e={},t="NRBA-1.274.0.PROD:",i.l=(r,n,o,a)=>{if(e[r])e[r].push(n);else{var s,c;if(void 0!==o)for(var u=document.getElementsByTagName("script"),d=0;d<u.length;d++){var l=u[d];if(l.getAttribute("src")==r||l.getAttribute("data-webpack")==t+o){s=l;break}}if(!s){c=!0;var f={296:"sha512-gkYkZDAwQ9PwaDXs2YM+rNIdRej1Ac1mupWobRJ8eahQcXz6/sunGZCKklrzi5kWxhOGRZr2tn0rEKuLTXzfAA=="};(s=document.createElement("script")).charset="utf-8",s.timeout=120,i.nc&&s.setAttribute("nonce",i.nc),s.setAttribute("data-webpack",t+o),s.src=r,0!==s.src.indexOf(window.location.origin+"/")&&(s.crossOrigin="anonymous"),f[a]&&(s.integrity=f[a])}e[r]=[n];var g=(t,n)=>{s.onerror=s.onload=null,clearTimeout(p);var i=e[r];if(delete e[r],s.parentNode&&s.parentNode.removeChild(s),i&&i.forEach((e=>e(n))),t)return t(n)},p=setTimeout(g.bind(null,void 0,{type:"timeout",target:s}),12e4);s.onerror=g.bind(null,s.onerror),s.onload=g.bind(null,s.onload),c&&document.head.appendChild(s)}},i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.p="https://js-agent.newrelic.com/",(()=>{var e={840:0,374:0};i.f.j=(t,r)=>{var n=i.o(e,t)?e[t]:void 0;if(0!==n)if(n)r.push(n[2]);else{var o=new Promise(((r,i)=>n=e[t]=[r,i]));r.push(n[2]=o);var a=i.p+i.u(t),s=new Error;i.l(a,(r=>{if(i.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var o=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;s.message="Loading chunk "+t+" failed.\n("+o+": "+a+")",s.name="ChunkLoadError",s.type=o,s.request=a,n[1](s)}}),"chunk-"+t,t)}};var t=(t,r)=>{var n,o,[a,s,c]=r,u=0;if(a.some((t=>0!==e[t]))){for(n in s)i.o(s,n)&&(i.m[n]=s[n]);if(c)c(i)}for(t&&t(r);u<a.length;u++)o=a[u],i.o(e,o)&&e[o]&&e[o][0](),e[o]=0},r=self["webpackChunk:NRBA-1.274.0.PROD"]=self["webpackChunk:NRBA-1.274.0.PROD"]||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})(),(()=>{"use strict";i(8374);var e=i(944),t=i(6344),r=i(9566);class n{agentIdentifier;constructor(e=(0,r.LA)(16)){this.agentIdentifier=e}#e(t,...r){if("function"==typeof this.api?.[t])return this.api[t](...r);(0,e.R)(35,t)}addPageAction(e,t){return this.#e("addPageAction",e,t)}setPageViewName(e,t){return this.#e("setPageViewName",e,t)}setCustomAttribute(e,t,r){return this.#e("setCustomAttribute",e,t,r)}noticeError(e,t){return this.#e("noticeError",e,t)}setUserId(e){return this.#e("setUserId",e)}setApplicationVersion(e){return this.#e("setApplicationVersion",e)}setErrorHandler(e){return this.#e("setErrorHandler",e)}addRelease(e,t){return this.#e("addRelease",e,t)}log(e,t){return this.#e("log",e,t)}}class o extends n{#e(t,...r){if("function"==typeof this.api?.[t])return this.api[t](...r);(0,e.R)(35,t)}start(){return this.#e("start")}finished(e){return this.#e("finished",e)}recordReplay(){return this.#e(t.G4.RECORD)}pauseReplay(){return this.#e(t.G4.PAUSE)}addToTrace(e){return this.#e("addToTrace",e)}setCurrentRouteName(e){return this.#e("setCurrentRouteName",e)}interaction(){return this.#e("interaction")}wrapLogger(e,t,r){return this.#e("wrapLogger",e,t,r)}}var a=i(860),s=i(9417);const c=Object.values(a.K7);function u(e){const t={};return c.forEach((r=>{t[r]=function(e,t){return!0===(0,s.gD)(t,"".concat(e,".enabled"))}(r,e)})),t}var d=i(7603);var l=i(1687),f=i(4234),g=i(5289),p=i(6154),h=i(384);const v=e=>p.RI&&!0===(0,s.gD)(e,"privacy.cookies_enabled");function m(e){return!!(0,h.dV)().o.MO&&v(e)&&!0===(0,s.gD)(e,"session_trace.enabled")}var b=i(6389);class y extends f.W{constructor(e,t,r=!0){super(e.agentIdentifier,t),this.auto=r,this.abortHandler=void 0,this.featAggregate=void 0,this.onAggregateImported=void 0,!1===e.init[this.featureName].autoStart&&(this.auto=!1),this.auto?(0,l.Ak)(e.agentIdentifier,t):this.ee.on("manual-start-all",(0,b.J)((()=>{(0,l.Ak)(e.agentIdentifier,this.featureName),this.auto=!0,this.importAggregator(e)})))}importAggregator(t,r={}){if(this.featAggregate||!this.auto)return;let n;this.onAggregateImported=new Promise((e=>{n=e}));const o=async()=>{let o;try{if(v(this.agentIdentifier)){const{setupAgentSession:e}=await i.e(296).then(i.bind(i,3861));o=e(t)}}catch(t){(0,e.R)(20,t),this.ee.emit("internal-error",[t]),this.featureName===a.K7.sessionReplay&&this.abortHandler?.()}try{if(t.sharedAggregator)await t.sharedAggregator;else{t.sharedAggregator=i.e(296).then(i.bind(i,9337));const{EventAggregator:e}=await t.sharedAggregator;t.sharedAggregator=new e}if(!this.#t(this.featureName,o))return(0,l.Ze)(this.agentIdentifier,this.featureName),void n(!1);const{lazyFeatureLoader:e}=await i.e(296).then(i.bind(i,6103)),{Aggregate:a}=await e(this.featureName,"aggregate");this.featAggregate=new a(t,r),n(!0)}catch(t){(0,e.R)(34,t),this.abortHandler?.(),(0,l.Ze)(this.agentIdentifier,this.featureName,!0),n(!1),this.ee&&this.ee.abort()}};p.RI?(0,g.GG)((()=>o()),!0):o()}#t(e,t){switch(e){case a.K7.sessionReplay:return m(this.agentIdentifier)&&!!t;case a.K7.sessionTrace:return!!t;default:return!0}}}var w=i(6630);class A extends y{static featureName=w.T;constructor(e,t=!0){super(e,w.T,t),this.importAggregator(e)}}var R=i(9908),E=i(2843),x=i(3878),_=i(782),N=i(1863);class T extends y{static featureName=_.T;constructor(e,t=!0){super(e,_.T,t),p.RI&&((0,E.u)((()=>(0,R.p)("docHidden",[(0,N.t)()],void 0,_.T,this.ee)),!0),(0,x.sp)("pagehide",(()=>(0,R.p)("winPagehide",[(0,N.t)()],void 0,_.T,this.ee))),this.importAggregator(e))}}var S=i(3969);class j extends y{static featureName=S.TZ;constructor(e,t=!0){super(e,S.TZ,t),this.importAggregator(e)}}new class extends o{constructor(t,r){super(r),p.gm?(this.features={},(0,h.bQ)(this.agentIdentifier,this),this.desiredFeatures=new Set(t.features||[]),this.desiredFeatures.add(A),this.runSoftNavOverSpa=[...this.desiredFeatures].some((e=>e.featureName===a.K7.softNav)),(0,d.j)(this,t,t.loaderType||"agent"),this.run()):(0,e.R)(21)}get config(){return{info:this.info,init:this.init,loader_config:this.loader_config,runtime:this.runtime}}run(){try{const t=u(this.agentIdentifier),r=[...this.desiredFeatures];r.sort(((e,t)=>a.P3[e.featureName]-a.P3[t.featureName])),r.forEach((r=>{if(!t[r.featureName]&&r.featureName!==a.K7.pageViewEvent)return;if(this.runSoftNavOverSpa&&r.featureName===a.K7.spa)return;if(!this.runSoftNavOverSpa&&r.featureName===a.K7.softNav)return;const n=function(e){switch(e){case a.K7.ajax:return[a.K7.jserrors];case a.K7.sessionTrace:return[a.K7.ajax,a.K7.pageViewEvent];case a.K7.sessionReplay:return[a.K7.sessionTrace];case a.K7.pageViewTiming:return[a.K7.pageViewEvent];default:return[]}}(r.featureName).filter((e=>!(e in this.features)));n.length>0&&(0,e.R)(36,{targetFeature:r.featureName,missingDependencies:n}),this.features[r.featureName]=new r(this)}))}catch(t){(0,e.R)(22,t);for(const e in this.features)this.features[e].abortHandler?.();const r=(0,h.Zm)();delete r.initializedAgents[this.agentIdentifier]?.api,delete r.initializedAgents[this.agentIdentifier]?.features,delete this.sharedAggregator;return r.ee.get(this.agentIdentifier).abort(),!1}}}({features:[A,T,j],loaderType:"lite"})})()})();</script> <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> <meta name="viewport" content="width=device-width" /> <meta name="p:domain_verify" content="96e683d0045e44dfac2deaec70e57185"/> <link rel="icon" type="image/x-icon" href="/assets/favicon-9d06eb31fc41af6ef76f2954364a3a0b75637640a367d1816b9bf8b9ce392cb6.ico" /> <link rel="apple-touch-icon" sizes="76x76" href="/assets/apple-touch-icon-precomposed-24e2ef01d16313b2007bc178c55d64c564f71fb746290e81f4cf57f9d394a4c6.png"> <link rel="canonical" href="https://www.creative-tim.com/templates/flutter" data-turbolinks-track="false" itemprop="url"/> <title itemprop="name"> 6+ Flutter Mobile App Templates @ Creative Tim </title> <meta name="description" content="Download the best Flutter Themes & Templates developed by Creative Tim."> <meta name="keywords" content="creativetim, creative tim, bootstrap, theme, freebies, bootstrap kit, bootstrap template, free items, beautiful ui"> <meta name="data-turbolinks-track" content="false"> <link rel="stylesheet" href="/assets/creative-tim-landing-page-fcf42c42ecf8751731dd23c74b2257208b7756a4e7ed765745f3e004fe5da8d9.css" media="all" data-turbolinks-track="reload" />  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"> <meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="58nXx0VHkHb_YVcAM1F-LLY84j3COQkNWZZ0rX7TXQwnVhO5kv-Gsa8WDAuIj__VonDgFSrwpNNr8xT75yTgow" />  <script src="/assets/creative-tim/creative-tim-landing-page-647af41b3b46b41d43afdc844fe7f1afc523215aba286c075de87937ee0db31f.js" data-turbolinks-track="reload"></script>  <style defer="defer">.async-hide { opacity: 0 !important} </style> <script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date; h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer',4000, {'GTM-K9BGS8K':true});</script>  <script defer="defer"> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-46172202-22', 'auto', {allowLinker: true}); ga('set', 'anonymizeIp', true); ga('require', 'GTM-K9BGS8K'); ga('require', 'displayfeatures'); ga('require', 'linker'); ga('linker:autoLink', ["2checkout.com","avangate.com"]); </script>   <script defer="defer"> // dataLayer category var dataLayer = dataLayer || []; dataLayer.push({ 'pageType':'Category', 'categoryName':'Flutter', 'multipleProductID':'[389, 400, 410, 388, 411, 401]', 'multipleAvangateProductID':'[31985740, 33324665, 33448330, 0, 0, 0]', 'pageDomain':'MainDomain' }); // end datalayer category </script>  <script defer="defer">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-NKDMSK6');</script>  </head> <body> <div id="offer-bar-celebrating" class="alert alert-celebrating alert-black" data-turbolinks="false"> <div class="container"> <div class="row"> <div class="col-md-9 col-sm-9 text-left"> 馃敟馃敟馃敟 <b> Autumn Sale</b>: Join Creative Tim Club Today & <b>Get 45% OFF</b>! </div> <div class="col-md-3 col-sm-12"> <div class="d-flex-center"> <a href="https://www.creative-tim.com/club?ref=offer-bar" class="btn btn-fill btn-neutral" target="_blank"> Get Offer </a> <a id="close-bar" class="close-button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="15"> <path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /> </svg> </a> </div> </div> </div> </div> </div>  <div class="section section-header section-all-products section-category gradient-black"> <nav id="navbar" class="navbar filter-bar navbar-fixed-top navbar-transparent"> <div class="container navbar-elements-position"> <div class="notification"> <div id="notif-message" class="notif-message" style="display: none;" notice-type=success> </div> </div> <div class="row"> <div class="col-md-12 col-lg-4"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/" class="navbar-brand" data-turbolinks="false"> <img class="img-logo" alt="logoCt" loading="lazy" src="/assets/logo/logo-ct-white-478efc355eb3b29de4ee5894211455c1e31e78fadfb1304ca66528bfd4265c60.svg" /> </a> </div> </div> <div class="col-md-12 col-lg-8"> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav navbar-new-categories navbar-right" data-turbolinks="false"> <li class="dropdown technologies-nav dropdown-categories mr-24" data-turbolinks="false"> <a href="/templates" class="dropdown-toggle" data-turbolinks="false" data-toggle="dropdown"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"> <path d="M12.378 1.602a.75.75 0 0 0-.756 0L3 6.632l9 5.25 9-5.25-8.622-5.03ZM21.75 7.93l-9 5.25v9l8.628-5.032a.75.75 0 0 0 .372-.648V7.93ZM11.25 22.18v-9l-9-5.25v8.57a.75.75 0 0 0 .372.648l8.628 5.033Z" /> </svg> <p class="d-flex">Technologies <i class="fa fa-angle-down ml-5 mt-3 arrow" aria-hidden="true"></i></p> </a> <div class="dropdown-menu py-0"> <div class="dropdown-overflow"> <div class="dropdown-wrapper"> <div class="row"> <div class="col-md-4"> <h6 class="dropdown-header text-capitalize technology-size mt-0"> <a href="https://www.creative-tim.com/templates">Front-end</a> </h6> <ul class="mt-10"> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/tailwind"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-tailwind-d8f0cfa7eee592c9287e9a390d5c924bb11176bbeb0db897a83903b00f27c937.png" /> Tailwind CSS </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/bootstrap-themes"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-bootstrap-d76ab1ad4c5721f9bf2e532dbd5814fbe7ce7838b2624cb54549af2eeb825446.png" /> Bootstrap </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/angular"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-angular-9e87a27f7fb611f8a0fbfae5bd64e886b764bef62fd9f863c8694d7323a6235a.png" /> Angular </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/react"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-react-42be32ce0f9d3f7e068637991c1c74362b290655ab58b447d63f50f87b5f8c42.png" /> React </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/vuejs"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-vue-c12f877d0cba4c9350dad981e8fa3761f94758db252f963528839132eed25c64.png" /> Vuejs </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/react-native"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-react-native-9c2d324e5f881c431ce7dec31907c191c9ffd6e981e742c6a55c2b0f052e5d0c.png" /> React Native </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/svelte"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-svelte-e5eb72242fe961387486d369f7ae00beb73a3c0ffac499dc2d2af31ed5286f22.png" /> Svelte </a> </li> </ul> </div> <div class="col-md-4"> <h6 class="dropdown-header technology-size mt-0"> <a href="javascript:;"> </a> </h6> <ul class="mt-10"> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/material-ui"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-material-ui-84e1e41635aa43bd8a4b211c16df072caef5487d9bbb41fd54d4474f35f1ab10.png" /> Material UI </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/vuetifyjs"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-vuetify-befea6f05110a8f0148607a6831f947585c838cfcc174aa9cf6a4d83d91c2b4d.png" /> Vuetify </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/flutter"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-flutter-b8fed1604fdcb5d9370f702b8c3c616ff0ae3e3db5a2c9d02d054741363347f0.png" /> Flutter </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/vue-material"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-vuematerial-f670dbc95e72d34aa5b146ab0bf41ae5df1e806fc46745ed2edec59ab8ebe405.png" /> Vue Material </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/reactstrap"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-reactstrap-d0017791ea0e56ab0001d1f08c45459fc55a6e5e7c7fe1f208041c3964db6b4d.png" /> Reactstrap </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/react-bootstrap"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-reactbootstrap-290853783a73c5dc70a8a83a705d7c2e0da95c7b1a44f861d9cc55730bc15f71.png" /> React Bootstrap </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/vuejs-bootstrap"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-bootstrapvue-f943dee16250053498987da3ff5de0d352c636bd87c26640c8364566513ce412.png" /> Vue Bootstrap </a> </li> </ul> <hr class="hr"> </div> <div class="col-md-4"> <h6 class="dropdown-header text-capitalize technology-size mt-0"> <a href="https://www.creative-tim.com/templates">Back-end</a> </h6> <ul class="mt-10"> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/laravel"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-laravel-6a1dcc81e9b159b1e7ff38fa103fcab7d4ab47daaa81a067f449dc8ef54d662b.png" /> Laravel </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/django"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-django-01febaaad5f6fbb71292d543f1569af355660269a156521c89575c99eb0acc29.png" /> Django </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/flask"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-flask-d39b6df587b1527e2e68196123ef8e9e1b8ef59a1136b63d8a64321961ba1cb9.png" /> Flask </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/nextjs"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-nextjs-050dc61ffdbf8ca9741a58f25bdc2ab0f17ba4f5140a829e1dcbc4d3548b516f.png" /> Next </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/nuxtjs"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-nuxtjs-24fd91d33ee4af6a88ff8f3c1d370e373e4ccb9f7f6b2af84f2c7d5e215e9b90.png" /> Nuxt </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/nodejs"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-nodejs-e140490a59b28bdddd17abccc0498e4c7107bde45508ac7ff9cba5c76de0d850.png" /> Nodejs </a> </li> <li> <a class="dropdown-item bg-transparent py-1" href="/templates/aspnet"> <img class="icon" loading="lazy" src="/assets/frameworks/icon-aspnet-b18cdec2351717a7629604749f0f3fd759b91107027cc71c87ee7fab37cfdff0.png" /> Aspnet </a> </li> </ul> </div> </div> </div> <div class="dropdown-footer"> <div class="row"> <div class="col-md-4"> <ul> <li> <a class="dropdown-item bg-transparent py-1 font-weight-500" href="/templates/premium"> Premium Templates </a> </li> <li> <a class="dropdown-item bg-transparent py-1 font-weight-500" href="/templates/free"> Free Templates </a> </li> </ul> </div> <div class="col-md-4"> <ul> <li> <a class="dropdown-item bg-transparent py-1 font-weight-500" href="/templates/admin-dashboard"> Admin & Dashboards </a> </li> <li> <a class="dropdown-item bg-transparent py-1 font-weight-500" href="/templates/ui-kit"> UI Kits </a> </li> </ul> </div> <div class="col-md-4"> <ul> <li> <a class="dropdown-item bg-transparent py-1 font-weight-500" href="/templates"> All Templates </a> </li> <li> <a class="dropdown-item bg-transparent py-1 font-weight-500" href="/bootstrap-themes/landing-page"> Landing Pages </a> </li> </ul> </div> </div> </div> </div> </div> </li> <li class="dropdown dropdown-small dropdown-categories mr-24" data-turbolinks="false"> <a href="/templates" class="dropdown-toggle" onclick="" data-turbolinks="false" data-toggle="dropdown"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="35" height="20" fill="currentColor" viewBox="7 0 21 21"> <path d="M11.782 5.72a4.773 4.773 0 0 0-4.8 4.173 3.43 3.43 0 0 1 2.741-1.687c1.689 0 2.974 1.972 3.758 2.587a5.733 5.733 0 0 0 5.382.935c2-.638 2.934-2.865 3.137-3.921-.969 1.379-2.44 2.207-4.259 1.231-1.253-.673-2.19-3.438-5.959-3.318ZM6.8 11.979A4.772 4.772 0 0 0 2 16.151a3.431 3.431 0 0 1 2.745-1.687c1.689 0 2.974 1.972 3.758 2.587a5.733 5.733 0 0 0 5.382.935c2-.638 2.933-2.865 3.137-3.921-.97 1.379-2.44 2.208-4.259 1.231-1.253-.673-2.19-3.443-5.963-3.317Z"/> </svg> <p class="d-flex">Tailwind CSS <i class="fa fa-angle-down ml-5 mt-3 arrow" aria-hidden="true"></i></p> </a> <div class="dropdown-menu py-0"> <div class="dropdown-wrapper"> <h6 class="dropdown-header text-capitalize technology-size mt-0"> <div class="mr-5 icon-shape"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="white" viewBox="0 0 24 23"> <path d="M11.782 5.72a4.773 4.773 0 0 0-4.8 4.173 3.43 3.43 0 0 1 2.741-1.687c1.689 0 2.974 1.972 3.758 2.587a5.733 5.733 0 0 0 5.382.935c2-.638 2.934-2.865 3.137-3.921-.969 1.379-2.44 2.207-4.259 1.231-1.253-.673-2.19-3.438-5.959-3.318ZM6.8 11.979A4.772 4.772 0 0 0 2 16.151a3.431 3.431 0 0 1 2.745-1.687c1.689 0 2.974 1.972 3.758 2.587a5.733 5.733 0 0 0 5.382.935c2-.638 2.933-2.865 3.137-3.921-.97 1.379-2.44 2.208-4.259 1.231-1.253-.673-2.19-3.443-5.963-3.317Z"/> </svg> </div> <a href="/templates/tailwind">Tailwind CSS</a> </h6> <ul class="mt-10"> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/templates/tailwind-dashboard"> Admin & Dashboards </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/templates/tailwind-free"> Free Products </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/templates/tailwind-premium"> Premium Products </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" target="_blank" href="https://www.material-tailwind.com/docs/react/installation?ref=ct-lp-tailwindcss"> Material Tailwind React </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" target="_blank" href="https://www.material-tailwind.com/docs/html/installation?ref=ct-lp-tailwindcss"> Material Tailwind HTML </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" target="_blank" href="https://www.material-tailwind.com/figma?ref=ct-lp-tailwindcss"> Material Tailwind Figma </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" target="_blank" href="https://www.creative-tim.com/twcomponents?ref=ct-lp-tailwindcss"> Components for TailwindCSS </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" target="_blank" href="https://www.creative-tim.com/builder?ref=ct-lp-tailwindcss"> Drag & Drop for TailwindCSS </a> </li> </ul> </div> </div> </li> <li class="dropdown dropdown-categories bundles mr-24" data-turbolinks="false"> <a href="https://www.creative-tim.com/campaign" class="dropdown-toggle" onclick="" data-turbolinks="false" data-toggle="dropdown"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"> <path d="M9.375 3a1.875 1.875 0 0 0 0 3.75h1.875v4.5H3.375A1.875 1.875 0 0 1 1.5 9.375v-.75c0-1.036.84-1.875 1.875-1.875h3.193A3.375 3.375 0 0 1 12 2.753a3.375 3.375 0 0 1 5.432 3.997h3.943c1.035 0 1.875.84 1.875 1.875v.75c0 1.036-.84 1.875-1.875 1.875H12.75v-4.5h1.875a1.875 1.875 0 1 0-1.875-1.875V6.75h-1.5V4.875C11.25 3.839 10.41 3 9.375 3ZM11.25 12.75H3v6.75a2.25 2.25 0 0 0 2.25 2.25h6v-9ZM12.75 12.75v9h6.75a2.25 2.25 0 0 0 2.25-2.25v-6.75h-9Z" /> </svg> <p class="d-flex">Bundles <i class="fa fa-angle-down ml-5 mt-3 arrow" aria-hidden="true"></i></p> </a> <span class="notification-badge">NEW</span> <div class="dropdown-menu py-0"> <div class="dropdown-overflow"> <div class="dropdown-wrapper"> <div class="row d-flex"> <div class="col-md-6"> <h6 class="dropdown-header text-capitalize technology-size mt-0 ml-5"> <div class="mr-5 icon-shape"><i class="nc-icon nc-present-2 text-white"></i></div> <a href="https://www.creative-tim.com/campaign">Bundles</a> </h6> <ul class="mt-10"> <li> <a class="dropdown-item bg-transparent" href="https://www.creative-tim.com/product/buy/bundle/summer-bundle"> <div class="mr-5 ml-5 image-30"><img class="img-shape img-responsive img-fluid" src="/assets/navbar/icon-bundle-f8d166cf8240747eec6bc8c267b25a92fea41d7eb2754a60a150a4db815ad730.png" /></div> Big Bundle </a> </li> <li> <a class="dropdown-item bg-transparent" href="https://www.creative-tim.com/product/buy/bundle/bundle-react"> <div class="mr-5 ml-5 image-30"><img class="img-shape img-responsive img-fluid" src="/assets/frameworks/icon-react-42be32ce0f9d3f7e068637991c1c74362b290655ab58b447d63f50f87b5f8c42.png" /></div> React Bundle </a> </li> <li> <a class="dropdown-item bg-transparent" href="https://www.creative-tim.com/product/buy/bundle/bundle-tailwind"> <div class="mr-5 ml-5 image-30"><img class="img-shape img-responsive img-fluid" src="/assets/frameworks/icon-tailwind-d8f0cfa7eee592c9287e9a390d5c924bb11176bbeb0db897a83903b00f27c937.png" /></div> Tailwind Bundle </a> </li> <li> <a class="dropdown-item bg-transparent" href="https://www.creative-tim.com/product/buy/bundle/bundle-vuejs"> <div class="mr-5 ml-5 image-30"><img class="img-shape img-responsive img-fluid" src="/assets/frameworks/icon-vue-c12f877d0cba4c9350dad981e8fa3761f94758db252f963528839132eed25c64.png" /></div> Vuejs Bundle </a> </li> <li> <a class="dropdown-item bg-transparent" href="https://www.creative-tim.com/product/buy/bundle/bundle-angular"> <div class="mr-5 ml-5 image-30"><img class="img-shape img-responsive img-fluid" src="/assets/frameworks/icon-angular-9e87a27f7fb611f8a0fbfae5bd64e886b764bef62fd9f863c8694d7323a6235a.png" /></div> Angular Bundle </a> </li> <li> <a class="dropdown-item bg-transparent" href="https://www.creative-tim.com/product/buy/bundle/bundle-laravel"> <div class="mr-5 ml-5 image-30"><img class="img-shape img-responsive img-fluid" src="/assets/frameworks/icon-laravel-6a1dcc81e9b159b1e7ff38fa103fcab7d4ab47daaa81a067f449dc8ef54d662b.png" /></div> Laravel Bundle </a> </li> <li> <a class="dropdown-item bg-transparent" href="https://www.creative-tim.com/product/buy/bundle/bundle-bootstrap"> <div class="mr-5 ml-5 image-30"><img class="img-shape img-responsive img-fluid" src="/assets/frameworks/icon-bootstrap-d76ab1ad4c5721f9bf2e532dbd5814fbe7ce7838b2624cb54549af2eeb825446.png" /></div> Bootstrap Bundle </a> </li> <li> <a class="dropdown-item bg-transparent" href="https://www.creative-tim.com/product/buy/bundle/bundle-mobile"> <div class="mr-5 ml-5 image-30"><img class="img-shape img-responsive img-fluid" src="/assets/frameworks/icon-react-native-9c2d324e5f881c431ce7dec31907c191c9ffd6e981e742c6a55c2b0f052e5d0c.png" /></div> Mobile Bundle </a> </li> </ul> </div> <div class="col-md-6"> <a href="/club" target="_blank" class="d-block h-100"> <div class="position-relative image-bundle h-100"> <div class="content h-100"> </div> </div> </a> </div> </div> </div> </div> </div> </li> <li class="dropdown bootstrap dropdown-small dropdown-categories mr-24" data-turbolinks="false"> <a href="https://www.creative-tim.com/bootstrap-themes" class="dropdown-toggle" onclick="" data-turbolinks="false" data-toggle="dropdown"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="20" height="20" fill="currentColor"><path d="M333.5 201.4c0-22.1-15.6-34.3-43-34.3h-50.4v71.2h42.5C315.4 238.2 333.5 225 333.5 201.4zM517 188.6c-9.5-30.9-10.9-68.8-9.8-98.1c1.1-30.5-22.7-58.5-54.7-58.5H123.7c-32.1 0-55.8 28.1-54.7 58.5c1 29.3-.3 67.2-9.8 98.1c-9.6 31-25.7 50.6-52.2 53.1v28.5c26.4 2.5 42.6 22.1 52.2 53.1c9.5 30.9 10.9 68.8 9.8 98.1c-1.1 30.5 22.7 58.5 54.7 58.5h328.7c32.1 0 55.8-28.1 54.7-58.5c-1-29.3 .3-67.2 9.8-98.1c9.6-31 25.7-50.6 52.1-53.1v-28.5C542.7 239.2 526.5 219.6 517 188.6zM300.2 375.1h-97.9V136.8h97.4c43.3 0 71.7 23.4 71.7 59.4c0 25.3-19.1 47.9-43.5 51.8v1.3c33.2 3.6 55.5 26.6 55.5 58.3C383.4 349.7 352.1 375.1 300.2 375.1zM290.2 266.4h-50.1v78.4h52.3c34.2 0 52.3-13.7 52.3-39.5C344.7 279.6 326.1 266.4 290.2 266.4z"/></svg> <p class="d-flex">Bootstrap <i class="fa fa-angle-down ml-5 mt-3 arrow" aria-hidden="true"></i></p> </a> <div class="dropdown-menu py-0"> <div class="dropdown-wrapper"> <h6 class="dropdown-header text-capitalize technology-size mt-0"> <div class="mr-5 icon-shape"><img class="img-shape" src="https://www.creative-tim.com/assets/categories/bootstrap-logo-vector-09fd59e12977ed2b6b03781c02a97d4fd024c669f3770a4af39e07d8703ada46.svg"></div> <a href="https://www.creative-tim.com/bootstrap-themes">Bootstrap</a> </h6> <ul class="mt-10"> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/bootstrap-themes/admin-dashboard"> Admin & Dashboards </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/bootstrap-themes/free"> Free Themes </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/bootstrap-themes/premium"> Premium Themes</a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/bootstrap-themes/ui-kit"> UI Kits </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/bootstrap-themes/landing-page"> Landing Pages </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/bootstrap-themes/e-commerce"> E-Commerce </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/bootstrap-themes/one-page-template"> One Page Themes </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/bootstrap-themes/login-form"> Login Forms </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/bootstrap-themes/wizard"> Wizards </a> </li> <li> <a class="dropdown-item bg-transparent pl-35 pt-6" href="/bootstrap-themes/calendar"> Calendar </a> </li> </ul> </div> </div> </li> <li class="dropdown dropdown-categories mr-24" data-turbolinks="false"> <a href="javascript:;" class="dropdown-toggle" onclick="" data-turbolinks="false" data-toggle="dropdown"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="currentColor"> <path d="M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z" /> </svg> <p class="d-flex">Resources & AI <i class="fa fa-angle-down ml-5 mt-3 arrow" aria-hidden="true"></i></p> </a> <div class="dropdown-menu dropdown-lateral py-0"> <div class="dropdown-overflow"> <div class="dropdown-wrapper"> <div class="row d-flex"> <div class="col-md-4"> <h6 class="dropdown-header text-capitalize technology-size mt-0"> Resources </h6> <ul class="mt-10"> <li> <a class="dropdown-item bg-transparent py-1 pt-6" target="_blank" href="https://www.material-tailwind.com/blocks?ref=ct-lp-resources"> Blocks for TailwindCSS <span class="badge-new"></span> </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" target="_blank" href="https://www.material-tailwind.com/roots-of-ui-ux-design?ref=ct-lp-resources"> Book - Roots of UI/UX Design </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" target="_blank" href="https://www.creative-tim.com/twcomponents?ref=ct-lp-resources"> TW Components <span class="badge-new"></span> </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" target="_blank" href="https://www.creative-tim.com/services/updivision"> Custom Development </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" target="_blank" href="https://www.creative-tim.com/builder?ref=resources"> Drag & Drop Builders </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" target="_blank" href="https://www.creative-tim.com/bits"> Bits - code snippets </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" target="_blank" href="https://www.creative-tim.com/blog"> Blog </a> </li> </ul> <hr class="hr"> </div> <div class="col-md-4"> <h6 class="dropdown-header text-capitalize technology-size mt-0"> AI Tools </h6> <ul class="mt-10"> <li> <a class="dropdown-item bg-transparent py-1 pt-6" target="_blank" href="https://galichat.com?ref=ct-lp-resources"> GaliChat AI Assistant <span class="badge-new"></span> </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" target="_blank" href="https://code-mentor.ai?ref=ct-lp-resources"> AI Code Mentor </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" target="_blank" href="https://www.material-tailwind.com/magic-ai?ref=ct-lp-resources"> Magic AI Tailwind </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" href="https://www.creative-tim.com/search?q=boilerplate&button="> AI Boilerplates </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" href="https://www.creative-tim.com/cheatsheet/chatgpt-prompts/"> ChatGPT Prompts </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" href="https://www.creative-tim.com/gpts"> GPT's Collection </a> </li> </ul> <hr class="hr"> </div> <div class="col-md-4"> <h6 class="dropdown-header text-capitalize technology-size mt-0"> Design Systems </h6> <ul class="mt-10"> <li> <a class="dropdown-item bg-transparent py-1 pt-6" href="https://www.creative-tim.com/design-system/soft"> Soft Design </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" href="https://www.creative-tim.com/design-system/argon"> Argon Design </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" href="https://www.creative-tim.com/design-system/black"> Black Design </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" href="https://www.creative-tim.com/design-system/light"> Light Design </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" href="https://www.creative-tim.com/design-system/material"> Material Design </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" href="https://www.creative-tim.com/design-system/now-ui"> Now UI Design </a> </li> <li> <a class="dropdown-item bg-transparent py-1 pt-6" href="https://www.creative-tim.com/design-system/paper"> Paper Design </a> </li> </ul> </div> </div> </div> </div> </div> </li>        <li data-turbolinks="false" class="login"> <a href="javascript:;" onclick="openLoginModal();" role="button" data-toggle="modal" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"> <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd" /> </svg> <p class="d-flex">Login/Register</p> </a> </li> </ul> </div> </div> </div> </div> </nav> <div class="info"> <h1> Flutter Templates for iOS and Android</h1> <p> Download the best Flutter Themes & Templates developed by Creative Tim. Join over 2,624,060 creatives that already love our bootstrap resources! </p> <div itemscope itemtype="https://schema.org/WebSite" class="navbar-search-form"> <meta itemprop="url" content="https://www.creative-tim.com/"/> <form class="" itemprop="potentialAction" itemscope="itemscope" itemtype="https://schema.org/SearchAction" action="/search" accept-charset="UTF-8" method="get"> <div class="form-group form-search"> <meta itemprop="target" content="https://www.creative-tim.com/search?q={q}"/> <input type="text" name="q" id="q" class="form-control form-control-search" placeholder="Search for UI Kits, Dashboards or Components..." itemprop="query-input" /> <button type="submit" name="button" class="btn btn-black btn-submit"> <i class="icon-search icon-2x"></i> </button> </div> </form></div> </div> </div> <div class="main "> <div class="no-child-div"> <div class="container" data-turbolinks="false"> <ul class="categories-list"> <li> <span> <a href="/templates/flutter"> <img class="technology" rel="tooltip" title="Flutter" src="/assets/icon-flutter-7ff6c7456215fdfdbf83ddf2a715c44a1f8beb5cd0cce02ffab3b9c71824d0c1.jpg" /> </a> </span> </li> <li > <a href="https://www.creative-tim.com/templates/flutter-free"> <span>Free Themes</span> </a> </li> <li > <a href="https://www.creative-tim.com/templates/flutter-premium"> <span>Premium Themes</span> </a> </li> <div class="clearfix"></div> </ul> <div class="row mt-45"> <div class="col-md-3 text-center"> <p class="text-gray-500">Registered Users<p> <h4 class="font-extrabold text-gray-800 text-2xl">2,624,060</h4> </div> <div class="col-md-3 text-center"> <p class="text-gray-500">Created Projects<p> <h4 class="font-extrabold text-gray-800 text-2xl">8,600,000+</h4> </div> <div class="col-md-3 text-center"> <p class="text-gray-500">Monthly NPM Installs<p> <h4 class="font-extrabold text-gray-800 text-2xl">280,000+</h4> </div> <div class="col-md-3 text-center"> <p class="text-gray-500">Github Cumulative Stars<p> <h4 class="font-extrabold text-gray-800 text-2xl">48,000+</h4> </div> </div> </div> </div> <div class="container"> <div class="row" id="mix-container"> <div class="col-md-12"> <div class="row d-flex"> <div class="col-sm-2"> <div class="templates-search-filter"> <section> <div class="panel-group filter-panel"> <div class="panel panel-default"> <div class="filter-header"> <a data-toggle="collapse" href="#layout" class="filter-link"> Layouts <i id="layout-icon" class="fa fa-angle-down filter-icon" aria-hidden="true"></i> </a> </div> <div id="layout" class="panel-collapse collapse in" data-turbolinks="false"> <a href="/templates/admin-dashboard?filter=true" class="filter-group"> <div class="filter-name">Dashboards</div> <div class="products-number"> 206 </div> </a> <a href="/templates/ui-kit?filter=true" class="filter-group"> <div class="filter-name">UI Kits</div> <div class="products-number"> 94 </div> </a> </div> </div> </div> </section> <section> <div class="panel-group filter-panel"> <div class="panel panel-default"> <div class="filter-header"> <a data-toggle="collapse" href="#framework" class="filter-link"> Framework <i id="framework-icon" class="fa fa-angle-down filter-icon" aria-hidden="true"></i> </a> </div> <div id="framework" class="panel-collapse collapse in" data-turbolinks="false"> <a href="/templates/react?filter=true" class="filter-group"> <div class="filter-name">React</div> <div class="products-number"> 80 </div> </a> <a href="/templates/tailwind?filter=true" class="filter-group"> <div class="filter-name">TailwindCSS</div> <div class="products-number"> 36 </div> </a> <a href="/bootstrap-themes?filter=true" class="filter-group"> <div class="filter-name">Bootstrap</div> <div class="products-number"> 171 </div> </a> <a href="/templates/vuejs?filter=true" class="filter-group"> <div class="filter-name">Vue</div> <div class="products-number"> 65 </div> </a> <a href="/templates/angular?filter=true" class="filter-group"> <div class="filter-name">Angular</div> <div class="products-number"> 21 </div> </a> <a href="/templates/react-native?filter=true" class="filter-group"> <div class="filter-name">React Native</div> <div class="products-number"> 8 </div> </a> <a href="/templates/chakra-ui?filter=true" class="filter-group"> <div class="filter-name">Chakra</div> <div class="products-number"> 7 </div> </a> <a href="/templates/flutter?filter=true" class="filter-group"> <div class="filter-name">Flutter</div> <div class="products-number"> 6 </div> </a> <a href="/templates/svelte?filter=true" class="filter-group"> <div class="filter-name">Svelte</div> <div class="products-number"> 2 </div> </a> </div> </div> </div> </section> <section> <div class="panel-group filter-panel"> <div class="panel panel-default"> <div class="filter-header"> <a data-toggle="collapse" href="#design" class="filter-link"> Design system <i id="design-icon" class="fa fa-angle-down filter-icon" aria-hidden="true"></i> </a> </div> <div id="design" class="panel-collapse collapse in" data-turbolinks="false"> <a href="/design-system/soft?filter=true" class="filter-group"> <div class="filter-name">Soft</div> <div class="products-number"> 37 </div> </a> <a href="/design-system/material?filter=true" class="filter-group"> <div class="filter-name">Material</div> <div class="products-number"> 78 </div> </a> <a href="/design-system/argon?filter=true" class="filter-group"> <div class="filter-name">Argon</div> <div class="products-number"> 63 </div> </a> <a href="/design-system/black?filter=true" class="filter-group"> <div class="filter-name">Black</div> <div class="products-number"> 28 </div> </a> <a href="/design-system/light?filter=true" class="filter-group"> <div class="filter-name">Light</div> <div class="products-number"> 27 </div> </a> <a href="/design-system/now-ui?filter=true" class="filter-group"> <div class="filter-name">Now UI</div> <div class="products-number"> 27 </div> </a> <a href="/design-system/paper?filter=true" class="filter-group"> <div class="filter-name">Paper</div> <div class="products-number"> 23 </div> </a> </div> </div> </div> </section> <section> <div class="panel-group filter-panel"> <div class="panel panel-default"> <div class="filter-header"> <a data-toggle="collapse" href="#backend" class="filter-link"> Backend <i id="backend-icon" class="fa fa-angle-down filter-icon" aria-hidden="true"></i> </a> </div> <div id="backend" class="panel-collapse collapse in" data-turbolinks="false"> <a href="/templates/laravel?filter=true" class="filter-group"> <div class="filter-name">Laravel</div> <div class="products-number"> 54 </div> </a> <a href="/templates/django?filter=true" class="filter-group"> <div class="filter-name">Django</div> <div class="products-number"> 8 </div> </a> <a href="/templates/flask?filter=true" class="filter-group"> <div class="filter-name">Flask</div> <div class="products-number"> 3 </div> </a> <a href="/templates/nextjs?filter=true" class="filter-group"> <div class="filter-name">Next</div> <div class="products-number"> 25 </div> </a> <a href="/templates/nuxtjs?filter=true" class="filter-group"> <div class="filter-name">Nuxt</div> <div class="products-number"> 9 </div> </a> <a href="/templates/nodejs?filter=true" class="filter-group"> <div class="filter-name">Nodejs</div> <div class="products-number"> 6 </div> </a> </div> </div> </div> </section> </div> <script> $(document).ready(function() { function checkWindowSize() { var panelCollapse = $('.panel-collapse'); if ($(window).width() < 768) { panelCollapse.removeClass('in'); } else { panelCollapse.addClass('in'); panelCollapse.css('height', 'auto'); } } $('.filter-link').on('click', function() { var icon = $(this).find('.filter-icon'); icon.toggleClass('rotate-180'); }); // Check the window size when the page loads checkWindowSize(); // Check the window size whenever it's resized $(window).resize(checkWindowSize); }); </script> </div> <div class="col-sm-9 ms-auto"> <div class="row"> <div class="col-md-12 text-right"> <div class="filters mb-20"> <fieldset class="btn-prices"> <h6>Sort By:</h6> <div class="dropdown pull-right"> <button class="filter btn btn-default btn-round" type="button" data-toggle="dropdown"> Most Downloaded <span class="caret"></span> </button> <ul class="dropdown-menu" data-turbolinks="false" > <li><a href="/templates/flutter?direction=desc&sort=created_at">Newest Items</a></li> <li><a href="/templates/flutter?direction=asc&sort=price">Price: low to high</a></li> <li><a href="/templates/flutter?direction=desc&sort=price">Price: high to low</a></li> <li><a href="/templates/flutter?direction=desc&sort=number_of_downloads">Most Downloaded</a></li> </ul> </div> </fieldset> </div> </div> <div class="col-md-6" data-my-order="2020-09-29 05:37:39 -0500 "> <div class="card mb-0" data-turbolinks="false"> <div class="thumbnail"> <img src="https://s3.amazonaws.com/creativetim_bucket/products/389/thumb/argp-flutter-thumbnail.jpg?1601911758" data-retina="https://s3.amazonaws.com/creativetim_bucket/products/389/original/argp-flutter-thumbnail.jpg?1601911758" alt="No Image" loading="lazy"/> <a href="/product/argon-pro-flutter" class="thumb-cover"></a> <div class="details"> <div class="numbers"> <b class="downloads"><i class="fa fa-arrow-circle-o-down"></i> 22</b> <b class="comments-icon"> <i class="fa fa-star"></i> 4.80/5</b> </div> <div class="clearfix"></div> </div> <b class="actions"> <a href="/product/argon-pro-flutter" class="btn btn-neutral btn-round btn-fill" rel="tooltip" title="More Details"> <i class="fa fa-align-left"></i> </a> <a href="https://demos.creative-tim.com/argon-pro-flutter/" class="btn btn-neutral btn-fill btn-round" target="_blank" title="Live Preview" rel="tooltip"> <i class="fa fa-laptop"></i> </a> <a class="btn btn-new-primary btn-round btn-fill" rel="tooltip" title="View Pricing" data-source="product-card" href="/product/argon-pro-flutter#pricingCard"> <i class="fa fa-shopping-cart"></i> </a> </b> </div> <div class="card-info pb-0"> <a href="/product/argon-pro-flutter"> <h3>Argon PRO Flutter <div class="time pull-right premium-product "> <span>$</span>149 </div> </h3> <p>Premium Flutter App Template </p> </a> </div> </div> </div> <div class="col-md-6" data-my-order="2020-12-16 08:01:44 -0600 "> <div class="card mb-0" data-turbolinks="false"> <div class="thumbnail"> <img src="https://s3.amazonaws.com/creativetim_bucket/products/400/thumb/opt_mkp_flutter_thumbnail.jpg?1607615300" data-retina="https://s3.amazonaws.com/creativetim_bucket/products/400/original/opt_mkp_flutter_thumbnail.jpg?1607615300" alt="No Image" loading="lazy"/> <a href="/product/material-kit-pro-flutter" class="thumb-cover"></a> <div class="details"> <div class="numbers"> <b class="downloads"><i class="fa fa-arrow-circle-o-down"></i> 14</b> <b class="comments-icon"> <i class="fa fa-star"></i> 4.60/5</b> </div> <div class="clearfix"></div> </div> <b class="actions"> <a href="/product/material-kit-pro-flutter" class="btn btn-neutral btn-round btn-fill" rel="tooltip" title="More Details"> <i class="fa fa-align-left"></i> </a> <a href="https://demos.creative-tim.com/material-kit-pro-flutter/" class="btn btn-neutral btn-fill btn-round" target="_blank" title="Live Preview" rel="tooltip"> <i class="fa fa-laptop"></i> </a> <a class="btn btn-new-primary btn-round btn-fill" rel="tooltip" title="View Pricing" data-source="product-card" href="/product/material-kit-pro-flutter#pricingCard"> <i class="fa fa-shopping-cart"></i> </a> </b> </div> <div class="card-info pb-0"> <a href="/product/material-kit-pro-flutter"> <h3>Material Kit PRO Flutter <div class="time pull-right premium-product "> <span>$</span>149 </div> </h3> <p>Premium Flutter App Template </p> </a> </div> </div> </div> <div class="col-md-6" data-my-order="2021-01-04 06:48:46 -0600 "> <div class="card mb-0" data-turbolinks="false"> <div class="thumbnail"> <img src="https://s3.amazonaws.com/creativetim_bucket/products/410/thumb/opt_nui_flutter_thumbnail.jpg?1608715868" data-retina="https://s3.amazonaws.com/creativetim_bucket/products/410/original/opt_nui_flutter_thumbnail.jpg?1608715868" alt="No Image" loading="lazy"/> <a href="/product/now-ui-pro-flutter" class="thumb-cover"></a> <div class="details"> <div class="numbers"> <b class="downloads"><i class="fa fa-arrow-circle-o-down"></i> 11</b> <b class="comments-icon"> <i class="fa fa-star"></i> 4.70/5</b> </div> <div class="clearfix"></div> </div> <b class="actions"> <a href="/product/now-ui-pro-flutter" class="btn btn-neutral btn-round btn-fill" rel="tooltip" title="More Details"> <i class="fa fa-align-left"></i> </a> <a href="https://demos.creative-tim.com/now-ui-pro-flutter/" class="btn btn-neutral btn-fill btn-round" target="_blank" title="Live Preview" rel="tooltip"> <i class="fa fa-laptop"></i> </a> <a class="btn btn-new-primary btn-round btn-fill" rel="tooltip" title="View Pricing" data-source="product-card" href="/product/now-ui-pro-flutter#pricingCard"> <i class="fa fa-shopping-cart"></i> </a> </b> </div> <div class="card-info pb-0"> <a href="/product/now-ui-pro-flutter"> <h3>Now UI PRO Flutter <div class="time pull-right premium-product "> <span>$</span>149 </div> </h3> <p>Premium Flutter App Template </p> </a> </div> </div> </div> <div class="col-md-6" data-my-order="2020-09-29 05:07:15 -0500 "> <div class="card mb-0" data-turbolinks="false"> <div class="thumbnail"> <img src="https://s3.amazonaws.com/creativetim_bucket/products/388/thumb/arg-flutter-thumbnail.jpg?1601647289" data-retina="https://s3.amazonaws.com/creativetim_bucket/products/388/original/arg-flutter-thumbnail.jpg?1601647289" alt="No Image" loading="lazy"/> <a href="/product/argon-flutter" class="thumb-cover"></a> <div class="details"> <div class="numbers"> <b class="downloads"><i class="fa fa-arrow-circle-o-down"></i> 9,418</b> <b class="comments-icon"> <i class="fa fa-star"></i> 5.00/5</b> </div> <div class="clearfix"></div> </div> <b class="actions"> <a href="/product/argon-flutter" class="btn btn-neutral btn-round btn-fill" rel="tooltip" title="More Details"> <i class="fa fa-align-left"></i> </a> <a href="https://demos.creative-tim.com/argon-flutter/" class="btn btn-neutral btn-fill btn-round" target="_blank" title="Live Preview" rel="tooltip"> <i class="fa fa-laptop"></i> </a> </b> </div> <div class="card-info pb-0"> <a href="/product/argon-flutter"> <h3>Argon Flutter <div class="time pull-right "> Free </div> </h3> <p>Free Flutter App Template </p> </a> </div> </div> </div> <div class="col-md-6" data-my-order="2021-01-04 06:48:24 -0600 "> <div class="card mb-0" data-turbolinks="false"> <div class="thumbnail"> <img src="https://s3.amazonaws.com/creativetim_bucket/products/411/thumb/opt_nui_flutter_thumbnail_%281%29.jpg?1608716416" data-retina="https://s3.amazonaws.com/creativetim_bucket/products/411/original/opt_nui_flutter_thumbnail_%281%29.jpg?1608716416" alt="No Image" loading="lazy"/> <a href="/product/now-ui-flutter" class="thumb-cover"></a> <div class="details"> <div class="numbers"> <b class="downloads"><i class="fa fa-arrow-circle-o-down"></i> 7,507</b> <b class="comments-icon"> <i class="fa fa-star"></i> 5.00/5</b> </div> <div class="clearfix"></div> </div> <b class="actions"> <a href="/product/now-ui-flutter" class="btn btn-neutral btn-round btn-fill" rel="tooltip" title="More Details"> <i class="fa fa-align-left"></i> </a> <a href="https://demos.creative-tim.com/now-ui-flutter/" class="btn btn-neutral btn-fill btn-round" target="_blank" title="Live Preview" rel="tooltip"> <i class="fa fa-laptop"></i> </a> </b> </div> <div class="card-info pb-0"> <a href="/product/now-ui-flutter"> <h3>Now UI Flutter <div class="time pull-right "> Free </div> </h3> <p>Free Flutter App Template </p> </a> </div> </div> </div> <div class="col-md-6" data-my-order="2020-12-14 04:54:22 -0600 "> <div class="card mb-0" data-turbolinks="false"> <div class="thumbnail"> <img src="https://s3.amazonaws.com/creativetim_bucket/products/401/thumb/opt_mk_flutter_thumbnail.jpg?1607615978" data-retina="https://s3.amazonaws.com/creativetim_bucket/products/401/original/opt_mk_flutter_thumbnail.jpg?1607615978" alt="No Image" loading="lazy"/> <a href="/product/material-kit-flutter" class="thumb-cover"></a> <div class="details"> <div class="numbers"> <b class="downloads"><i class="fa fa-arrow-circle-o-down"></i> 5,844</b> <b class="comments-icon"> <i class="fa fa-star"></i> 5.00/5</b> </div> <div class="clearfix"></div> </div> <b class="actions"> <a href="/product/material-kit-flutter" class="btn btn-neutral btn-round btn-fill" rel="tooltip" title="More Details"> <i class="fa fa-align-left"></i> </a> <a href="https://demos.creative-tim.com/material-kit-flutter/" class="btn btn-neutral btn-fill btn-round" target="_blank" title="Live Preview" rel="tooltip"> <i class="fa fa-laptop"></i> </a> </b> </div> <div class="card-info pb-0"> <a href="/product/material-kit-flutter"> <h3>Material Kit Flutter <div class="time pull-right "> Free </div> </h3> <p>Free Flutter App Template </p> </a> </div> </div> </div> <input type="hidden" name="direction" id="direction" autocomplete="off" /> <input type="hidden" name="sort" id="sort" autocomplete="off" /> <div class="col-md-6 col-md-offset-3 text-center" data-turbolinks="false" > </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="main-white"> <div class="container"> <div class="breadcrumbs-container"> <ol itemscope itemtype="https://schema.org/BreadcrumbList" class="breadcrumb"> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" > <a itemprop="item" href="https://www.creative-tim.com/"> <span itemprop="name">Home</span> </a> <meta itemprop="position" content="1" /> </li> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" > <a itemprop="item" href="https://www.creative-tim.com/templates"> <span itemprop="name">Templates</span> </a> <meta itemprop="position" content="2" /> </li> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class=active> <a itemprop="item" href="https://www.creative-tim.com/templates/flutter"> <span itemprop="name">Flutter</span> </a> <meta itemprop="position" content="3" /> </li> </ol> </div> </div> </div> <div class="main-white"> <div class="container"> <div class="terms-box faq-page"> <div class="row"> <div class="panel-group" id="accordion-faq"> <h3>FAQ</h3> <div class="panel"> <h4> <a class="panel-title" data-toggle="collapse" data-parent="#accordion-faq" aria-controls="#accordion-faq-answer-0" data-target="#accordion-faq-answer-0" aria-expanded="false"> ✦ What is Flutter used for? </a> </h4> <div id="accordion-faq-answer-0" class="collapse" role="tabpanel" > <p>Flutter is used for developing applications for mobile, web and desktop from a single codebase. It is an open-source UI software development kit created by Google. It allows developers to build natively compiled applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web from a single codebase.</p> </div> </div> <div class="panel"> <h4> <a class="panel-title" data-toggle="collapse" data-parent="#accordion-faq" aria-controls="#accordion-faq-answer-1" data-target="#accordion-faq-answer-1" aria-expanded="false"> ✦ Is Flutter easy or Java? </a> </h4> <div id="accordion-faq-answer-1" class="collapse" role="tabpanel" > <p>The level of ease for programming languages such as Flutter or Java often depends on various factors such as your previous programming experience, personal aptitude, and skills. Java is a language that has been used extensively for more than 25 years. It has a more difficult syntax compared with Flutter and requires you to write a lot of code. However, Java has a large open-source ecosystem and plenty of resources, tutorials, and libraries available. On the other hand, Flutter is a UI software development kit, and its language, Dart, is often considered simpler and more straightforward to learn than Java. It requires less code for UI development, and its hot reload feature provides immediate feedback, making it more user-friendly for developing apps. But Flutter has fewer resources and libraries since it's newer and less popular than Java. In conclusion, if you are new to programming, learning Dart for Flutter might feel easier. However, as an experienced developer, understanding Java would be more beneficial in long run because of its vast, well-established ecosystem and usability. This subjective and depends heavily on your personal learning style, experience, and project requirements.</p> </div> </div> <div class="panel"> <h4> <a class="panel-title" data-toggle="collapse" data-parent="#accordion-faq" aria-controls="#accordion-faq-answer-2" data-target="#accordion-faq-answer-2" aria-expanded="false"> ✦ Is Flutter using C++? </a> </h4> <div id="accordion-faq-answer-2" class="collapse" role="tabpanel" > <p>Yes, Flutter does use C++ for its engine. However, the apps are mostly written in Dart language. C++ in Flutter is primarily used for lower level engine tasks and to communicate with platform-specific APIs and services.</p> </div> </div> <div class="panel"> <h4> <a class="panel-title" data-toggle="collapse" data-parent="#accordion-faq" aria-controls="#accordion-faq-answer-3" data-target="#accordion-faq-answer-3" aria-expanded="false"> ✦ Which language is used in Flutter? </a> </h4> <div id="accordion-faq-answer-3" class="collapse" role="tabpanel" > <p>Dart language is used in Flutter.</p> </div> </div> <div class="panel"> <h4> <a class="panel-title" data-toggle="collapse" data-parent="#accordion-faq" aria-controls="#accordion-faq-answer-4" data-target="#accordion-faq-answer-4" aria-expanded="false"> ✦ Is it hard to learn Flutter? </a> </h4> <div id="accordion-faq-answer-4" class="collapse" role="tabpanel" > <p>The difficulty of learning Flutter can depend on a variety of factors such as prior programming experience, familiarity with the Dart programming language, understanding of object-oriented concepts, and personal learning style. For those who are already familiar with object-oriented programming languages and concepts, learning Flutter might be relatively straightforward. Flutter uses Dart language, though, which isn't as popular as languages like JavaScript, Java or Python, meaning you could face a learning curve if starting from scratch. Flutter also relies heavily on widgets, where almost everything in the framework is a widget. Understanding how to use and combine these can take some time. However, Flutter's detailed documentation, helpful community, and various resources like tutorials and code labs can be of great help for beginners. Elements like hot reload (allowing real-time changes) can in fact make Flutter a more convenient framework to work with. Overall, while Flutter may come with its own set of challenges, it's not excessively hard to learn and can be mastered over time with consistent practice.</p> </div> </div> <div class="panel"> <h4> <a class="panel-title" data-toggle="collapse" data-parent="#accordion-faq" aria-controls="#accordion-faq-answer-5" data-target="#accordion-faq-answer-5" aria-expanded="false"> ✦ Why Flutter is so popular? </a> </h4> <div id="accordion-faq-answer-5" class="collapse" role="tabpanel" > <p>Flutter is popular for several reasons:<br><br>1. Cross-platform development: Flutter enables developers to build apps for both Android and iOS using the same codebase, saving time and resources.<br><br>2. High performance: Flutter apps are compiled directly into native code, ensuring faster performance compared to other frameworks like React Native, which require a JavaScript bridge.<br><br>3. Hot Reload: This feature allows developers to implement changes in real-time without needing to restart the entire application.<br><br>4. Easy to learn: The learning curve for Flutter isn't steep, making it a good option for beginners.<br><br>5. Great design compatibility: Flutter implements its own design widgets which not only look great but also make it easier to customize UI.<br><br>6. Strong community support: Flutter has a large, active community which can be a great help for developers encountering any issues.<br><br>7. Google support: As Flutter is backed by Google, it benefits from regular updates, added features, and improvements.<br><br>8. Compatibility: Flutter's widgets and libraries significantly reduce the likelihood of compatibility issues.<br><br>9. Developer-friendly: Flutter comes with extensive, easy-to-understand documentation and a range of tools that make coding easier for developers.</p> </div> </div> <div class="panel"> <h4> <a class="panel-title" data-toggle="collapse" data-parent="#accordion-faq" aria-controls="#accordion-faq-answer-6" data-target="#accordion-faq-answer-6" aria-expanded="false"> ✦ Is Flutter a dead language? </a> </h4> <div id="accordion-faq-answer-6" class="collapse" role="tabpanel" > <p>No, Flutter is not a dead language. In fact, Flutter is a highly popular open-source framework developed by Google for building Android and iOS apps, web applications, and more. The Flutter community continues to grow, and it is being actively used and developed.</p> </div> </div> <div class="panel"> <h4> <a class="panel-title" data-toggle="collapse" data-parent="#accordion-faq" aria-controls="#accordion-faq-answer-7" data-target="#accordion-faq-answer-7" aria-expanded="false"> ✦ Can I write python in Flutter? </a> </h4> <div id="accordion-faq-answer-7" class="collapse" role="tabpanel" > <p>No, you cannot directly write Python in Flutter. Flutter is a framework developed by Google for creating cross-platform mobile applications. Flutter uses Dart as its primary programming language. However, if your application needs some features that require Python, you might need to write a native plugin or integrate with a Python back-end.</p> </div> </div> <div class="panel"> <h4> <a class="panel-title" data-toggle="collapse" data-parent="#accordion-faq" aria-controls="#accordion-faq-answer-8" data-target="#accordion-faq-answer-8" aria-expanded="false"> ✦ Is python good for Flutter? </a> </h4> <div id="accordion-faq-answer-8" class="collapse" role="tabpanel" > <p>Flutter is a framework developed by Google which allows developers to build native applications with one codebase. The programming language used in Flutter is Dart, not Python. While Python is a powerful and widely-used language, it's not typically used for mobile app development, it is mostly used for web, automation, AI, machine learning, data analysis and visualization. If you're seeking to develop a mobile app using Flutter, your primary language should be Dart. However, knowing Python can be beneficial for backend support or other functionalities.</p> </div> </div> <div class="panel"> <h4> <a class="panel-title" data-toggle="collapse" data-parent="#accordion-faq" aria-controls="#accordion-faq-answer-9" data-target="#accordion-faq-answer-9" aria-expanded="false"> ✦ Will Google cancel Flutter? </a> </h4> <div id="accordion-faq-answer-9" class="collapse" role="tabpanel" > <p>There's no indication that Google plans to cancel Flutter. Flutter is a key part of Google's strategy for building cross-platform applications and has been gaining popularity among developers. However, things can change and the ultimate decision lies with Google. For the most up-to-date information, it's best to directly follow Google's announcements.</p> </div> </div> <div class="panel"> <h4> <a class="panel-title" data-toggle="collapse" data-parent="#accordion-faq" aria-controls="#accordion-faq-answer-10" data-target="#accordion-faq-answer-10" aria-expanded="false"> ✦ What are disadvantages of Flutter? </a> </h4> <div id="accordion-faq-answer-10" class="collapse" role="tabpanel" > <p>1. Limited library support: While Flutter has a good set of libraries and tools, they are still fewer as compared to those in React Native or native development, which can limit its capabilities.<br><br>2. Larger app size: Apps created with Flutter tend to be significantly larger than those created using other frameworks, often leading to slower download times and taking up more storage space.<br><br>3. Not fully mature: Flutter is a relatively new framework compared to others. As a result, it still has to catch up in terms of certain features and stability issues.<br><br>4. Lack of third-party service: Since Flutter is relatively new, many third-party services do not provide SDKs for Flutter yet, making the integration of these services into an application difficult.<br><br>5. Limited community support: While growing, the Flutter community is smaller and less mature than for some other frameworks. This can make it more difficult to find help or resources.<br><br>6. No support for web browsers: Flutter is a mobile-first framework, meaning it does not support web browsers, unlike many other popular frameworks.<br><br>7. Complex language: Dart, the programming language of Flutter, is not as popular or widely utilized as JavaScript or Python. Therefore, developers may need to invest additional time and resources in learning Dart.<br><br>8. Difficulties with iOS: Flutter is a Google product, and as such, it generally performs better on Android than with iOS, and troubleshooting iOS-related issues can be challenging.<br><br>9. Lack of advanced features: For some complex and innovative features, the developers might still have to rely on native development to ensure optimal performance.</p> </div> </div> <div class="panel"> <h4> <a class="panel-title" data-toggle="collapse" data-parent="#accordion-faq" aria-controls="#accordion-faq-answer-11" data-target="#accordion-faq-answer-11" aria-expanded="false"> ✦ Is Flutter worth learning 2023 </a> </h4> <div id="accordion-faq-answer-11" class="collapse" role="tabpanel" > <p>Learning Flutter in 2023 is indeed a worthwhile endeavor, especially if you are eyeing a career in app development. One of the primary appeals of Flutter is its ease of learning and use, particularly facilitated by its primary language, Dart, which is relatively easy to grasp, especially for those with prior experience in object-oriented languages like Java or Python. The hierarchical nature of Flutter code, built from basic units called Widgets, simplifies the creation of user interfaces, making the learning curve less steep for beginners. Furthermore, the cross-platform nature of Flutter is a significant draw. With just Dart and Flutter, you can develop apps for mobile, desktop, and web, which is a substantial advantage in a digital landscape that values cross-platform functionality. This feature not only streamlines the development process but also keeps your focus on developing features rather than grappling with the intricacies of each platform.</p> </div> </div> </div> </div> </div> </div> </div> <div class="footer"> <div class="overlayer"> <div class="container"> <div class="pb-70 pt-50"> <div class="row d-flex"> <div class="col-md-4 col-sm-12 col-md-offset-2"> <div class="section-numbers"> <div class="numbers"> <h4 class="numbers-dont-lie"><b>2,624,060</b> accounts</h4> <h4 class="numbers-dont-lie"><b>4,615,017</b> downloads</h4> <h4 class="numbers-dont-lie"><a href="https://www.creative-tim.com/templates?ref=footer-ct" target="_blank" class="text-white"><b>305</b> products</a></h4> </div> </div> </div> <div class="col-md-4 col-sm-12"> <p class="title h1">Join our newsletter</p> <style> #sib-form-container .sib-form-block { padding: 0 0 0 0 !important; } #sib-container { padding: 0 0 0 0 !important; background: transparent !important; } #sib-form-container .email { background-color: rgba(255,255,255,.1); color: #fff; border: none; border-radius: 3px; border: none; font-size: 16px; height: 40px; margin-right: 15px; padding: 3px 12px; width: 100%; } .sib-form { padding: 0 0 0 0 !important; } </style> <link rel="stylesheet" href="https://sibforms.com/forms/end-form/build/sib-styles.css">   <div class="sib-form"> <div id="sib-form-container" > <div id="error-message" class="sib-form-message-panel" style="font-size:16px; text-align:left; font-family:"Helvetica", sans-serif; color:#661d1d; border-radius:3px; border-color:#ff4949;max-width:540px;background:#fff;"> <div class="sib-form-message-panel__text sib-form-message-panel__text--center"> <svg viewBox="0 0 512 512" class="sib-icon sib-notification__icon"> <path d="M256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm-11.49 120h22.979c6.823 0 12.274 5.682 11.99 12.5l-7 168c-.268 6.428-5.556 11.5-11.99 11.5h-8.979c-6.433 0-11.722-5.073-11.99-11.5l-7-168c-.283-6.818 5.167-12.5 11.99-12.5zM256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28z" /> </svg> <span class="sib-form-message-panel__inner-text"> Your subscription could not be saved. Please try again. </span> </div> </div> <div></div> <div id="success-message" class="sib-form-message-panel" style="font-size:16px; text-align:left; font-family:"Helvetica", sans-serif; color:#085229; border-radius:3px; border-color:#13ce66;max-width:540px;background:#fff"> <div class="sib-form-message-panel__text sib-form-message-panel__text--center"> <svg viewBox="0 0 512 512" class="sib-icon sib-notification__icon"> <path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 464c-118.664 0-216-96.055-216-216 0-118.663 96.055-216 216-216 118.664 0 216 96.055 216 216 0 118.663-96.055 216-216 216zm141.63-274.961L217.15 376.071c-4.705 4.667-12.303 4.637-16.97-.068l-85.878-86.572c-4.667-4.705-4.637-12.303.068-16.97l8.52-8.451c4.705-4.667 12.303-4.637 16.97.068l68.976 69.533 163.441-162.13c4.705-4.667 12.303-4.637 16.97.068l8.451 8.52c4.668 4.705 4.637 12.303-.068 16.97z" /> </svg> <span class="sib-form-message-panel__inner-text"> Your subscription has been successful. </span> </div> </div> <div></div> <div id="sib-container" class="sib-container--large sib-container--vertical"> <form id="sib-form" class="form-inline method="POST" action="https://e961ea6f.sibforms.com/serve/MUIFAJsaIYuBJhLcwkC8_U00aM-IDkZTqyzNo1HoBuvYzICssMcBKi58EoDO4tkVZnPwr7FBwjLjzqr9pkPY0N8FNsCWsycqoTHoABzsqh2FTGs8u3v5Rr7HyNcUcP5BQXxk8MW4HoK40NkvgUGOI6slMiqr5Y8a_98tF_9T_dfAdpADVTKzg2m0UtMv6NOaSaGMVy9oXwaQl0o8" data-type="subscription"> <div style="padding: 8px 0; width:100%"> <div class="sib-form-block form-inline"> <label class="entry__error entry__error--primary" style="font-size:16px; text-align:left; font-family:"Helvetica", sans-serif; color:#661d1d; border-radius:3px; border-color:#ff4949;"></label> <input class="email form-control" type="text" id="EMAIL" name="EMAIL" autocomplete="off" data-required="true" required placeholder="Enter Email" /> <button class="sib-form-block__button sib-form-block__button-with-loader btn btn-info btn-round btn-fill" form="sib-form" type="submit"> <svg class="icon clickable__icon progress-indicator__icon sib-hide-loader-icon" viewBox="0 0 512 512"> <path d="M460.116 373.846l-20.823-12.022c-5.541-3.199-7.54-10.159-4.663-15.874 30.137-59.886 28.343-131.652-5.386-189.946-33.641-58.394-94.896-95.833-161.827-99.676C261.028 55.961 256 50.751 256 44.352V20.309c0-6.904 5.808-12.337 12.703-11.982 83.556 4.306 160.163 50.864 202.11 123.677 42.063 72.696 44.079 162.316 6.031 236.832-3.14 6.148-10.75 8.461-16.728 5.01z" /> </svg> <i class="fa fa-paper-plane-o" aria-hidden="true"></i> Join </button> </div> </div> <input type="text" name="email_address_check" value="" class="input--hidden"> <input type="hidden" name="locale" value="en"> </form> </div> </div> </div>   <script> window.REQUIRED_CODE_ERROR_MESSAGE = 'Please choose a country code'; window.LOCALE = 'en'; window.EMAIL_INVALID_MESSAGE = window.SMS_INVALID_MESSAGE = "The information provided is invalid. Please review the field format and try again."; window.REQUIRED_ERROR_MESSAGE = "This field cannot be left blank. "; window.GENERIC_INVALID_MESSAGE = "The information provided is invalid. Please review the field format and try again."; window.translation = { common: { selectedList: '{quantity} list selected', selectedLists: '{quantity} lists selected' } }; var AUTOHIDE = Boolean(0); </script> <script defer src="https://sibforms.com/forms/end-form/build/main.js"></script>   </div> </div> </div> </div> <div class="container"> <div class="row support d-flex"> <div class="col-sm-3 col-xs-6"> <h4 class="text-white">Company</h4> <ul class="list-unstyled" data-turbolinks="false"> <li><a href="/presentation">About Us</a></li> <li><a href="https://github.com/creativetimofficial">Github</a></li> <li><a href="/templates/free">Freebies</a></li> <li><a href="/templates/premium">Premium</a></li> <li> <a href="https://www.creative-tim.com/blog">Blog</a></li> <li> <a href="/affiliates/new">Affiliate Program</a></li> <li> <a href="https://www.creative-tim.com/club?ref=ct-footer">Creative Tim Club</a></li> </ul> </div> <div class="col-sm-3 col-xs-6"> <h4 class="text-white">Help and Support</h4> <ul class="list-unstyled" data-turbolinks="false"> <li><a href="https://www.creative-tim.com/knowledge-center">Knowledge Center</a></li> <li><a href="/contact-us">Contact Us</a></li> <li><a href="/support-terms">Premium Support</a></li> <li><a target="blank" href="https://www.creative-tim.com/services/updivision?ref=ct-footer">Custom Development</a></li> <li> <a href="https://www.creative-tim.com/knowledge-center/terms-of-service/">Terms & Conditions</a></li> <li> <a href="https://www.creative-tim.com/knowledge-center/privacy-policy/">Privacy Policy</a></li> <li><a href="/license">Licenses</a></li> <li><a target="_blank" href="https://iradesign.io">Illustrations</a></li> </ul> </div> <div class="col-sm-3 col-xs-6"> <h4 class="text-white">Tailwind Resources</h4> <ul class="list-unstyled" data-turbolinks="false"> <li> <a href="/templates/tailwind-dashboard">Admin & Dashboard</a></li> <li> <a href="/templates/tailwind">Templates & Kits</a></li> <li> <a href="https://www.material-tailwind.com/?ref=ct-footer">React & Tailwind Framework</a></li> <li> <a href="https://www.material-tailwind.com/?ref=ct-footer">HTML & Tailwind Framework</a></li> <li> <a href="https://www.material-tailwind.com/figma?ref=ct-footer">Figma Design System</a></li> <li> <a href="https://www.creative-tim.com/twcomponents/cheatsheet">TW Cheatsheet</a></li> <li> <a href="https://www.creative-tim.com/twcomponents/gradient-generator">TW Gradient Generator</a></li> <li> <a href="https://www.creative-tim.com/twcomponents">TW Components</a></li> </ul> </div> <div class="col-sm-3 col-xs-6"> <h4 class="text-white">Developer Resources</h4> <ul class="list-unstyled" data-turbolinks="false"> <li> <a href="https://www.galichat.com/?ref=ct-footer">GaliChat AI Assistant</a></li> <li> <a href="https://www.creative-tim.com/gpts">GPTs Collection</a></li> <li> <a href="https://www.creative-tim.com/cheatsheet/bootstrap4">Bootstrap Cheat Sheet</a></li> <li> <a href="https://www.creative-tim.com/cheatsheet/chatgpt-prompts/">ChatGPT Prompts</a></li> <li> <a target="_blank" href="https://code-mentor.ai/">AI Code Mentor</a></li> <li><a target="_blank" href="https://m.do.co/c/276af09d9975">Digital Ocean</a></li> <li><a href="https://www.creative-tim.com/software?ref=ct-footer">Top Software Companies</a></li> <li><a href="https://www.creative-tim.com/software-engineering-intelligence?ref=ct-footer">Software Engineering Intelligence</a></li> </ul> </div> </div> <hr> <div class="row pt-30"> <div class="col-md-12"> <div class="social-area text-center" itemscope itemtype="https://schema.org/LocalBusiness"> <a itemprop="url" href="/" class="footer-brand" data-turbolinks="false"> <img class="img-logo" alt="logoCt" loading="lazy" src="/assets/logo/logo-ct-white-vertical-0fc4b92dda1d5402f78497576a85bbf1810552c5b4b22a3298df9106e2898a1f.svg" /> </a> <br/> <a itemprop="sameAs" href="https://github.com/creativetimofficial" class="btn btn-default btn-social btn-round" rel="publisher" target="_blank"><i class="fa fa-github"></i></a> <a itemprop="sameAs" href="https://dribbble.com/creativetim" class="btn btn-default btn-social btn-round" rel="publisher" target="_blank"><i class="fa fa-dribbble"></i></a> <a itemprop="sameAs" href="https://www.facebook.com/CreativeTim" class="btn btn-default btn-social btn-round" target="_blank"><i class="fa fa-facebook-square"></i></a> <a itemprop="sameAs" href="https://twitter.com/CreativeTim" class="btn btn-default btn-social btn-round" target="_blank"><i class="fa fa-twitter"></i></a> <a itemprop="sameAs" href="https://www.instagram.com/creativetimofficial/" class="btn btn-default btn-social btn-round" target="_blank"><i class="fa fa-instagram"></i></a> <a itemprop="sameAs" href="https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w" class="btn btn-default btn-social btn-round" target="_blank"><i class="fa fa-youtube"></i></a> <a itemprop="sameAs" href="https://ro.pinterest.com/thecreativetim/" class="btn btn-default btn-social btn-round" target="_blank"><i class="fa fa-pinterest"></i></a> </div> </div> <div class="col-md-12"> <div class="credits"> © 2024 Creative Tim, all rights reserved. Made with <i class="icon-heart heart" alt="love"></i> for a better web. </div> </div> </div> </div> </div> </div> <div class="modal fade login" id="loginModal"> <div class="modal-dialog login animated"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Login with</h4> </div> <div class="modal-body"> <div class="box"> <div class="content"> <div class="social" data-turbolinks="false"> <a id="github_login" class="circle github" rel="nofollow" href="/social/github?destination=dashboard&subscribed=1&url=https%253A%252F%252Fwww.creative-tim.com%252Ftemplates%252Fflutter%253Ffilter%253Dtrue"> <i class="icon-github"></i> </a> <a id="google_login" class="circle google" rel="nofollow" href="/social/google_oauth2?destination=dashboard&subscribed=1&url=https%253A%252F%252Fwww.creative-tim.com%252Ftemplates%252Fflutter%253Ffilter%253Dtrue"> <i class="fa fa-google"></i> </a> <a id="facebook_login" class="circle facebook" rel="nofollow" href="/social/facebook?destination=dashboard&subscribed=1&url=https%253A%252F%252Fwww.creative-tim.com%252Ftemplates%252Fflutter%253Ffilter%253Dtrue"> <i class="icon-facebook-alt"></i> </a> </div> <div class="division"> <div class="line l"></div> <span>or</span> <div class="line r"></div> </div> <div class="error inside-alert"></div> <div class="form loginBox"> <form html="multipart true" action="/login" accept-charset="UTF-8" data-remote="true" method="post"><input type="hidden" name="authenticity_token" value="v5dWxSWipRhusj-I1NlpltMc30HwXwO8W9xOFQf6Qrhnthdf93GfSnyHixZV3ehzits9UhBHRVFHopCBoi4OoQ" autocomplete="off" /> <input type="text" name="email" class="form-control" placeholder="Email" /> <input type="password" name="password" class="form-control" placeholder="Password" /> <input type="hidden" name="destination" value="dashboard" autocomplete="off" /> <input type="hidden" name="url" value="https%3A%2F%2Fwww.creative-tim.com%2Ftemplates%2Fflutter%3Ffilter%3Dtrue" autocomplete="off" /> <div class="row"> <div class="col-md-12"> <input type="submit" name="commit" value="Login" class="btn btn-default btn-login" data-disable-with="Login" /> </div> <div class="col-md-12 mt-24 d-flex justify-content-center"> <script src="https://www.recaptcha.net/recaptcha/api.js" async defer ></script> <div data-sitekey="6LfJvgsTAAAAALbDuISbCDo1l6qyX_YrPT59xaVk" class="g-recaptcha "></div> <noscript> <div> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.recaptcha.net/recaptcha/api/fallback?k=6LfJvgsTAAAAALbDuISbCDo1l6qyX_YrPT59xaVk" name="ReCAPTCHA" style="width: 302px; height: 422px; border-style: none; border: 0; overflow: hidden;"> </iframe> </div> </div> <div style="width: 300px; height: 60px; border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;"> <textarea name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;"> </textarea> </div> </div> </noscript> </div> </div> </form> </div> </div> </div> <div class="box"> <div class="content registerBox" style="display:none;"> <div class="form"> <form html="multipart true" action="/register" accept-charset="UTF-8" data-remote="true" method="post"><input type="hidden" name="authenticity_token" value="3-I_q7W32JTAVk15Fo7SAEdUsL6DhkZ7peMUxDsnkLUA6xIxwdExXYo1D9C9xafsUcCMb0KPhpbSKK1v7EqWAA" autocomplete="off" /> <input type="text" name="email" class="form-control" placeholder="Email" /> <input type="password" name="password" class="form-control" placeholder="Password" /> <input type="password" name="password_confirmation" class="form-control" placeholder="Repeat Password" /> <input type="hidden" name="destination" value="dashboard" autocomplete="off" /> <input type="hidden" name="url" value="https%3A%2F%2Fwww.creative-tim.com%2Ftemplates%2Fflutter%3Ffilter%3Dtrue" autocomplete="off" /> <label class="checkbox"> <input type="checkbox" value="1" data-toggle="checkbox" name="subscribed" class="ct-info checkbox-subscribe"> Subscribe me to the Newsletter </label> <input type="submit" name="commit" value="Create account" class="btn btn-default btn-register" data-disable-with="Create account" /> </form> </div> </div> </div> </div> <div class="modal-footer"> <div class="forgot login-footer"> <span>Looking to <a href="javascript: showRegisterForm();" rel="nofollow">create an account</a> ?</span> <br /> <span><a rel="nofollow" href="/forgot-password">Forgot password</a> ?</span> </div> <div class="forgot register-footer" style="display:none"> <span>Already have an account?</span> <a href="javascript: showLoginForm();">Login</a> </div> </div> </div> </div> </div> <script src="https://widget.galichat.com/gali-embeded.min.js" chat-hash="qm67ek58shjmf589d5j7o" defer> </script> </body> </html>

CINXE.COM