Skip to content

Commit a30ab7c

Browse files
TutorialsAndroidTutorialsAndroid
committed
Add information and links for the Flutter version (KAlertFlutter)
1 parent b0fda36 commit a30ab7c

1 file changed

Lines changed: 301 additions & 1 deletion

File tree

‎index.html‎

Lines changed: 301 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<meta name="description"
1414
content="KAlertDialog is a modern, customizable, Material-style Android AlertDialog library with success, error, warning, progress, input, custom view, URL image dialogs, dark mode, validation, and advanced button styling." />
1515
<meta name="keywords"
16-
content="KAlertDialog, Android AlertDialog library, Android dialog library, Material AlertDialog Android, Java Android dialog, Android custom dialog, Android success dialog, Android error dialog, Android warning dialog, Android progress dialog, Android input dialog, Android custom view dialog, Maven Central Android library, TutorialsAndroid" />
16+
content="KAlertDialog, KAlertFlutter, Android AlertDialog library, Flutter dialog package, Flutter alert dialog, Android dialog library, Material AlertDialog Android, Java Android dialog, Dart Flutter dialog, Android custom dialog, Flutter custom dialog, Android success dialog, Flutter success dialog, Android error dialog, Flutter error dialog, Android warning dialog, Flutter warning dialog, Android progress dialog, Flutter progress dialog, Android input dialog, Flutter input dialog, Android custom view dialog, Flutter custom view dialog, Maven Central Android library, pub.dev Flutter package, TutorialsAndroid" />
1717
<meta name="author" content="TutorialsAndroid" />
1818
<meta name="robots" content="index, follow" />
1919
<meta name="language" content="English" />
@@ -133,6 +133,14 @@
133133
"@type": "Answer",
134134
"text": "Yes. You can add KAlertDialog using implementation 'io.github.tutorialsandroid:kalertdialog:21.0.0'."
135135
}
136+
},
137+
{
138+
"@type": "Question",
139+
"name": "Is there a Flutter version of KAlertDialog?",
140+
"acceptedAnswer": {
141+
"@type": "Answer",
142+
"text": "Yes. KAlertFlutter is the Flutter version inspired by KAlertDialog. It is available on pub.dev and supports success, error, warning, info, question, progress, input, custom image, URL image, and custom view dialogs."
143+
}
136144
}
137145
]
138146
}
@@ -351,6 +359,168 @@
351359
background: rgba(255, 255, 255, 0.1);
352360
}
353361

