Projek Mobile Computing Dengan Flutter ke 25

<h2 style="text-align: center;">Projek Mobile Computing Dengan Flutter ke 25</h2><div><div class="separator" style="clear: both; text-align: center;"><div class="separator" style="clear: both;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvXsPDkXqigVahGIvhx3sShcnXfCgySpA1ZzIP-eiIPh-pIjv-ByXZ52tzh73_BxMWL5EmQUAmxkdwwWnrRS6scJuXX8SppudsJ8N-oZt4o5oSOyuAzk-F-R0T8kMtsiQrQNgkoHD3ByF9NEWtB5dF1f5B-wUCayvQy2H0jGv1ByabxIqV11zLeWk/s1920/Screenshot%20(52).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvXsPDkXqigVahGIvhx3sShcnXfCgySpA1ZzIP-eiIPh-pIjv-ByXZ52tzh73_BxMWL5EmQUAmxkdwwWnrRS6scJuXX8SppudsJ8N-oZt4o5oSOyuAzk-F-R0T8kMtsiQrQNgkoHD3ByF9NEWtB5dF1f5B-wUCayvQy2H0jGv1ByabxIqV11zLeWk/s320/Screenshot%20(52).png" width="320" /></a></div><div class="separator" style="clear: both;"><br /></div></div></div></div><div><b>Coding Pada file main.dart</b></div><div><br /></div><div><div style="background-color: #24292e; color: #e1e4e8; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div><div style="line-height: 19px;"><div><span style="color: #f97583;">import</span> <span style="color: #9ecbff;">'package:flutter/material.dart'</span>;</div><div><span style="color: #f97583;">import</span> <span style="color: #9ecbff;">'../widget/soal_25.dart'</span>;</div><br /><div><span style="color: #f97583;">void</span> <span style="color: #b392f0;">main</span>() {</div><div>  <span style="color: #b392f0;">runApp</span>(<span style="color: #f97583;">const</span> <span style="color: #b392f0;">MyApp</span>());</div><div>}</div><br /><div><span style="color: #f97583;">class</span> <span style="color: #b392f0;">MyApp</span> <span style="color: #f97583;">extends</span> <span style="color: #b392f0;">StatelessWidget</span> {</div><div>  <span style="color: #f97583;">const</span> <span style="color: #b392f0;">MyApp</span>({<span style="color: #f97583;">super</span>.<span style="color: #ffab70;">key</span>});</div><br /><div>  <span style="color: #6a737d;">// This widget is the root of your application.</span></div><div>  <span style="color: #ffab70;">@</span>override</div><div>  <span style="color: #b392f0;">Widget</span> <span style="color: #b392f0;">build</span>(<span style="color: #b392f0;">BuildContext</span> <span style="color: #ffab70;">context</span>) {</div><div>    <span style="color: #f97583;">return</span> <span style="color: #b392f0;">MaterialApp</span>(</div><div>      <span style="color: #ffab70;">debugShowCheckedModeBanner</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">false</span>,</div><div>      <span style="color: #ffab70;">theme</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">ThemeData</span>(</div><div>        <span style="color: #ffab70;">primarySwatch</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.blue,</div><div>        <span style="color: #ffab70;">canvasColor</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.white,</div><div>      ),</div><div>      <span style="color: #ffab70;">home</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Soal25</span>(),</div><div>    );</div><div>  }</div><div>}</div><br /></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div><div><b><br /></b></div><div><b>Coding Pada file soal_25.dart</b></div><div><br /></div><div><div style="background-color: #24292e; color: #e1e4e8; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div><div style="line-height: 19px;"><div><span style="color: #f97583;">import</span> <span style="color: #9ecbff;">'package:flutter/material.dart'</span>;</div><br /><div><span style="color: #f97583;">class</span> <span style="color: #b392f0;">Soal25</span> <span style="color: #f97583;">extends</span> <span style="color: #b392f0;">StatefulWidget</span> {</div><div>  <span style="color: #f97583;">const</span> <span style="color: #b392f0;">Soal25</span>({<span style="color: #b392f0;">Key</span><span style="color: #f97583;">?</span> <span style="color: #ffab70;">key</span>}) <span style="color: #f97583;">:</span> <span style="color: #f97583;">super</span>(<span style="color: #ffab70;">key</span><span style="color: #f97583;">:</span> <span style="color: #ffab70;">key</span>);</div><br /><div>  <span style="color: #ffab70;">@</span>override</div><div>  <span style="color: #b392f0;">State</span><<span style="color: #b392f0;">Soal25</span>> <span style="color: #b392f0;">createState</span>() <span style="color: #f97583;">=></span> <span style="color: #b392f0;">_Soal25State</span>();</div><div>}</div><br /><div><span style="color: #f97583;">class</span> <span style="color: #b392f0;">_Soal25State</span> <span style="color: #f97583;">extends</span> <span style="color: #b392f0;">State</span><<span style="color: #b392f0;">Soal25</span>> {</div><div>  <span style="color: #ffab70;">@</span>override</div><div>  <span style="color: #b392f0;">Widget</span> <span style="color: #b392f0;">build</span>(<span style="color: #b392f0;">BuildContext</span> <span style="color: #ffab70;">context</span>) {</div><div>    <span style="color: #f97583;">return</span> <span style="color: #b392f0;">Scaffold</span>(</div><div>      <span style="color: #ffab70;">appBar</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">AppBar</span>(</div><div>        <span style="color: #ffab70;">backgroundColor</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.black,</div><div>        <span style="color: #ffab70;">leading</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Icon</span>(<span style="color: #b392f0;">Icons</span>.person_2_rounded),</div><div>        <span style="color: #ffab70;">title</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Text</span>(<span style="color: #9ecbff;">"Abdul Aziz Nurhakim"</span>),</div><div>        <span style="color: #ffab70;">centerTitle</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">false</span>,</div><div>        <span style="color: #ffab70;">actions</span><span style="color: #f97583;">:</span> [</div><div>          <span style="color: #b392f0;">IconButton</span>(</div><div>            <span style="color: #ffab70;">onPressed</span><span style="color: #f97583;">:</span> () {</div><div>              <span style="color: #b392f0;">print</span>(<span style="color: #9ecbff;">"KLIK MORE"</span>);</div><div>            },</div><div>            <span style="color: #ffab70;">icon</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Icon</span>(<span style="color: #b392f0;">Icons</span>.arrow_back_ios_new_outlined),</div><div>          ),</div><div>        ],</div><div>      ),</div><div>      <span style="color: #ffab70;">body</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Container</span>(</div><div>        <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.white, <span style="color: #6a737d;">// Mengubah warna latar belakang menjadi putih</span></div><div>        <span style="color: #ffab70;">child</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">SingleChildScrollView</span>(</div><div>          <span style="color: #ffab70;">padding</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">EdgeInsets</span>.<span style="color: #b392f0;">fromLTRB</span>(<span style="color: #79b8ff;">10</span>, <span style="color: #79b8ff;">10</span>, <span style="color: #79b8ff;">10</span>, <span style="color: #79b8ff;">0</span>),</div><div>          <span style="color: #ffab70;">child</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Column</span>(</div><div>            <span style="color: #ffab70;">mainAxisAlignment</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">MainAxisAlignment</span>.<span style="color: #79b8ff;">center</span>,</div><div>            <span style="color: #ffab70;">children</span><span style="color: #f97583;">:</span> [</div><div>              <span style="color: #b392f0;">Row</span>(</div><div>                <span style="color: #ffab70;">mainAxisAlignment</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">MainAxisAlignment</span>.<span style="color: #79b8ff;">center</span>,</div><div>                <span style="color: #ffab70;">children</span><span style="color: #f97583;">:</span> [</div><div>                  <span style="color: #b392f0;">Container</span>(</div><div>                    <span style="color: #ffab70;">width</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">150</span>,</div><div>                    <span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">150</span>,</div><div>                    <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.red,</div><div>                    <span style="color: #ffab70;">child</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Center</span>(</div><div>                      <span style="color: #ffab70;">child</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Text</span>(</div><div>                        <span style="color: #9ecbff;">"1"</span>,</div><div>                        <span style="color: #ffab70;">style</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">TextStyle</span>(</div><div>                          <span style="color: #ffab70;">fontSize</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">25</span>,</div><div>                          <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.white,</div><div>                        ),</div><div>                      ),</div><div>                    ),</div><div>                  ),</div><div>                  <span style="color: #b392f0;">SizedBox</span>(<span style="color: #ffab70;">width</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">16</span>),</div><div>                  <span style="color: #b392f0;">Container</span>(</div><div>                    <span style="color: #ffab70;">width</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">150</span>,</div><div>                    <span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">150</span>,</div><div>                    <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.green,</div><div>                    <span style="color: #ffab70;">child</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Center</span>(</div><div>                      <span style="color: #ffab70;">child</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Text</span>(</div><div>                        <span style="color: #9ecbff;">"2"</span>,</div><div>                        <span style="color: #ffab70;">style</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">TextStyle</span>(</div><div>                          <span style="color: #ffab70;">fontSize</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">25</span>,</div><div>                          <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.white,</div><div>                        ),</div><div>                      ),</div><div>                    ),</div><div>                  ),</div><div>                ],</div><div>              ),</div><div>              <span style="color: #b392f0;">SizedBox</span>(<span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">16</span>),</div><div>              <span style="color: #b392f0;">Row</span>(</div><div>                <span style="color: #ffab70;">mainAxisAlignment</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">MainAxisAlignment</span>.<span style="color: #79b8ff;">center</span>,</div><div>                <span style="color: #ffab70;">children</span><span style="color: #f97583;">:</span> [</div><div>                  <span style="color: #b392f0;">Container</span>(</div><div>                    <span style="color: #ffab70;">width</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">150</span>,</div><div>                    <span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">150</span>,</div><div>                    <span style="color: #ffab70;">decoration</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">BoxDecoration</span>(</div><div>                      <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.blue,</div><div>                      <span style="color: #ffab70;">borderRadius</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">BorderRadius</span>.<span style="color: #b392f0;">circular</span>(<span style="color: #79b8ff;">90</span>),</div><div>                    ),</div><div>                    <span style="color: #ffab70;">child</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Center</span>(</div><div>                      <span style="color: #ffab70;">child</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Text</span>(</div><div>                        <span style="color: #9ecbff;">"3"</span>,</div><div>                        <span style="color: #ffab70;">style</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">TextStyle</span>(</div><div>                          <span style="color: #ffab70;">fontSize</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">25</span>,</div><div>                          <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.white,</div><div>                        ),</div><div>                      ),</div><div>                    ),</div><div>                  ),</div><div>                  <span style="color: #b392f0;">SizedBox</span>(<span style="color: #ffab70;">width</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">16</span>),</div><div>                  <span style="color: #b392f0;">Container</span>(</div><div>                    <span style="color: #ffab70;">width</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">150</span>,</div><div>                    <span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">90</span>,</div><div>                    <span style="color: #ffab70;">decoration</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">BoxDecoration</span>(</div><div>                      <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.yellow,</div><div>                      <span style="color: #ffab70;">borderRadius</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">BorderRadius</span>.<span style="color: #b392f0;">circular</span>(<span style="color: #79b8ff;">40</span>),</div><div>                      <span style="color: #ffab70;">boxShadow</span><span style="color: #f97583;">:</span> [</div><div>                        <span style="color: #b392f0;">BoxShadow</span>(</div><div>                          <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.black.<span style="color: #b392f0;">withOpacity</span>(<span style="color: #79b8ff;">0.5</span>),</div><div>                          <span style="color: #ffab70;">offset</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Offset</span>(<span style="color: #79b8ff;">0</span>, <span style="color: #79b8ff;">2</span>),</div><div>                          <span style="color: #ffab70;">blurRadius</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">4</span>,</div><div>                        ),</div><div>                      ],</div><div>                    ),</div><div>                    <span style="color: #ffab70;">child</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Center</span>(</div><div>                      <span style="color: #ffab70;">child</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Text</span>(</div><div>                        <span style="color: #9ecbff;">"4"</span>,</div><div>                        <span style="color: #ffab70;">style</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">TextStyle</span>(</div><div>                          <span style="color: #ffab70;">fontSize</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">25</span>,</div><div>                          <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.white,</div><div>                        ),</div><div>                      ),</div><div>                    ),</div><div>                  ),</div><div>                ],</div><div>              )</div><div>            ],</div><div>          ),</div><div>        ),</div><div>      ),</div><div>    );</div><div>  }</div><div>}</div><br /></div></div><br /></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div><div><b><br /></b></div><div><b>Hasil Running </b></div><div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhljWmgdcmvMg_fCSmVoJK0LPxuJ0e1W1ASElSyR80uD-JCMKfS1kBn9x8_xBBO7QupBCNr_ROUnFij5kWHsiiE9n7JHFzEma_s8VfA9XqPRA5p06gY_FxfMUzklPLJJ0xOKtsup18npt0QyDANaHNmaAWP3IJA1ZivixDYc4r7IS_T5yQl79WVluc/s1920/Screenshot%20(53).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhljWmgdcmvMg_fCSmVoJK0LPxuJ0e1W1ASElSyR80uD-JCMKfS1kBn9x8_xBBO7QupBCNr_ROUnFij5kWHsiiE9n7JHFzEma_s8VfA9XqPRA5p06gY_FxfMUzklPLJJ0xOKtsup18npt0QyDANaHNmaAWP3IJA1ZivixDYc4r7IS_T5yQl79WVluc/w640-h360/Screenshot%20(53).png" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><b><br /></b></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><p><br /></p><div><br /></div><div><br /></div><div><br /></div>