362+
.btn-flutter {
363+
color: #ffffff;
364+
background: linear-gradient(135deg, #54c5f8, #0175c2);
365+
box-shadow: 0 18px 45px rgba(1, 117, 194, 0.32);
366+
}
367+
368+
.btn-flutter:hover {
369+
box-shadow: 0 20px 55px rgba(1, 117, 194, 0.46);
370+
}
371+
372+
.flutter-box {
373+
border: 1px solid var(--border);
374+
background:
375+
radial-gradient(circle at 20% 20%, rgba(84, 197, 248, 0.20), transparent 34%),
376+
linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.94));
377+
border-radius: var(--radius);
378+
padding: 34px;
379+
box-shadow: var(--shadow);
380+
overflow: hidden;
381+
position: relative;
382+
}
383+
384+
.flutter-box::before {
385+
content: "";
386+
position: absolute;
387+
width: 260px;
388+
height: 260px;
389+
right: -90px;
390+
top: -90px;
391+
background: radial-gradient(circle, rgba(84, 197, 248, 0.22), transparent 68%);
392+
pointer-events: none;
393+
}
394+
395+
.flutter-grid {
396+
display: grid;
397+
grid-template-columns: 1fr 1fr;
398+
gap: 28px;
399+
align-items: center;
400+
position: relative;
401+
z-index: 1;
402+
}
403+
404+
.flutter-title {
405+
font-size: clamp(30px, 4vw, 50px);
406+
letter-spacing: -0.065em;
407+
line-height: 1.05;
408+
margin: 0;
409+
}
410+
411+
.flutter-text {
412+
color: var(--muted);
413+
line-height: 1.75;
414+
margin: 16px 0 0;
415+
font-size: 16px;
416+
}
417+
418+
.flutter-badges {
419+
display: flex;
420+
flex-wrap: wrap;
421+
gap: 10px;
422+
margin-top: 22px;
423+
}
424+
425+
.flutter-badge {
426+
display: inline-flex;
427+
align-items: center;
428+
min-height: 34px;
429+
padding: 0 12px;
430+
border-radius: 999px;
431+
color: #dff6ff;
432+
background: rgba(84, 197, 248, 0.10);
433+
border: 1px solid rgba(84, 197, 248, 0.24);
434+
font-size: 13px;
435+
font-weight: 900;
436+
}
437+
438+
.flutter-card {
439+
border-radius: 26px;
440+
background: #ffffff;
441+
color: #0f172a;
442+
padding: 24px;
443+
box-shadow: 0 26px 70px rgba(0, 0, 0, 0.30);
444+
transform: rotate(2deg);
445+
border: 1px solid rgba(15, 23, 42, 0.08);
446+
}
447+
448+
.flutter-card-header {
449+
display: flex;
450+
align-items: center;
451+
gap: 14px;
452+
margin-bottom: 16px;
453+
}
454+
455+
.flutter-logo-dot {
456+
width: 54px;
457+
height: 54px;
458+
border-radius: 18px;
459+
background: linear-gradient(135deg, #54c5f8, #0175c2);
460+
display: grid;
461+
place-items: center;
462+
color: #ffffff;
463+
font-size: 26px;
464+
font-weight: 900;
465+
box-shadow: 0 16px 36px rgba(1, 117, 194, 0.26);
466+
}
467+
468+
.flutter-card h3 {
469+
margin: 0;
470+
font-size: 21px;
471+
letter-spacing: -0.045em;
472+
}
473+
474+
.flutter-card p {
475+
margin: 8px 0 0;
476+
color: #64748b;
477+
line-height: 1.6;
478+
}
479+
480+
.flutter-code-mini {
481+
margin-top: 18px;
482+
border-radius: 18px;
483+
overflow: hidden;
484+
background: #09111f;
485+
color: #dbeafe;
486+
border: 1px solid rgba(84, 197, 248, 0.20);
487+
}
488+
489+
.flutter-code-mini pre {
490+
border-radius: 0;
491+
font-size: 12px;
492+
padding: 14px;
493+
}
494+
495+
.compare-table {
496+
width: 100%;
497+
border-collapse: separate;
498+
border-spacing: 0;
499+
overflow: hidden;
500+
border-radius: 20px;
501+
border: 1px solid var(--border);
502+
background: rgba(255, 255, 255, 0.05);
503+
margin-top: 20px;
504+
}
505+
506+
.compare-table th,
507+
.compare-table td {
508+
padding: 14px 16px;
509+
border-bottom: 1px solid var(--border);
510+
color: #dbeafe;
511+
text-align: left;
512+
font-size: 14px;
513+
}
514+
515+
.compare-table th {
516+
color: #ffffff;
517+
background: rgba(255, 255, 255, 0.08);
518+
}
519+
520+
.compare-table tr:last-child td {
521+
border-bottom: 0;
522+
}
523+
354524
.hero {
355525
position: relative;
356526
padding: 84px 0 72px;
@@ -1052,6 +1222,10 @@
10521222
grid-template-columns: 1fr;
10531223
}
10541224

1225+
.flutter-grid {
1226+
grid-template-columns: 1fr;
1227+
}
1228+
10551229
.hero-visual {
10561230
min-height: 520px;
10571231
}
@@ -1153,6 +1327,16 @@
11531327
}
11541328

11551329
@media (max-width: 620px) {
1330+
.flutter-box {
1331+
padding: 24px;
1332+
}
1333+
1334+
.compare-table th,
1335+
.compare-table td {
1336+
padding: 12px;
1337+
font-size: 12px;
1338+
}
1339+
11561340
.container {
11571341
width: min(100% - 24px, var(--max));
11581342
}
@@ -1224,6 +1408,7 @@
12241408
<a href="#gallery">Gallery</a>
12251409
<a href="#setup">Setup</a>
12261410
<a href="#docs">Docs</a>
1411+
<a href="#flutter">Flutter</a>
12271412
<a href="#api">API</a>
12281413
<a href="#faq">FAQ</a>
12291414
</nav>
@@ -1263,6 +1448,7 @@ <h1>
12631448
<a class="btn btn-ghost" href="https://github.com/TutorialsAndroid/KAlertDialog" target="_blank"
12641449
rel="noopener">View on GitHub</a>
12651450
<a class="btn btn-ghost" href="#gallery">See Screenshots</a>
1451+
<a class="btn btn-flutter" href="#flutter">Flutter Version</a>
12661452
</div>
12671453

12681454
<div class="install-card" id="quick-install">
@@ -1950,6 +2136,101 @@ <h3>Dynamic alert type change</h3>
19502136
</div>
19512137
</section>
19522138

2139+
<section class="section dark-section" id="flutter">
2140+
<div class="container">
2141+
<div class="flutter-box">
2142+
<div class="flutter-grid">
2143+
<div>
2144+
<span class="section-kicker">Flutter Version Available</span>
2145+
2146+
<h2 class="flutter-title">
2147+
Building Flutter apps? Use KAlertFlutter.
2148+
</h2>
2149+
2150+
<p class="flutter-text">
2151+
KAlertFlutter brings the same modern dialog experience to Flutter apps. It is inspired by KAlertDialog
2152+
and supports beautiful success, error, warning, info, question, progress, input, custom image, URL
2153+
image, and custom view dialogs with a clean Dart API.
2154+
</p>
2155+
2156+
<div class="flutter-badges">
2157+
<span class="flutter-badge">Flutter</span>
2158+
<span class="flutter-badge">Dart</span>
2159+
<span class="flutter-badge">pub.dev</span>
2160+
<span class="flutter-badge">Dark Mode</span>
2161+
<span class="flutter-badge">Input Validation</span>
2162+
<span class="flutter-badge">Custom View</span>
2163+
</div>
2164+
2165+
<div class="hero-actions">
2166+
<a class="btn btn-flutter" href="https://pub.dev/packages/kalertflutter" target="_blank" rel="noopener">
2167+
View on pub.dev
2168+
</a>
2169+
2170+
<a class="btn btn-ghost" href="https://github.com/TutorialsAndroid/KAlertFlutter" target="_blank"
2171+
rel="noopener">
2172+
KAlertFlutter GitHub
2173+
</a>
2174+
2175+
<a class="btn btn-ghost" href="https://tutorialsandroid.github.io/KAlertFlutter/" target="_blank"
2176+
rel="noopener">
2177+
Flutter Website
2178+
</a>
2179+
</div>
2180+
</div>
2181+
2182+
<div>
2183+
<div class="flutter-card">
2184+
<div class="flutter-card-header">
2185+
<div class="flutter-logo-dot">F</div>
2186+
<div>
2187+
<h3>KAlertFlutter</h3>
2188+
<p>Modern Alert Dialog Library for Flutter</p>
2189+
</div>
2190+
</div>
2191+
2192+
<p>
2193+
Add beautiful Flutter dialogs to your apps with a simple package dependency.
2194+
</p>
2195+
2196+
<div class="flutter-code-mini">
2197+
<pre><code>dependencies:
2198+
kalertflutter: ^2.0.0</code></pre>
2199+
</div>
2200+
</div>
2201+
2202+
<table class="compare-table">
2203+
<thead>
2204+
<tr>
2205+
<th>Library</th>
2206+
<th>Platform</th>
2207+
<th>Package</th>
2208+
</tr>
2209+
</thead>
2210+
<tbody>
2211+
<tr>
2212+
<td>KAlertDialog</td>
2213+
<td>Native Android Java</td>
2214+
<td>Maven Central</td>
2215+
</tr>
2216+
<tr>
2217+
<td>KAlertFlutter</td>
2218+
<td>Flutter / Dart</td>
2219+
<td>pub.dev</td>
2220+
</tr>
2221+
<tr>
2222+
<td>Purpose</td>
2223+
<td>Modern dialogs</td>
2224+
<td>Open source</td>
2225+
</tr>
2226+
</tbody>
2227+
</table>
2228+
</div>
2229+
</div>
2230+
</div>
2231+
</div>
2232+
</section>
2233+
19532234
<section class="section soft" id="api">
19542235
<div class="container">
19552236
<div class="section-header">
@@ -2108,6 +2389,16 @@ <h2>Common questions</h2>
21082389
<p>Make sure custom_big_image has a fixed height such as 170dp, the parent image frame has match_parent
21092390
width, and IMAGE_BIG uses centerCrop in Glide.</p>
21102391
</details>
2392+
2393+
<details>
2394+
<summary>Is there a Flutter version of KAlertDialog?</summary>
2395+
<p>
2396+
Yes. KAlertFlutter is available for Flutter developers. It brings a similar modern dialog experience to
2397+
Flutter apps and is available on pub.dev:
2398+
<a href="https://pub.dev/packages/kalertflutter" target="_blank"
2399+
rel="noopener">https://pub.dev/packages/kalertflutter</a>
2400+
</p>
2401+
</details>
21112402
</div>
21122403
</div>
21132404
</section>
@@ -2127,6 +2418,8 @@ <h2>Build beautiful Android dialogs faster with KAlertDialog.</h2>
21272418
rel="noopener">Star on GitHub</a>
21282419
<a class="btn btn-ghost" href="https://search.maven.org/artifact/io.github.tutorialsandroid/kalertdialog"
21292420
target="_blank" rel="noopener">Maven Central</a>
2421+
<a class="btn btn-flutter" href="https://pub.dev/packages/kalertflutter" target="_blank"
2422+
rel="noopener">Flutter Version</a>
21302423
</div>
21312424
</div>
21322425
</div>
@@ -2143,6 +2436,13 @@ <h2>Build beautiful Android dialogs faster with KAlertDialog.</h2>
21432436
<div>
21442437
<a href="https://github.com/TutorialsAndroid/KAlertDialog" target="_blank" rel="noopener">GitHub</a>
21452438
·
2439+
<a href="https://search.maven.org/artifact/io.github.tutorialsandroid/kalertdialog" target="_blank"
2440+
rel="noopener">Maven Central</a>
2441+
·
2442+
<a href="https://pub.dev/packages/kalertflutter" target="_blank" rel="noopener">KAlertFlutter</a>
2443+
·
2444+
<a href="https://github.com/TutorialsAndroid/KAlertFlutter" target="_blank" rel="noopener">Flutter GitHub</a>
2445+
·
21462446
<a href="https://instagram.com/coderx09" target="_blank" rel="noopener">Instagram</a>
21472447
·
21482448
<a href="https://twitter.com/a_masram444" target="_blank" rel="noopener">Twitter/X</a>

0 commit comments

Comments
 (0)