Projek Mobile Computing Dengan Flutter ke 25

Projek Mobile Computing Dengan Flutter ke 25 Coding Pada file main.dart import 'package:flutter/material.dart' ; import '../wi...

Read more »

Projek Mobile Computing Dengan Flutter

<h1 style="text-align: center;"> Projek Mobile Computing Dengan Flutter</h1><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEj12Li74P8p2g03EM0_NHDyxBwv6y59UmuSpjmj6sS3HLViNf5yCzpBRkJR3vP5r_YAPNW5CdCG9RBUWF5YbjMkClnK1a1BDlOghpK744G2th9HsT80o9_EAPId52C1jQQYjTIRMBzKgPefKw9FMpEUNa7bZ7htI1ecL23FdbiqLLOko5kyjTbUDcI" style="margin-left: 1em; margin-right: 1em;"><img alt="" data-original-height="1080" data-original-width="1920" height="221" src="https://blogger.googleusercontent.com/img/a/AVvXsEj12Li74P8p2g03EM0_NHDyxBwv6y59UmuSpjmj6sS3HLViNf5yCzpBRkJR3vP5r_YAPNW5CdCG9RBUWF5YbjMkClnK1a1BDlOghpK744G2th9HsT80o9_EAPId52C1jQQYjTIRMBzKgPefKw9FMpEUNa7bZ7htI1ecL23FdbiqLLOko5kyjTbUDcI=w392-h221" width="392" /></a></div><br /></div><div><div style="text-align: justify;"><span>    </span>Flutter adalah sebuah framework open-source yang dikembangkan oleh Google. Framework ini digunakan untuk membangun aplikasi lintas platform dengan menggunakan satu basis kode. Dengan Flutter, Anda dapat mengembangkan aplikasi untuk platform seperti Android, iOS, web, dan desktop dari satu kode sumber yang sama. Flutter menggunakan bahasa pemrograman Dart sebagai bahasa utama untuk mengembangkan aplikasi. Dart adalah bahasa pemrograman yang dikembangkan oleh Google dan dirancang untuk membangun aplikasi dengan performa tinggi. Dart memiliki sintaks yang mirip dengan bahasa pemrograman seperti Java dan JavaScript, sehingga relatif mudah dipelajari bagi para pengembang yang sudah memiliki pengalaman dengan bahasa-bahasa tersebut.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><span>    </span>Salah satu fitur utama dari Flutter adalah kemampuannya untuk membuat antarmuka pengguna yang menarik dan responsif. Flutter menggunakan konsep "widgets" yang dapat disusun secara hierarkis untuk membangun antarmuka pengguna. Widgets di Flutter dapat didefinisikan sebagai komponen-komponen kecil yang membentuk bagian-bagian dari antarmuka pengguna, seperti tombol, teks, gambar, dan lain sebagainya. Anda dapat menggabungkan dan menyusun widgets secara fleksibel untuk membuat tampilan yang kompleks dan menarik. Selain itu, Flutter juga menawarkan kemampuan "hot reload" yang memungkinkan pengembang untuk melihat perubahan yang mereka buat pada kode langsung diterapkan ke aplikasi secara real-time. Fitur ini mempercepat proses pengembangan dan memungkinkan pengembang untuk melihat hasil dari perubahan mereka dengan cepat.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><span>    </span>Dengan semua fitur ini, Flutter telah menjadi populer di kalangan pengembang aplikasi karena kemampuannya untuk menghasilkan aplikasi yang kaya fitur, responsif, dan memiliki tampilan yang menarik dengan menggunakan waktu dan usaha yang relatif lebih sedikit dibandingkan dengan pengembangan aplikasi tradisional untuk setiap platform secara terpisah.</div></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Dibawah ini adalah cara membuat projek flutter baru di editor Visual Studio Code :</div><div style="text-align: justify;"><div><br /></div><div><ol><li>Pastikan Anda telah menginstal Flutter dan Visual Studio Code dengan benar, dan ekstensi Flutter dan Dart diinstal di Visual Studio Code.</li><li>Buka Visual Studio Code dan buat sebuah proyek Flutter baru atau buka proyek Flutter yang sudah ada.</li><li>Untuk membuat file Flutter baru menggunakan shortcut "Ctrl + Shift + P" secara bersamaan untuk membuka panel perintah di Visual Studio Code.</li><li>Kemudian pilih "Flutter: New Project" di dalam panel perintah</li><li>Kemudian pilih "Application"</li><li>Kemudian pilih folder untuk menyimpan file project tersebut.</li><li>Ketik nama file yang diinginkan (misalnya "my_file") dan tekan Enter.</li><li>Visual Studio Code akan membuat file baru dengan nama yang Anda tentukan dalam direktori proyek Flutter Anda. File baru akan terbuka di editor.</li><li>Sekarang Anda dapat mulai menulis kode Flutter dalam file baru yang telah dibuat. seperti menambah folder, file dart didalam folder lib.</li></ol></div></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Berikut adalah contoh projek flutter yang bisa digunakan sebagai latihan :</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><i>note : silahkan klik salah satu judul dibawah ini</i></div><h3 style="text-align: justify;"><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_14.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 01</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_48.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 02</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_61.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 03</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_83.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 04</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_24.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 05</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_51.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 06</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_76.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 07</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_45.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 08</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_4.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 09</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_75.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 10</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_25.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 11</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_15.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 12</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_93.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 13</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_30.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 14</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_19.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 15</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_20.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 16</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_7.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 17</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_86.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 18</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_36.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 19</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_13.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 20</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_60.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 21</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_16.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 22</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_5.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 23</a><br /><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_65.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 24</a></h3><h3 style="text-align: justify;"><a href="https://accpemalang.blogspot.com/2023/06/projek-mobile-computing-dengan-flutter_1.html" target="_blank">Projek Mobile Computing Dengan Flutter ke 25</a></h3><div style="text-align: justify;"><div><br /></div></div>

Projek Mobile Computing Dengan Flutter

 Projek Mobile Computing Dengan Flutter      Flutter adalah sebuah framework open-source yang dikembangkan oleh Google. Framework ini diguna...

Read more »

Projek Mobile Computing Dengan Flutter ke 24

<h2 style="text-align: center;">Projek Mobile Computing Dengan Flutter ke 24</h2><div><div class="separator" style="clear: both; text-align: center;"><div class="separator" style="clear: both;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi756dY8zTSruYsb_9JFLlv0RWyXk7oW_HH_eUr8pcpOPWg_ofRK7pbYmORVqOSHIINwleNVh2LiKZQdj7GqcqKSWuMyNCHrZT9pwZdH-qbljuF4sHljb4lnvdtRgYKG21n_GWmWXs7klKaZMn7LMnK0fFilaXHqxxr8tM98rg86t7kLo8g2M3DocA/s1920/Screenshot%20(48).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi756dY8zTSruYsb_9JFLlv0RWyXk7oW_HH_eUr8pcpOPWg_ofRK7pbYmORVqOSHIINwleNVh2LiKZQdj7GqcqKSWuMyNCHrZT9pwZdH-qbljuF4sHljb4lnvdtRgYKG21n_GWmWXs7klKaZMn7LMnK0fFilaXHqxxr8tM98rg86t7kLo8g2M3DocA/s320/Screenshot%20(48).png" width="320" /></a></div><br /><div class="separator" style="clear: both;"><br /></div></div></div></div><div><b>Coding Pada file main.dart</b></div><div><br /></div><div><div style="background-color: #24292e; color: #e1e4e8; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div><div style="line-height: 19px;"><div><span style="color: #f97583;">import</span> <span style="color: #9ecbff;">'package:flutter/material.dart'</span>;</div><div><span style="color: #f97583;">import</span> <span style="color: #9ecbff;">'../widget/soal_24.dart'</span>;</div><br /><div><span style="color: #f97583;">void</span> <span style="color: #b392f0;">main</span>() {</div><div>  <span style="color: #b392f0;">runApp</span>(<span style="color: #f97583;">const</span> <span style="color: #b392f0;">MyApp</span>());</div><div>}</div><br /><div><span style="color: #f97583;">class</span> <span style="color: #b392f0;">MyApp</span> <span style="color: #f97583;">extends</span> <span style="color: #b392f0;">StatelessWidget</span> {</div><div>  <span style="color: #f97583;">const</span> <span style="color: #b392f0;">MyApp</span>({<span style="color: #f97583;">super</span>.<span style="color: #ffab70;">key</span>});</div><br /><div>  <span style="color: #6a737d;">// This widget is the root of your application.</span></div><div>  <span style="color: #ffab70;">@</span>override</div><div>  <span style="color: #b392f0;">Widget</span> <span style="color: #b392f0;">build</span>(<span style="color: #b392f0;">BuildContext</span> <span style="color: #ffab70;">context</span>) {</div><div>    <span style="color: #f97583;">return</span> <span style="color: #b392f0;">MaterialApp</span>(</div><div>      <span style="color: #ffab70;">debugShowCheckedModeBanner</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">false</span>,</div><div>      <span style="color: #ffab70;">theme</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">ThemeData</span>(</div><div>        <span style="color: #ffab70;">primarySwatch</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.blue,</div><div>        <span style="color: #ffab70;">canvasColor</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.white,</div><div>      ),</div><div>      <span style="color: #ffab70;">home</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Soal24</span>(),</div><div>    );</div><div>  }</div><div>}</div><br /></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div><div><b><br /></b></div><div><b>Coding Pada file soal_24.dart</b></div><div><br /></div><div><div style="background-color: #24292e; color: #e1e4e8; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div><div style="line-height: 19px;"><div><span style="color: #f97583;">import</span> <span style="color: #9ecbff;">'package:flutter/material.dart'</span>;</div><br /><div><span style="color: #f97583;">class</span> <span style="color: #b392f0;">Soal24</span> <span style="color: #f97583;">extends</span> <span style="color: #b392f0;">StatelessWidget</span> {</div><div>  <span style="color: #f97583;">const</span> <span style="color: #b392f0;">Soal24</span>({</div><div>    <span style="color: #b392f0;">Key</span><span style="color: #f97583;">?</span> <span style="color: #ffab70;">key</span>,</div><div>  }) <span style="color: #f97583;">:</span> <span style="color: #f97583;">super</span>(<span style="color: #ffab70;">key</span><span style="color: #f97583;">:</span> <span style="color: #ffab70;">key</span>);</div><br /><div>  <span style="color: #ffab70;">@</span>override</div><div>  <span style="color: #b392f0;">Widget</span> <span style="color: #b392f0;">build</span>(<span style="color: #b392f0;">BuildContext</span> <span style="color: #ffab70;">context</span>) {</div><div>    <span style="color: #f97583;">return</span> <span style="color: #b392f0;">Scaffold</span>(</div><div>      <span style="color: #ffab70;">appBar</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">AppBar</span>(</div><div>        <span style="color: #ffab70;">leading</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">FlutterLogo</span>(),</div><div>        <span style="color: #ffab70;">title</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Text</span>(<span style="color: #9ecbff;">"Text Judul"</span>),</div><div>        <span style="color: #ffab70;">centerTitle</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">false</span>,</div><div>        <span style="color: #ffab70;">actions</span><span style="color: #f97583;">:</span> [</div><div>          <span style="color: #b392f0;">IconButton</span>(</div><div>            <span style="color: #ffab70;">onPressed</span><span style="color: #f97583;">:</span> () {</div><div>              <span style="color: #b392f0;">print</span>(<span style="color: #9ecbff;">"KLIK MORE"</span>);</div><div>            },</div><div>            <span style="color: #ffab70;">icon</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Icon</span>(<span style="color: #b392f0;">Icons</span>.more_vert),</div><div>          ),</div><div>        ],</div><div>      ),</div><div>      <span style="color: #ffab70;">body</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Column</span>(</div><div>        <span style="color: #ffab70;">children</span><span style="color: #f97583;">:</span> [</div><div>          <span style="color: #b392f0;">Container</span>(</div><div>            <span style="color: #ffab70;">padding</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">EdgeInsets</span>.<span style="color: #b392f0;">only</span>(</div><div>              <span style="color: #ffab70;">top</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">20</span>,</div><div>              <span style="color: #ffab70;">left</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">20</span>,</div><div>              <span style="color: #ffab70;">bottom</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">20</span>,</div><div>            ),</div><div>            <span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">140</span>,</div><div>            <span style="color: #ffab70;">child</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">ListView</span>.<span style="color: #b392f0;">builder</span>(</div><div>              <span style="color: #ffab70;">scrollDirection</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Axis</span>.<span style="color: #79b8ff;">horizontal</span>,</div><div>              <span style="color: #ffab70;">itemCount</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">20</span>,</div><div>              <span style="color: #ffab70;">itemBuilder</span><span style="color: #f97583;">:</span> (<span style="color: #ffab70;">context</span>, <span style="color: #ffab70;">index</span>) {</div><div>                <span style="color: #f97583;">if</span> (<span style="color: #ffab70;">index</span> <span style="color: #f97583;">%</span> <span style="color: #79b8ff;">2</span> <span style="color: #f97583;">==</span> <span style="color: #79b8ff;">0</span>) {</div><div>                  <span style="color: #f97583;">return</span> <span style="color: #b392f0;">Container</span>(</div><div>                    <span style="color: #ffab70;">width</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">100</span>,</div><div>                    <span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">120</span>,</div><div>                    <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.blue[<span style="color: #79b8ff;">900</span>],</div><div>                    <span style="color: #ffab70;">margin</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">EdgeInsets</span>.<span style="color: #b392f0;">only</span>(<span style="color: #ffab70;">right</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">20</span>),</div><div>                  );</div><div>                } <span style="color: #f97583;">else</span> {</div><div>                  <span style="color: #f97583;">return</span> <span style="color: #b392f0;">Container</span>(</div><div>                    <span style="color: #ffab70;">width</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">100</span>,</div><div>                    <span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">120</span>,</div><div>                    <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.amber,</div><div>                    <span style="color: #ffab70;">margin</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">EdgeInsets</span>.<span style="color: #b392f0;">only</span>(<span style="color: #ffab70;">right</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">20</span>),</div><div>                  );</div><div>                }</div><div>              },</div><div>            ),</div><div>          ),</div><div>          <span style="color: #b392f0;">Expanded</span>(</div><div>            <span style="color: #ffab70;">child</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">ListView</span>.<span style="color: #b392f0;">builder</span>(</div><div>              <span style="color: #ffab70;">padding</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">EdgeInsets</span>.<span style="color: #b392f0;">all</span>(<span style="color: #79b8ff;">20</span>),</div><div>              <span style="color: #ffab70;">itemCount</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">50</span>,</div><div>              <span style="color: #ffab70;">itemBuilder</span><span style="color: #f97583;">:</span> (<span style="color: #ffab70;">context</span>, <span style="color: #ffab70;">index</span>) {</div><div>                <span style="color: #f97583;">if</span> (<span style="color: #ffab70;">index</span> <span style="color: #f97583;">%</span> <span style="color: #79b8ff;">2</span> <span style="color: #f97583;">==</span> <span style="color: #79b8ff;">0</span>) {</div><div>                  <span style="color: #f97583;">return</span> <span style="color: #b392f0;">Padding</span>(</div><div>                    <span style="color: #ffab70;">padding</span><span style="color: #f97583;">:</span> <span style="color: #f97583;">const</span> <span style="color: #b392f0;">EdgeInsets</span>.<span style="color: #b392f0;">only</span>(<span style="color: #ffab70;">bottom</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">25</span>),</div><div>                    <span style="color: #ffab70;">child</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Column</span>(</div><div>                      <span style="color: #ffab70;">crossAxisAlignment</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">CrossAxisAlignment</span>.<span style="color: #79b8ff;">start</span>,</div><div>                      <span style="color: #ffab70;">children</span><span style="color: #f97583;">:</span> [</div><div>                        <span style="color: #b392f0;">Container</span>(</div><div>                          <span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">150</span>,</div><div>                          <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.blue,</div><div>                        ),</div><div>                        <span style="color: #b392f0;">SizedBox</span>(<span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">10</span>),</div><div>                        <span style="color: #b392f0;">Text</span>(</div><div>                          <span style="color: #9ecbff;">"Hello </span><span style="color: #9ecbff;">${</span><span style="color: #ffab70;">index</span><span style="color: #9ecbff;"> + </span><span style="color: #79b8ff;">1</span><span style="color: #9ecbff;">}</span><span style="color: #9ecbff;">"</span>,</div><div>                          <span style="color: #ffab70;">style</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">TextStyle</span>(</div><div>                            <span style="color: #ffab70;">fontSize</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">25</span>,</div><div>                          ),</div><div>                        ),</div><div>                      ],</div><div>                    ),</div><div>                  );</div><div>                } <span style="color: #f97583;">else</span> {</div><div>                  <span style="color: #f97583;">return</span> <span style="color: #b392f0;">Padding</span>(</div><div>                    <span style="color: #ffab70;">padding</span><span style="color: #f97583;">:</span> <span style="color: #f97583;">const</span> <span style="color: #b392f0;">EdgeInsets</span>.<span style="color: #b392f0;">only</span>(<span style="color: #ffab70;">bottom</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">25</span>),</div><div>                    <span style="color: #ffab70;">child</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Column</span>(</div><div>                      <span style="color: #ffab70;">crossAxisAlignment</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">CrossAxisAlignment</span>.<span style="color: #79b8ff;">start</span>,</div><div>                      <span style="color: #ffab70;">children</span><span style="color: #f97583;">:</span> [</div><div>                        <span style="color: #b392f0;">Container</span>(</div><div>                          <span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">150</span>,</div><div>                          <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.amber,</div><div>                        ),</div><div>                        <span style="color: #b392f0;">SizedBox</span>(<span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">10</span>),</div><div>                        <span style="color: #b392f0;">Text</span>(</div><div>                          <span style="color: #9ecbff;">"Hello </span><span style="color: #9ecbff;">${</span><span style="color: #ffab70;">index</span><span style="color: #9ecbff;"> + </span><span style="color: #79b8ff;">1</span><span style="color: #9ecbff;">}</span><span style="color: #9ecbff;">"</span>,</div><div>                          <span style="color: #ffab70;">style</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">TextStyle</span>(</div><div>                            <span style="color: #ffab70;">fontSize</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">25</span>,</div><div>                          ),</div><div>                        ),</div><div>                      ],</div><div>                    ),</div><div>                  );</div><div>                }</div><div>              },</div><div>            ),</div><div>          ),</div><div>        ],</div><div>      ),</div><div>    );</div><div>  }</div><div>}</div><br /></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div><div><b><br /></b></div><div><b>Hasil Running </b></div><div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOBjDvyxy2LJNulXEcSVhG-T_E9pnPKfHMYNviUMtm6EB34Z-o0kjIwOcW8F3Kh99UIfNZueWKZXbWiGu_4gbRGkXhf288TBMUO-5Y6oHgq-aQaXTbOG7TI2ssv_AW00wWB9w8shkcoUbXVxvvaErWT4zw_Bhy4aTU3pqvMqwex2OEy9rkW8u8CyA/s1920/Screenshot%20(49).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOBjDvyxy2LJNulXEcSVhG-T_E9pnPKfHMYNviUMtm6EB34Z-o0kjIwOcW8F3Kh99UIfNZueWKZXbWiGu_4gbRGkXhf288TBMUO-5Y6oHgq-aQaXTbOG7TI2ssv_AW00wWB9w8shkcoUbXVxvvaErWT4zw_Bhy4aTU3pqvMqwex2OEy9rkW8u8CyA/w640-h360/Screenshot%20(49).png" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><b><br /></b></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><p><br /></p><div><br /></div><div><br /></div><div><br /></div>

Projek Mobile Computing Dengan Flutter ke 24

Projek Mobile Computing Dengan Flutter ke 24 Coding Pada file main.dart import 'package:flutter/material.dart' ; import '../wi...

Read more »

Projek Mobile Computing Dengan Flutter ke 23

<h2 style="text-align: center;">Projek Mobile Computing Dengan Flutter ke 23</h2><div><div class="separator" style="clear: both; text-align: center;"><div class="separator" style="clear: both;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeoGq3bz4W1iDNF2OTAGqXFaXX1M_SUHrL4AWXFXxCtli59JJRONzjp2nQw2ng6pibIGHD_Jv3Ft1dh5Z0EB6BdPigv4bSuZWDTFKFLRgXqK4lil7M3nNYaJclEhBXsmYiE9E7a3PRf3It8FiDC9wgBjNIwZl2WFHHryMT_yHBPmHYt8mAnTh_oq4/s1920/Screenshot%20(46).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeoGq3bz4W1iDNF2OTAGqXFaXX1M_SUHrL4AWXFXxCtli59JJRONzjp2nQw2ng6pibIGHD_Jv3Ft1dh5Z0EB6BdPigv4bSuZWDTFKFLRgXqK4lil7M3nNYaJclEhBXsmYiE9E7a3PRf3It8FiDC9wgBjNIwZl2WFHHryMT_yHBPmHYt8mAnTh_oq4/s320/Screenshot%20(46).png" width="320" /></a></div><div class="separator" style="clear: both;"><br /></div></div></div></div><div><b>Coding Pada file main.dart</b></div><div><br /></div><div><div style="background-color: #24292e; color: #e1e4e8; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div><div style="line-height: 19px;"><div><span style="color: #f97583;">import</span> <span style="color: #9ecbff;">'package:flutter/material.dart'</span>;</div><div><span style="color: #f97583;">import</span> <span style="color: #9ecbff;">'../widget/soal_23.dart'</span>;</div><br /><div><span style="color: #f97583;">void</span> <span style="color: #b392f0;">main</span>() {</div><div>  <span style="color: #b392f0;">runApp</span>(<span style="color: #f97583;">const</span> <span style="color: #b392f0;">MyApp</span>());</div><div>}</div><br /><div><span style="color: #f97583;">class</span> <span style="color: #b392f0;">MyApp</span> <span style="color: #f97583;">extends</span> <span style="color: #b392f0;">StatelessWidget</span> {</div><div>  <span style="color: #f97583;">const</span> <span style="color: #b392f0;">MyApp</span>({<span style="color: #f97583;">super</span>.<span style="color: #ffab70;">key</span>});</div><br /><div>  <span style="color: #6a737d;">// This widget is the root of your application.</span></div><div>  <span style="color: #ffab70;">@</span>override</div><div>  <span style="color: #b392f0;">Widget</span> <span style="color: #b392f0;">build</span>(<span style="color: #b392f0;">BuildContext</span> <span style="color: #ffab70;">context</span>) {</div><div>    <span style="color: #f97583;">return</span> <span style="color: #b392f0;">MaterialApp</span>(</div><div>      <span style="color: #ffab70;">debugShowCheckedModeBanner</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">false</span>,</div><div>      <span style="color: #ffab70;">theme</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">ThemeData</span>(</div><div>        <span style="color: #ffab70;">primarySwatch</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.blue,</div><div>        <span style="color: #ffab70;">canvasColor</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.white,</div><div>      ),</div><div>      <span style="color: #ffab70;">home</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Soal23</span>(),</div><div>    );</div><div>  }</div><div>}</div><br /></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div><div><b><br /></b></div><div><b>Coding Pada file soal_23.dart</b></div><div><br /></div><div><div style="background-color: #24292e; color: #e1e4e8; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div><div style="line-height: 19px;"><div><span style="color: #f97583;">import</span> <span style="color: #9ecbff;">'package:flutter/material.dart'</span>;</div><br /><div><span style="color: #f97583;">class</span> <span style="color: #b392f0;">Soal23</span> <span style="color: #f97583;">extends</span> <span style="color: #b392f0;">StatelessWidget</span> {</div><div>  <span style="color: #f97583;">const</span> <span style="color: #b392f0;">Soal23</span>({</div><div>    <span style="color: #b392f0;">Key</span><span style="color: #f97583;">?</span> <span style="color: #ffab70;">key</span>,</div><div>  }) <span style="color: #f97583;">:</span> <span style="color: #f97583;">super</span>(<span style="color: #ffab70;">key</span><span style="color: #f97583;">:</span> <span style="color: #ffab70;">key</span>);</div><br /><div>  <span style="color: #ffab70;">@</span>override</div><div>  <span style="color: #b392f0;">Widget</span> <span style="color: #b392f0;">build</span>(<span style="color: #b392f0;">BuildContext</span> <span style="color: #ffab70;">context</span>) {</div><div>    <span style="color: #f97583;">return</span> <span style="color: #b392f0;">Scaffold</span>(</div><div>      <span style="color: #ffab70;">appBar</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">AppBar</span>(</div><div>        <span style="color: #ffab70;">leading</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">FlutterLogo</span>(),</div><div>        <span style="color: #ffab70;">title</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Text</span>(<span style="color: #9ecbff;">"Text Judul"</span>),</div><div>        <span style="color: #ffab70;">centerTitle</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">false</span>,</div><div>        <span style="color: #ffab70;">actions</span><span style="color: #f97583;">:</span> [</div><div>          <span style="color: #b392f0;">IconButton</span>(</div><div>            <span style="color: #ffab70;">onPressed</span><span style="color: #f97583;">:</span> () {</div><div>              <span style="color: #b392f0;">print</span>(<span style="color: #9ecbff;">"KLIK MORE"</span>);</div><div>            },</div><div>            <span style="color: #ffab70;">icon</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Icon</span>(<span style="color: #b392f0;">Icons</span>.more_vert),</div><div>          ),</div><div>        ],</div><div>      ),</div><div>      <span style="color: #ffab70;">body</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Center</span>(</div><div>        <span style="color: #ffab70;">child</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Column</span>(</div><div>          <span style="color: #ffab70;">mainAxisAlignment</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">MainAxisAlignment</span>.<span style="color: #79b8ff;">center</span>,</div><div>          <span style="color: #ffab70;">children</span><span style="color: #f97583;">:</span> [</div><div>            <span style="color: #b392f0;">Stack</span>(</div><div>              <span style="color: #ffab70;">alignment</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Alignment</span>.center,</div><div>              <span style="color: #ffab70;">children</span><span style="color: #f97583;">:</span> [</div><div>                <span style="color: #b392f0;">ClipOval</span>(</div><div>                  <span style="color: #ffab70;">child</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Container</span>(</div><div>                    <span style="color: #ffab70;">width</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">268</span>,</div><div>                    <span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">268</span>,</div><div>                    <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Color</span>(<span style="color: #79b8ff;">0xFF0D47A1</span>),</div><div>                  ),</div><div>                ),</div><div>                <span style="color: #b392f0;">Container</span>(</div><div>                  <span style="color: #ffab70;">width</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">250</span>,</div><div>                  <span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">250</span>,</div><div>                  <span style="color: #ffab70;">decoration</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">BoxDecoration</span>(</div><div>                    <span style="color: #ffab70;">borderRadius</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">BorderRadius</span>.<span style="color: #b392f0;">circular</span>(<span style="color: #79b8ff;">250</span> <span style="color: #f97583;">/</span> <span style="color: #79b8ff;">2</span>),</div><div>                    <span style="color: #ffab70;">border</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Border</span>.<span style="color: #b392f0;">all</span>(</div><div>                      <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.white,</div><div>                      <span style="color: #ffab70;">width</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">5</span>,</div><div>                    ),</div><div>                    <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.grey[<span style="color: #79b8ff;">300</span>],</div><div>                    <span style="color: #ffab70;">image</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">DecorationImage</span>(</div><div>                      <span style="color: #ffab70;">fit</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">BoxFit</span>.<span style="color: #79b8ff;">cover</span>,</div><div>                      <span style="color: #ffab70;">image</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">NetworkImage</span>(<span style="color: #9ecbff;">"https://picsum.photos/500/500"</span>),</div><div>                    ),</div><div>                  ),</div><div>                ),</div><div>              ],</div><div>            ),</div><div>            <span style="color: #b392f0;">SizedBox</span>(<span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">50</span>),</div><div>            <span style="color: #b392f0;">Text</span>(</div><div>              <span style="color: #9ecbff;">"Hello World"</span>,</div><div>              <span style="color: #ffab70;">style</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">TextStyle</span>(</div><div>                <span style="color: #ffab70;">fontSize</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">35</span>,</div><div>                <span style="color: #ffab70;">fontWeight</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">FontWeight</span>.bold,</div><div>                <span style="color: #ffab70;">fontStyle</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">FontStyle</span>.<span style="color: #79b8ff;">italic</span>,</div><div>                <span style="color: #ffab70;">decoration</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">TextDecoration</span>.underline,</div><div>              ),</div><div>            ),</div><div>          ],</div><div>        ),</div><div>      ),</div><div>    );</div><div>  }</div><div>}</div><br /></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div><div><b><br /></b></div><div><b>Hasil Running </b></div><div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidl2GvAFPjsJKQDKqnpiEw9oju4XejX8d2z_inXj0epdkmBjkIcczlhc6JVDyFCd6NYNyGxhCaIeuxynKT5RkOLGv9CnWHAmVntbMRnKhgqexsjbY13dgou91BTEfkYhsSw1DK0fzmETu1GZB4TNLv9k96EkoRsABN34Iarllz-aHxbdN4QvcI07A/s1920/Screenshot%20(47).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidl2GvAFPjsJKQDKqnpiEw9oju4XejX8d2z_inXj0epdkmBjkIcczlhc6JVDyFCd6NYNyGxhCaIeuxynKT5RkOLGv9CnWHAmVntbMRnKhgqexsjbY13dgou91BTEfkYhsSw1DK0fzmETu1GZB4TNLv9k96EkoRsABN34Iarllz-aHxbdN4QvcI07A/w640-h360/Screenshot%20(47).png" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><b><br /></b></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><p><br /></p><div><br /></div><div><br /></div><div><br /></div>

Projek Mobile Computing Dengan Flutter ke 23

Projek Mobile Computing Dengan Flutter ke 23 Coding Pada file main.dart import 'package:flutter/material.dart' ; import '../wi...

Read more »

Projek Mobile Computing Dengan Flutter ke 22

<h2 style="text-align: center;">Projek Mobile Computing Dengan Flutter ke 22</h2><div><div class="separator" style="clear: both; text-align: center;"><div class="separator" style="clear: both;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBCp6J1Ewcf22oQ-T4sElpKDpZx7XoutpYVUrN5hh2j5j-0x6YgvCvu_CtAN6Yfadxg8bh_SNleW5DrZ3z6oL5ipiHd_WrMuEMIpknwT48kM4MLOscGxS0Wga_xYFV42AJaa-jFtEgc8EV8b3HrpF42PEEUmrgApENaKgWYOvoCfYzLndOWFsjSSI/s1920/Screenshot%20(44).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBCp6J1Ewcf22oQ-T4sElpKDpZx7XoutpYVUrN5hh2j5j-0x6YgvCvu_CtAN6Yfadxg8bh_SNleW5DrZ3z6oL5ipiHd_WrMuEMIpknwT48kM4MLOscGxS0Wga_xYFV42AJaa-jFtEgc8EV8b3HrpF42PEEUmrgApENaKgWYOvoCfYzLndOWFsjSSI/s320/Screenshot%20(44).png" width="320" /></a></div><div class="separator" style="clear: both;"><br /></div></div></div></div><div><b>Coding Pada file main.dart</b></div><div><br /></div><div><div style="background-color: #24292e; color: #e1e4e8; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div><div style="line-height: 19px;"><div><span style="color: #f97583;">import</span> <span style="color: #9ecbff;">'package:flutter/material.dart'</span>;</div><div><span style="color: #f97583;">import</span> <span style="color: #9ecbff;">'../widget/soal_22.dart'</span>;</div><br /><div><span style="color: #f97583;">void</span> <span style="color: #b392f0;">main</span>() {</div><div>  <span style="color: #b392f0;">runApp</span>(<span style="color: #f97583;">const</span> <span style="color: #b392f0;">MyApp</span>());</div><div>}</div><br /><div><span style="color: #f97583;">class</span> <span style="color: #b392f0;">MyApp</span> <span style="color: #f97583;">extends</span> <span style="color: #b392f0;">StatelessWidget</span> {</div><div>  <span style="color: #f97583;">const</span> <span style="color: #b392f0;">MyApp</span>({<span style="color: #f97583;">super</span>.<span style="color: #ffab70;">key</span>});</div><br /><div>  <span style="color: #6a737d;">// This widget is the root of your application.</span></div><div>  <span style="color: #ffab70;">@</span>override</div><div>  <span style="color: #b392f0;">Widget</span> <span style="color: #b392f0;">build</span>(<span style="color: #b392f0;">BuildContext</span> <span style="color: #ffab70;">context</span>) {</div><div>    <span style="color: #f97583;">return</span> <span style="color: #b392f0;">MaterialApp</span>(</div><div>      <span style="color: #ffab70;">debugShowCheckedModeBanner</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">false</span>,</div><div>      <span style="color: #ffab70;">theme</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">ThemeData</span>(</div><div>        <span style="color: #ffab70;">primarySwatch</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.blue,</div><div>        <span style="color: #ffab70;">canvasColor</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.white,</div><div>      ),</div><div>      <span style="color: #ffab70;">home</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Soal22</span>(),</div><div>    );</div><div>  }</div><div>}</div><br /></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div><div><b><br /></b></div><div><b>Coding Pada file soal_22.dart</b></div><div><br /></div><div><div style="background-color: #24292e; color: #e1e4e8; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div><div style="line-height: 19px;"><div><span style="color: #f97583;">import</span> <span style="color: #9ecbff;">'package:flutter/material.dart'</span>;</div><br /><div><span style="color: #f97583;">class</span> <span style="color: #b392f0;">Soal22</span> <span style="color: #f97583;">extends</span> <span style="color: #b392f0;">StatelessWidget</span> {</div><div>  <span style="color: #f97583;">const</span> <span style="color: #b392f0;">Soal22</span>({</div><div>    <span style="color: #b392f0;">Key</span><span style="color: #f97583;">?</span> <span style="color: #ffab70;">key</span>,</div><div>  }) <span style="color: #f97583;">:</span> <span style="color: #f97583;">super</span>(<span style="color: #ffab70;">key</span><span style="color: #f97583;">:</span> <span style="color: #ffab70;">key</span>);</div><br /><div>  <span style="color: #ffab70;">@</span>override</div><div>  <span style="color: #b392f0;">Widget</span> <span style="color: #b392f0;">build</span>(<span style="color: #b392f0;">BuildContext</span> <span style="color: #ffab70;">context</span>) {</div><div>    <span style="color: #f97583;">return</span> <span style="color: #b392f0;">Scaffold</span>(</div><div>      <span style="color: #ffab70;">appBar</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">AppBar</span>(</div><div>        <span style="color: #ffab70;">leading</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">FlutterLogo</span>(),</div><div>        <span style="color: #ffab70;">title</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Text</span>(<span style="color: #9ecbff;">"Text Judul"</span>),</div><div>        <span style="color: #ffab70;">centerTitle</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">false</span>,</div><div>        <span style="color: #ffab70;">actions</span><span style="color: #f97583;">:</span> [</div><div>          <span style="color: #b392f0;">IconButton</span>(</div><div>            <span style="color: #ffab70;">onPressed</span><span style="color: #f97583;">:</span> () {</div><div>              <span style="color: #b392f0;">print</span>(<span style="color: #9ecbff;">"KLIK MORE"</span>);</div><div>            },</div><div>            <span style="color: #ffab70;">icon</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Icon</span>(<span style="color: #b392f0;">Icons</span>.more_vert),</div><div>          ),</div><div>        ],</div><div>      ),</div><div>      <span style="color: #ffab70;">body</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Center</span>(</div><div>        <span style="color: #ffab70;">child</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Container</span>(</div><div>          <span style="color: #ffab70;">width</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">250</span>,</div><div>          <span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">250</span>,</div><div>          <span style="color: #ffab70;">decoration</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">BoxDecoration</span>(</div><div>            <span style="color: #ffab70;">borderRadius</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">BorderRadius</span>.<span style="color: #b392f0;">circular</span>(<span style="color: #79b8ff;">250</span> <span style="color: #f97583;">/</span> <span style="color: #79b8ff;">2</span>),</div><div>            <span style="color: #ffab70;">border</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Border</span>.<span style="color: #b392f0;">all</span>(</div><div>              <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Color</span>(<span style="color: #79b8ff;">0xFF0D47A1</span>),</div><div>              <span style="color: #ffab70;">width</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">10</span>,</div><div>            ),</div><div>            <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.grey[<span style="color: #79b8ff;">300</span>],</div><div>            <span style="color: #ffab70;">image</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">DecorationImage</span>(</div><div>              <span style="color: #ffab70;">fit</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">BoxFit</span>.<span style="color: #79b8ff;">cover</span>,</div><div>              <span style="color: #ffab70;">image</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">NetworkImage</span>(<span style="color: #9ecbff;">"https://picsum.photos/500/500"</span>),</div><div>            ),</div><div>          ),</div><div>        ),</div><div>      ),</div><div>    );</div><div>  }</div><div>}</div><br /></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div><div><b><br /></b></div><div><b>Hasil Running </b></div><div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO0k7ExGBuQ1Y7LD42vwffRpjmO03nRxJpmdjohtWTBlxWFiOsQKKdxDbXtXXTA0TmRgp2dBCshwWxvqegRJsNo5513zwF9HRRiab_TZveWpE4vFLqbyfFZB9TwLVdGFUmlW8wgH81qYoM2kuJlAGKXJLAr2hMCL7bFMzgYJPHQ5PSkcglsrxVAZc/s1920/Screenshot%20(45).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO0k7ExGBuQ1Y7LD42vwffRpjmO03nRxJpmdjohtWTBlxWFiOsQKKdxDbXtXXTA0TmRgp2dBCshwWxvqegRJsNo5513zwF9HRRiab_TZveWpE4vFLqbyfFZB9TwLVdGFUmlW8wgH81qYoM2kuJlAGKXJLAr2hMCL7bFMzgYJPHQ5PSkcglsrxVAZc/w640-h360/Screenshot%20(45).png" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><b><br /></b></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><p><br /></p><div><br /></div><div><br /></div><div><br /></div>

Projek Mobile Computing Dengan Flutter ke 22

Projek Mobile Computing Dengan Flutter ke 22 Coding Pada file main.dart import 'package:flutter/material.dart' ; import '../wi...

Read more »

Projek Mobile Computing Dengan Flutter ke 21

<h2 style="text-align: center;">Projek Mobile Computing Dengan Flutter ke 21</h2><div><div class="separator" style="clear: both; text-align: center;"><div class="separator" style="clear: both;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1e4Q4IuVnx236tS5ADOC8TtjeVynHWGXwvBWcqdzYlICGPZDV80702yaVstTENVwIKsFrWTP7WuzVcf-d-oOxHGQnaHHMqTU0hURQtmGDYu2q-M-tGqG0axgRC2QUq83Jm-VRkFajrCmVYhgGOLYGiVOO-UZQTMQkLldB9IlmaFt9MdqODTe9Z_4/s1920/Screenshot%20(42).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1e4Q4IuVnx236tS5ADOC8TtjeVynHWGXwvBWcqdzYlICGPZDV80702yaVstTENVwIKsFrWTP7WuzVcf-d-oOxHGQnaHHMqTU0hURQtmGDYu2q-M-tGqG0axgRC2QUq83Jm-VRkFajrCmVYhgGOLYGiVOO-UZQTMQkLldB9IlmaFt9MdqODTe9Z_4/s320/Screenshot%20(42).png" width="320" /></a></div><div class="separator" style="clear: both;"><br /></div></div></div></div><div><b>Coding Pada file main.dart</b></div><div><br /></div><div><div style="background-color: #24292e; color: #e1e4e8; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div><div style="line-height: 19px;"><div><span style="color: #f97583;">import</span> <span style="color: #9ecbff;">'package:flutter/material.dart'</span>;</div><div><span style="color: #f97583;">import</span> <span style="color: #9ecbff;">'../widget/soal_21.dart'</span>;</div><br /><div><span style="color: #f97583;">void</span> <span style="color: #b392f0;">main</span>() {</div><div>  <span style="color: #b392f0;">runApp</span>(<span style="color: #f97583;">const</span> <span style="color: #b392f0;">MyApp</span>());</div><div>}</div><br /><div><span style="color: #f97583;">class</span> <span style="color: #b392f0;">MyApp</span> <span style="color: #f97583;">extends</span> <span style="color: #b392f0;">StatelessWidget</span> {</div><div>  <span style="color: #f97583;">const</span> <span style="color: #b392f0;">MyApp</span>({<span style="color: #f97583;">super</span>.<span style="color: #ffab70;">key</span>});</div><br /><div>  <span style="color: #6a737d;">// This widget is the root of your application.</span></div><div>  <span style="color: #ffab70;">@</span>override</div><div>  <span style="color: #b392f0;">Widget</span> <span style="color: #b392f0;">build</span>(<span style="color: #b392f0;">BuildContext</span> <span style="color: #ffab70;">context</span>) {</div><div>    <span style="color: #f97583;">return</span> <span style="color: #b392f0;">MaterialApp</span>(</div><div>      <span style="color: #ffab70;">debugShowCheckedModeBanner</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">false</span>,</div><div>      <span style="color: #ffab70;">theme</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">ThemeData</span>(</div><div>        <span style="color: #ffab70;">primarySwatch</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.blue,</div><div>        <span style="color: #ffab70;">canvasColor</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.white,</div><div>      ),</div><div>      <span style="color: #ffab70;">home</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Soal21</span>(),</div><div>    );</div><div>  }</div><div>}</div><br /></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div><div><b><br /></b></div><div><b>Coding Pada file soal_21.dart</b></div><div><br /></div><div><div style="background-color: #24292e; color: #e1e4e8; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div style="line-height: 19px;"><div><div style="line-height: 19px;"><div><span style="color: #f97583;">import</span> <span style="color: #9ecbff;">'package:flutter/material.dart'</span>;</div><br /><div><span style="color: #f97583;">class</span> <span style="color: #b392f0;">Soal21</span> <span style="color: #f97583;">extends</span> <span style="color: #b392f0;">StatelessWidget</span> {</div><div>  <span style="color: #f97583;">const</span> <span style="color: #b392f0;">Soal21</span>({</div><div>    <span style="color: #b392f0;">Key</span><span style="color: #f97583;">?</span> <span style="color: #ffab70;">key</span>,</div><div>  }) <span style="color: #f97583;">:</span> <span style="color: #f97583;">super</span>(<span style="color: #ffab70;">key</span><span style="color: #f97583;">:</span> <span style="color: #ffab70;">key</span>);</div><br /><div>  <span style="color: #ffab70;">@</span>override</div><div>  <span style="color: #b392f0;">Widget</span> <span style="color: #b392f0;">build</span>(<span style="color: #b392f0;">BuildContext</span> <span style="color: #ffab70;">context</span>) {</div><div>    <span style="color: #f97583;">return</span> <span style="color: #b392f0;">Scaffold</span>(</div><div>      <span style="color: #ffab70;">appBar</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">AppBar</span>(</div><div>        <span style="color: #ffab70;">leading</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">FlutterLogo</span>(),</div><div>        <span style="color: #ffab70;">title</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Text</span>(<span style="color: #9ecbff;">"Text Judul"</span>),</div><div>        <span style="color: #ffab70;">centerTitle</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">false</span>,</div><div>        <span style="color: #ffab70;">actions</span><span style="color: #f97583;">:</span> [</div><div>          <span style="color: #b392f0;">IconButton</span>(</div><div>            <span style="color: #ffab70;">onPressed</span><span style="color: #f97583;">:</span> () {</div><div>              <span style="color: #b392f0;">print</span>(<span style="color: #9ecbff;">"KLIK MORE"</span>);</div><div>            },</div><div>            <span style="color: #ffab70;">icon</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Icon</span>(<span style="color: #b392f0;">Icons</span>.more_vert),</div><div>          ),</div><div>        ],</div><div>      ),</div><div>      <span style="color: #ffab70;">body</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Center</span>(</div><div>        <span style="color: #ffab70;">child</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Stack</span>(</div><div>          <span style="color: #ffab70;">alignment</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Alignment</span>.center,</div><div>          <span style="color: #ffab70;">children</span><span style="color: #f97583;">:</span> [</div><div>            <span style="color: #b392f0;">Container</span>(</div><div>              <span style="color: #ffab70;">width</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">250</span>,</div><div>              <span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">250</span>,</div><div>              <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.green,</div><div>            ),</div><div>            <span style="color: #b392f0;">Container</span>(</div><div>              <span style="color: #ffab70;">width</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">225</span>,</div><div>              <span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">225</span>,</div><div>              <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.red,</div><div>            ),</div><div>            <span style="color: #b392f0;">Container</span>(</div><div>              <span style="color: #ffab70;">width</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">200</span>,</div><div>              <span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">200</span>,</div><div>              <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.purple,</div><div>            ),</div><div>            <span style="color: #b392f0;">Container</span>(</div><div>              <span style="color: #ffab70;">width</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">175</span>,</div><div>              <span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">175</span>,</div><div>              <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.amber,</div><div>            ),</div><div>            <span style="color: #b392f0;">Container</span>(</div><div>              <span style="color: #ffab70;">width</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">150</span>,</div><div>              <span style="color: #ffab70;">height</span><span style="color: #f97583;">:</span> <span style="color: #79b8ff;">150</span>,</div><div>              <span style="color: #ffab70;">color</span><span style="color: #f97583;">:</span> <span style="color: #b392f0;">Colors</span>.blue,</div><div>            ),</div><div>          ],</div><div>        ),</div><div>      ),</div><div>    );</div><div>  }</div><div>}</div><br /></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div><div><b><br /></b></div><div><b>Hasil Running </b></div><div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ5B8W5SLdx5SrpljLr6S1t3IKmu4ZEqMoMf326HGBzGU9VaWYTky4y0wej9JG98ieAXYUfHXncE0hrf92k6dT4mBtMNnUJv59rTgC0VhpejyFC9QczW683vysJQQpp-rTK5vip28lKBZQrGXkCUeKxKNjDOGTc_G9_Eaxx3XgoWLUmWzP29jFbNU/s1920/Screenshot%20(43).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ5B8W5SLdx5SrpljLr6S1t3IKmu4ZEqMoMf326HGBzGU9VaWYTky4y0wej9JG98ieAXYUfHXncE0hrf92k6dT4mBtMNnUJv59rTgC0VhpejyFC9QczW683vysJQQpp-rTK5vip28lKBZQrGXkCUeKxKNjDOGTc_G9_Eaxx3XgoWLUmWzP29jFbNU/w640-h360/Screenshot%20(43).png" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><b><br /></b></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><p><br /></p><div><br /></div><div><br /></div><div><br /></div>

Projek Mobile Computing Dengan Flutter ke 21

Projek Mobile Computing Dengan Flutter ke 21 Coding Pada file main.dart import 'package:flutter/material.dart' ; import '../wi...

Read more »