tag:blogger.com,1999:blog-13683160953675964932024-03-19T09:42:21.601+05:30Android App Development for Phones/TabletsIts all about , Latest Android App Development for Phones/Tablets, showing Step by step development Tutorials for beginners, Professionals android developers,Best Practices,
Latest android code patterns, UI design PatternsPratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.comBlogger70125tag:blogger.com,1999:blog-1368316095367596493.post-20522212966361114992023-07-28T18:32:00.003+05:302024-02-05T16:48:02.943+05:30REACT NATIVE ImageBackground Example<p> Day-3</p><div style="background-color: #212121; color: #bdbdbd; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 17px; line-height: 26px; white-space: pre;"><div><span style="color: #ce93d8;">import</span> <span style="color: #81d4fa;">React</span>, {<span style="color: #81d4fa;">Component</span>} <span style="color: #ce93d8;">from</span> <span style="color: #ffab91;">'react'</span>;</div><div><span style="color: #ce93d8;">import</span> {</div><div> <span style="color: #81d4fa;">View</span>,</div><div> <span style="color: #81d4fa;">SafeAreaView</span>,</div><div> <span style="color: #81d4fa;">TouchableOpacity</span>,</div><div> <span style="color: #81d4fa;">ImageBackground</span>,</div><div> <span style="color: #81d4fa;">Text</span>,</div><div> <span style="color: #81d4fa;">StyleSheet</span>,</div><div>} <span style="color: #ce93d8;">from</span> <span style="color: #ffab91;">'react-native'</span>;</div><br /><div><span style="color: #689f38;">// create a component</span></div><div><span style="color: #2196f3;">const</span> <span style="color: #f0f4c3;">IntroScreen</span> <span style="color: #e0e0e0;">=</span> () <span style="color: #2196f3;">=></span> {</div><div> <span style="color: #ce93d8;">return</span> (</div><div> <span style="color: #757575;"><</span><span style="color: #4db6ac;">View</span> <span style="color: #81d4fa;">style</span><span style="color: #e0e0e0;">=</span><span style="color: #2196f3;">{</span><span style="color: #4fc3f7;">styles</span><span style="color: #e0e0e0;">.</span><span style="color: #81d4fa;">container</span><span style="color: #2196f3;">}</span><span style="color: #757575;">></span></div><br /><div> <span style="color: #2196f3;">{</span><span style="color: #689f38;">/* Background view */</span><span style="color: #2196f3;">}</span></div><div> <span style="color: #757575;"><</span><span style="color: #4db6ac;">ImageBackground</span></div><div> <span style="color: #81d4fa;">resizeMode</span><span style="color: #e0e0e0;">=</span><span style="color: #ffab91;">"cover"</span></div><div> <span style="color: #81d4fa;">style</span><span style="color: #e0e0e0;">=</span><span style="color: #2196f3;">{</span><span style="color: #4fc3f7;">styles</span><span style="color: #e0e0e0;">.</span><span style="color: #81d4fa;">imageContainer</span><span style="color: #2196f3;">}</span></div><div> <span style="color: #81d4fa;">source</span><span style="color: #e0e0e0;">=</span><span style="color: #2196f3;">{</span><span style="color: #f0f4c3;">require</span><span style="color: #e0e0e0;">(</span><span style="color: #ffab91;">'../../assets/bg_image_1.jpeg'</span><span style="color: #e0e0e0;">)</span><span style="color: #2196f3;">}</span><span style="color: #757575;">></span></div><br /><div> <span style="color: #757575;"><</span><span style="color: #4db6ac;">View</span> <span style="color: #81d4fa;">style</span><span style="color: #e0e0e0;">=</span><span style="color: #2196f3;">{</span><span style="color: #e0e0e0;">{</span><span style="color: #81d4fa;">flex</span><span style="color: #81d4fa;">:</span><span style="color: #e0e0e0;"> </span><span style="color: #a5d6a7;">1</span><span style="color: #e0e0e0;">, </span><span style="color: #81d4fa;">backgroundColor</span><span style="color: #81d4fa;">:</span><span style="color: #e0e0e0;"> </span><span style="color: #ffab91;">'black'</span><span style="color: #e0e0e0;">, </span><span style="color: #81d4fa;">opacity</span><span style="color: #81d4fa;">:</span><span style="color: #e0e0e0;"> </span><span style="color: #a5d6a7;">0.3</span><span style="color: #e0e0e0;">}</span><span style="color: #2196f3;">}</span> <span style="color: #757575;">/></span></div><br /><div> <span style="color: #757575;"></</span><span style="color: #4db6ac;">ImageBackground</span><span style="color: #757575;">></span></div><br /><div> <span style="color: #2196f3;">{</span><span style="color: #689f38;">/* Front view */</span><span style="color: #2196f3;">}</span></div><div> <span style="color: #757575;"><</span><span style="color: #4db6ac;">View</span> <span style="color: #81d4fa;">style</span><span style="color: #e0e0e0;">=</span><span style="color: #2196f3;">{</span><span style="color: #4fc3f7;">styles</span><span style="color: #e0e0e0;">.</span><span style="color: #81d4fa;">bottomContainer</span><span style="color: #2196f3;">}</span><span style="color: #757575;">></span></div><div> <span style="color: #757575;"><</span><span style="color: #4db6ac;">View</span><span style="color: #757575;">></span></div><div> </div><div> <span style="color: #757575;"><</span><span style="color: #4db6ac;">Text</span> <span style="color: #81d4fa;">style</span><span style="color: #e0e0e0;">=</span><span style="color: #2196f3;">{</span><span style="color: #4fc3f7;">styles</span><span style="color: #e0e0e0;">.</span><span style="color: #81d4fa;">findText</span><span style="color: #2196f3;">}</span><span style="color: #757575;">></span>Find your Favourite food ...<span style="color: #757575;"></</span><span style="color: #4db6ac;">Text</span><span style="color: #757575;">></span></div><br /><div> <span style="color: #757575;"><</span><span style="color: #4db6ac;">TouchableOpacity</span> <span style="color: #81d4fa;">style</span><span style="color: #e0e0e0;">=</span><span style="color: #2196f3;">{</span><span style="color: #4fc3f7;">styles</span><span style="color: #e0e0e0;">.</span><span style="color: #81d4fa;">buttonExplore</span><span style="color: #2196f3;">}</span><span style="color: #757575;">></span></div><br /><div> <span style="color: #757575;"><</span><span style="color: #4db6ac;">Text</span> <span style="color: #81d4fa;">style</span><span style="color: #e0e0e0;">=</span><span style="color: #2196f3;">{</span><span style="color: #4fc3f7;">styles</span><span style="color: #e0e0e0;">.</span><span style="color: #81d4fa;">explore</span><span style="color: #2196f3;">}</span><span style="color: #757575;">></span>Explore Now<span style="color: #757575;"></</span><span style="color: #4db6ac;">Text</span><span style="color: #757575;">></span></div><br /><div> <span style="color: #757575;"></</span><span style="color: #4db6ac;">TouchableOpacity</span><span style="color: #757575;">></span></div><div> <span style="color: #757575;"></</span><span style="color: #4db6ac;">View</span><span style="color: #757575;">></span></div><div> <span style="color: #757575;"></</span><span style="color: #4db6ac;">View</span><span style="color: #757575;">></span></div><div> <span style="color: #757575;"></</span><span style="color: #4db6ac;">View</span><span style="color: #757575;">></span></div><div> );</div><div>};</div><br /><div><span style="color: #689f38;">// define your styles</span></div><div><span style="color: #2196f3;">const</span> <span style="color: #4fc3f7;">styles</span> <span style="color: #e0e0e0;">=</span> <span style="color: #4db6ac;">StyleSheet</span>.<span style="color: #f0f4c3;">create</span>({</div><div> <span style="color: #81d4fa;">container</span><span style="color: #81d4fa;">:</span> {</div><div> <span style="color: #81d4fa;">flex</span><span style="color: #81d4fa;">:</span> <span style="color: #a5d6a7;">1</span>,</div><div> <span style="color: #81d4fa;">justifyContent</span><span style="color: #81d4fa;">:</span> <span style="color: #ffab91;">'center'</span>,</div><div> <span style="color: #81d4fa;">alignItems</span><span style="color: #81d4fa;">:</span> <span style="color: #ffab91;">'center'</span>,</div><div> <span style="color: #81d4fa;">backgroundColor</span><span style="color: #81d4fa;">:</span> <span style="color: #ffab91;">'#2c3e50'</span>,</div><div> },</div><br /><div> <span style="color: #81d4fa;">imageContainer</span><span style="color: #81d4fa;">:</span> {</div><div> <span style="color: #81d4fa;">flex</span><span style="color: #81d4fa;">:</span> <span style="color: #a5d6a7;">1</span>,</div><div> <span style="color: #81d4fa;">width</span><span style="color: #81d4fa;">:</span> <span style="color: #ffab91;">'100%'</span>,</div><div> <span style="color: #81d4fa;">height</span><span style="color: #81d4fa;">:</span> <span style="color: #ffab91;">'100%'</span>,</div><div> },</div><br /><div> <span style="color: #81d4fa;">explore</span><span style="color: #81d4fa;">:</span> {</div><div> <span style="color: #81d4fa;">color</span><span style="color: #81d4fa;">:</span> <span style="color: #ffab91;">'black'</span>,</div><div> <span style="color: #81d4fa;">fontSize</span><span style="color: #81d4fa;">:</span> <span style="color: #a5d6a7;">20</span>,</div><div> <span style="color: #81d4fa;">fontWeight</span><span style="color: #81d4fa;">:</span> <span style="color: #ffab91;">'700'</span>,</div><div> },</div><br /><div> <span style="color: #81d4fa;">buttonExplore</span><span style="color: #81d4fa;">:</span> {</div><div> <span style="color: #81d4fa;">padding</span><span style="color: #81d4fa;">:</span> <span style="color: #a5d6a7;">8</span>,</div><div> <span style="color: #81d4fa;">backgroundColor</span><span style="color: #81d4fa;">:</span> <span style="color: #ffab91;">'white'</span>,</div><div> <span style="color: #81d4fa;">borderRadius</span><span style="color: #81d4fa;">:</span> <span style="color: #a5d6a7;">8</span>,</div><div> <span style="color: #81d4fa;">alignItems</span><span style="color: #81d4fa;">:</span> <span style="color: #ffab91;">'center'</span>,</div><div> <span style="color: #81d4fa;">marginTop</span><span style="color: #81d4fa;">:</span> <span style="color: #a5d6a7;">10</span>,</div><div> },</div><br /><div> <span style="color: #81d4fa;">findText</span><span style="color: #81d4fa;">:</span> {</div><div> <span style="color: #81d4fa;">color</span><span style="color: #81d4fa;">:</span> <span style="color: #ffab91;">'white'</span>,</div><div> <span style="color: #81d4fa;">fontWeight</span><span style="color: #81d4fa;">:</span> <span style="color: #ffab91;">'800'</span>,</div><div> <span style="color: #81d4fa;">fontSize</span><span style="color: #81d4fa;">:</span> <span style="color: #a5d6a7;">40</span>,</div><div> <span style="color: #81d4fa;">textTransform</span><span style="color: #81d4fa;">:</span> <span style="color: #ffab91;">'capitalize'</span>,</div><div> },</div><br /><div> <span style="color: #81d4fa;">bottomContainer</span><span style="color: #81d4fa;">:</span> {</div><div> <span style="color: #81d4fa;">position</span><span style="color: #81d4fa;">:</span> <span style="color: #ffab91;">'absolute'</span>,</div><div> <span style="color: #81d4fa;">height</span><span style="color: #81d4fa;">:</span> <span style="color: #ffab91;">'100%'</span>,</div><div> <span style="color: #81d4fa;">zIndex</span><span style="color: #81d4fa;">:</span> <span style="color: #a5d6a7;">2</span>,</div><div> <span style="color: #81d4fa;">width</span><span style="color: #81d4fa;">:</span> <span style="color: #ffab91;">'100%'</span>,</div><div> <span style="color: #81d4fa;">justifyContent</span><span style="color: #81d4fa;">:</span> <span style="color: #ffab91;">'flex-end'</span>,</div><div> <span style="color: #81d4fa;">paddingHorizontal</span><span style="color: #81d4fa;">:</span> <span style="color: #a5d6a7;">20</span>,</div><div> <span style="color: #81d4fa;">paddingBottom</span><span style="color: #81d4fa;">:</span> <span style="color: #a5d6a7;">50</span>,</div><div> },</div><div>});</div><br /><div><span style="color: #689f38;">//make this component available to the app</span></div><div><span style="color: #ce93d8;">export</span> <span style="color: #ce93d8;">default</span> <span style="color: #f0f4c3;">IntroScreen</span>;</div><br /></div><h3 style="text-align: left;">Screenshots</h3><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/AVvXsEg0KUILjSGqIMVqqDpgqBMjz7VRQ_jsfElgbZmdRCVQVILr9GjWuzOxb7TJQdcM_KKIjtEFN-V8agou_9OV2w8HWozRpAXFgS_a02eFg7TP0a4Fb_oDLZDSUjTHmC8Ipg6vX66MKGwVcYY3s8fIbYn7UzcHvm0_JDyizWSyfJSrZzUyCzZ9KHLYbvMdPgh4/s2796/Simulator%20Screen%20Shot%20-%20iPhone%2014%20Pro%20Max%20-%202023-07-28%20at%2018.26.27.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="2796" data-original-width="1290" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0KUILjSGqIMVqqDpgqBMjz7VRQ_jsfElgbZmdRCVQVILr9GjWuzOxb7TJQdcM_KKIjtEFN-V8agou_9OV2w8HWozRpAXFgS_a02eFg7TP0a4Fb_oDLZDSUjTHmC8Ipg6vX66MKGwVcYY3s8fIbYn7UzcHvm0_JDyizWSyfJSrZzUyCzZ9KHLYbvMdPgh4/w296-h640/Simulator%20Screen%20Shot%20-%20iPhone%2014%20Pro%20Max%20-%202023-07-28%20at%2018.26.27.png" width="296" /></a></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/AVvXsEjlsPQKI9n-fXeRaGmPO2pDIkBbvdUoOlKVotaRWYQa87UkKesAnEcg1-nYjS6YjTSa2xc4xjzMqJk72RoW8JQZ2QvLIKzakqUWoGux7_T1W49eXEPwpq89KI9DZ13pIA6N6oGtK862pRmTkOidgJvCyJeyi0xwsUbrwKBfKVKQ3s-YseKQICDQbJjKaudh/s2400/Screenshot_1690549278.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="2400" data-original-width="1080" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlsPQKI9n-fXeRaGmPO2pDIkBbvdUoOlKVotaRWYQa87UkKesAnEcg1-nYjS6YjTSa2xc4xjzMqJk72RoW8JQZ2QvLIKzakqUWoGux7_T1W49eXEPwpq89KI9DZ13pIA6N6oGtK862pRmTkOidgJvCyJeyi0xwsUbrwKBfKVKQ3s-YseKQICDQbJjKaudh/w288-h640/Screenshot_1690549278.png" width="288" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><p><br /></p><p><br /></p>Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com0tag:blogger.com,1999:blog-1368316095367596493.post-89071192344447382102023-07-28T16:20:00.004+05:302024-02-05T16:47:35.046+05:30REACT NATIVE - Flat List using axios and useEffect and api integration<p> Day 3 </p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 17px; line-height: 26px; white-space: pre;"><div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">React</span>, {<span style="color: #9cdcfe;">useState</span>, <span style="color: #9cdcfe;">useEffect</span>} <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'react'</span>;</div><div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">axios</span> <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'axios'</span>;</div><br /><div><span style="color: #c586c0;">import</span> {</div><div> <span style="color: #9cdcfe;">View</span>,</div><div> <span style="color: #9cdcfe;">Image</span>,</div><div> <span style="color: #9cdcfe;">FlatList</span>,</div><div> <span style="color: #9cdcfe;">StyleSheet</span>,</div><div> <span style="color: #9cdcfe;">SafeAreaView</span>,</div><div> <span style="color: #9cdcfe;">Text</span>,</div><div> <span style="color: #9cdcfe;">StatusBar</span>,</div><div> <span style="color: #9cdcfe;">ActivityIndicator</span>,</div><div> <span style="color: #9cdcfe;">Platform</span>,</div><div>} <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'react-native'</span>;</div><br /><div><span style="color: #6a9955;">// create a component</span></div><div><span style="color: #569cd6;">const</span> <span style="color: #dcdcaa;">ProductsGridView</span> = () <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #569cd6;">const</span> [<span style="color: #4fc1ff;">data</span>, <span style="color: #dcdcaa;">setData</span>] = <span style="color: #dcdcaa;">useState</span>([]);</div><div> <span style="color: #569cd6;">const</span> [<span style="color: #4fc1ff;">loading</span>, <span style="color: #dcdcaa;">setLoading</span>] = <span style="color: #dcdcaa;">useState</span>(<span style="color: #569cd6;">false</span>);</div><br /><div> <span style="color: #dcdcaa;">useEffect</span>(() <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #4fc1ff;">axios</span></div><div> .<span style="color: #dcdcaa;">get</span>(<span style="color: #ce9178;">'https://fakestoreapi.com/products'</span>)</div><div> .<span style="color: #dcdcaa;">then</span>(<span style="color: #9cdcfe;">res</span> <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #dcdcaa;">setData</span>(<span style="color: #9cdcfe;">res</span>.<span style="color: #9cdcfe;">data</span>);</div><div> <span style="color: #dcdcaa;">setLoading</span>(<span style="color: #569cd6;">true</span>);</div><div> })</div><div> .<span style="color: #dcdcaa;">catch</span>(<span style="color: #9cdcfe;">err</span> <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #dcdcaa;">setLoading</span>(<span style="color: #569cd6;">true</span>);</div><div> });</div><div> }, []);</div><br /><div> <span style="color: #c586c0;">if</span> (<span style="color: #4fc1ff;">loading</span>) {</div><div> <span style="color: #c586c0;">return</span> (</div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">SafeAreaView</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">container</span><span style="color: #569cd6;">}</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">Text</span></div><div> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span>{</div><div> <span style="color: #9cdcfe;">fontSize</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">18</span>,</div><div> <span style="color: #9cdcfe;">padding</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">10</span>,</div><div> <span style="color: #9cdcfe;">justifyContent</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'center'</span>,</div><div> <span style="color: #9cdcfe;">alignItems</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'center'</span>,</div><div> }<span style="color: #569cd6;">}</span><span style="color: grey;">></span></div><div> Products List</div><div> <span style="color: grey;"></</span><span style="color: #4ec9b0;">Text</span><span style="color: grey;">></span></div><br /><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">FlatList</span></div><div> <span style="color: #9cdcfe;">data</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">data</span><span style="color: #569cd6;">}</span></div><div> <span style="color: #9cdcfe;">renderItem</span>=<span style="color: #569cd6;">{</span>({<span style="color: #9cdcfe;">item</span>}) <span style="color: #569cd6;">=></span> (</div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">View</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">card</span><span style="color: #569cd6;">}</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">Image</span></div><div> <span style="color: #9cdcfe;">resizeMode</span>=<span style="color: #ce9178;">"contain"</span></div><div> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">imageThumbnail</span><span style="color: #569cd6;">}</span></div><div> <span style="color: #9cdcfe;">source</span>=<span style="color: #569cd6;">{</span>{<span style="color: #9cdcfe;">uri</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">item</span>.<span style="color: #9cdcfe;">image</span>}<span style="color: #569cd6;">}</span></div><div> <span style="color: grey;">/></span></div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">Text</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">title</span><span style="color: #569cd6;">}</span><span style="color: grey;">></span><span style="color: #569cd6;">{</span><span style="color: #9cdcfe;">item</span>.<span style="color: #9cdcfe;">title</span><span style="color: #569cd6;">}</span><span style="color: grey;"></</span><span style="color: #4ec9b0;">Text</span><span style="color: grey;">></span></div><br /><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">Text</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">price</span><span style="color: #569cd6;">}</span><span style="color: grey;">></span><span style="color: #569cd6;">{</span><span style="color: #ce9178;">'$ '</span> + <span style="color: #9cdcfe;">item</span>.<span style="color: #9cdcfe;">price</span><span style="color: #569cd6;">}</span><span style="color: grey;"></</span><span style="color: #4ec9b0;">Text</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #4ec9b0;">View</span><span style="color: grey;">></span></div><div> )<span style="color: #569cd6;">}</span></div><div> <span style="color: #6a9955;">//Setting the number of column</span></div><div> <span style="color: #9cdcfe;">numColumns</span>=<span style="color: #569cd6;">{</span><span style="color: #b5cea8;">2</span><span style="color: #569cd6;">}</span></div><div> <span style="color: #9cdcfe;">keyExtractor</span>=<span style="color: #569cd6;">{</span>(<span style="color: #9cdcfe;">item</span>, <span style="color: #9cdcfe;">index</span>) <span style="color: #569cd6;">=></span> <span style="color: #9cdcfe;">index</span>.<span style="color: #dcdcaa;">toString</span>()<span style="color: #569cd6;">}</span></div><div> <span style="color: grey;">/></span></div><div> <span style="color: grey;"></</span><span style="color: #4ec9b0;">SafeAreaView</span><span style="color: grey;">></span></div><div> );</div><div> } <span style="color: #c586c0;">else</span> {</div><div> <span style="color: #c586c0;">return</span> (</div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">SafeAreaView</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">container</span><span style="color: #569cd6;">}</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">ActivityIndicator</span> <span style="color: #9cdcfe;">size</span>=<span style="color: #ce9178;">"large"</span> <span style="color: grey;">/></span></div><div> <span style="color: grey;"></</span><span style="color: #4ec9b0;">SafeAreaView</span><span style="color: grey;">></span></div><div> );</div><div> }</div><div>};</div><br /><div><span style="color: #6a9955;">// define your styles</span></div><div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">styles</span> = <span style="color: #4ec9b0;">StyleSheet</span>.<span style="color: #dcdcaa;">create</span>({</div><div> <span style="color: #9cdcfe;">container</span><span style="color: #9cdcfe;">:</span> {</div><div> <span style="color: #9cdcfe;">flex</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">1</span>,</div><div> <span style="color: #9cdcfe;">marginTop</span><span style="color: #9cdcfe;">:</span> <span style="color: #4ec9b0;">StatusBar</span>.<span style="color: #9cdcfe;">marginTop</span> || <span style="color: #b5cea8;">0</span>,</div><div> },</div><br /><div> <span style="color: #9cdcfe;">title</span><span style="color: #9cdcfe;">:</span> {</div><div> <span style="color: #9cdcfe;">fontSize</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">16</span>,</div><div> <span style="color: #9cdcfe;">marginTop</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">10</span>,</div><div> },</div><br /><div> <span style="color: #9cdcfe;">price</span><span style="color: #9cdcfe;">:</span> {</div><div> <span style="color: #9cdcfe;">fontWeight</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'600'</span>,</div><div> <span style="color: #9cdcfe;">fontSize</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">17</span>,</div><div> <span style="color: #9cdcfe;">marginTop</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">10</span>,</div><div> },</div><br /><div> <span style="color: #9cdcfe;">card</span><span style="color: #9cdcfe;">:</span> {</div><div> <span style="color: #9cdcfe;">flex</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">1</span>,</div><div> <span style="color: #9cdcfe;">elevation</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">3</span>,</div><div> <span style="color: #9cdcfe;">margin</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">5</span>,</div><div> <span style="color: #9cdcfe;">padding</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">10</span>,</div><div> <span style="color: #9cdcfe;">backgroundColor</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'white'</span>,</div><div> <span style="color: #9cdcfe;">borderRadius</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">1</span>,</div><div> <span style="color: #9cdcfe;">elevation</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">2</span>,</div><div> <span style="color: #9cdcfe;">shadowColor</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'grey'</span>,</div><div> <span style="color: #9cdcfe;">shadowOpacity</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">0.25</span>,</div><div> <span style="color: #9cdcfe;">shadowOffset</span><span style="color: #9cdcfe;">:</span> {<span style="color: #9cdcfe;">width</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">0</span>, <span style="color: #9cdcfe;">height</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">2</span>},</div><div> <span style="color: #9cdcfe;">shadowRadius</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">8</span>,</div><div> <span style="color: #9cdcfe;">overflow</span><span style="color: #9cdcfe;">:</span> <span style="color: #4ec9b0;">Platform</span>.<span style="color: #9cdcfe;">OS</span> === <span style="color: #ce9178;">'android'</span> ? <span style="color: #ce9178;">'hidden'</span> : <span style="color: #ce9178;">'visible'</span>,</div><div> },</div><div> <span style="color: #9cdcfe;">imageThumbnail</span><span style="color: #9cdcfe;">:</span> {</div><div> <span style="color: #9cdcfe;">justifyContent</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'center'</span>,</div><div> <span style="color: #9cdcfe;">alignItems</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'center'</span>,</div><div> <span style="color: #9cdcfe;">height</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">150</span>,</div><div> <span style="color: #9cdcfe;">padding</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">2</span>,</div><div> <span style="color: #9cdcfe;">margin</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">5</span>,</div><div> },</div><div>});</div><br /><div><span style="color: #6a9955;">//make this component available to the app</span></div><div><span style="color: #c586c0;">export</span> <span style="color: #c586c0;">default</span> <span style="color: #dcdcaa;">ProductsGridView</span>;</div><br /></div><p><br /></p><h3 style="text-align: left;">Screenshot</h3><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj3yhCrr_wq9NOwxSfH9oMWmvPCVkHy5TuD2lIm1npMTpWVCix9oKJXhN5a_AwnLj1dfcsij2lEn0AIWh3NBjfIHgfHFo5CdGXvp-72YQE-FVZ1RM_VayadOp1DIZCGpm8MNsTppfVvRvChoXdc9Hf9o8vP0oL9YizpPgBP8Dzai5k59vSuCdSN5uhpKT-/s2796/Simulator%20Screen%20Shot%20-%20iPhone%2014%20Pro%20Max%20-%202023-07-28%20at%2016.11.22.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="2796" data-original-width="1290" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj3yhCrr_wq9NOwxSfH9oMWmvPCVkHy5TuD2lIm1npMTpWVCix9oKJXhN5a_AwnLj1dfcsij2lEn0AIWh3NBjfIHgfHFo5CdGXvp-72YQE-FVZ1RM_VayadOp1DIZCGpm8MNsTppfVvRvChoXdc9Hf9o8vP0oL9YizpPgBP8Dzai5k59vSuCdSN5uhpKT-/w296-h640/Simulator%20Screen%20Shot%20-%20iPhone%2014%20Pro%20Max%20-%202023-07-28%20at%2016.11.22.png" width="296" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimBS67-KKPzlbf5XBUoYYhdzBmYOyH1SKMy9ZiaElgVeMKz_w3AgUrgGzBlnGAwUqp_fg-lXTykg4_xud8fbjtbSEJQBWqaA39RSDs9l1Qn3tX56ufWY1r32ZDN11HPVDQvsMddjH4S3W2ikCts3tBqjJXlfXWevrEDmFWtZMvhqrSES6SPHqkt5Er80N3/s2400/Screenshot_1690541263.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="2400" data-original-width="1080" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimBS67-KKPzlbf5XBUoYYhdzBmYOyH1SKMy9ZiaElgVeMKz_w3AgUrgGzBlnGAwUqp_fg-lXTykg4_xud8fbjtbSEJQBWqaA39RSDs9l1Qn3tX56ufWY1r32ZDN11HPVDQvsMddjH4S3W2ikCts3tBqjJXlfXWevrEDmFWtZMvhqrSES6SPHqkt5Er80N3/w288-h640/Screenshot_1690541263.png" width="288" /></a></div><br /><div><br /></div><p><br /></p><p><br /></p>Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com0tag:blogger.com,1999:blog-1368316095367596493.post-39994288792487566292023-07-28T02:25:00.001+05:302024-02-05T16:48:27.097+05:30REACT NATIVE - Simple Flat List with Grid<p> <span style="background-color: #1e1e1e; color: #6a9955; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 17px; white-space: pre;">//import liraries</span></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 17px; line-height: 26px; white-space: pre;"><div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">React</span>, {<span style="color: #9cdcfe;">Component</span>} <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'react'</span>;</div><div><span style="color: #c586c0;">import</span> {<span style="color: #9cdcfe;">View</span>, <span style="color: #9cdcfe;">Image</span>,<span style="color: #9cdcfe;">FlatList</span>, <span style="color: #9cdcfe;">StyleSheet</span>, <span style="color: #9cdcfe;">SafeAreaView</span>,<span style="color: #9cdcfe;">StatusBar</span>} <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'react-native'</span>;</div><br /><br /><div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">DATA</span>=</div><div>[{<span style="color: #ce9178;">"id"</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">"4eh"</span>,<span style="color: #ce9178;">"url"</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">"https://cdn2.thecatapi.com/images/4eh.jpg"</span>,<span style="color: #ce9178;">"width"</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">720</span>,<span style="color: #ce9178;">"height"</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">540</span>},{<span style="color: #ce9178;">"id"</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">"7i1"</span>,<span style="color: #ce9178;">"url"</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">"https://cdn2.thecatapi.com/images/7i1.jpg"</span>,<span style="color: #ce9178;">"width"</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">600</span>,<span style="color: #ce9178;">"height"</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">900</span>},{<span style="color: #ce9178;">"id"</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">"9oo"</span>,<span style="color: #ce9178;">"url"</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">"https://cdn2.thecatapi.com/images/9oo.jpg"</span>,<span style="color: #ce9178;">"width"</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">537</span>,<span style="color: #ce9178;">"height"</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">720</span>},{<span style="color: #ce9178;">"id"</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">"9ss"</span>,<span style="color: #ce9178;">"url"</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">"https://cdn2.thecatapi.com/images/9ss.jpg"</span>,<span style="color: #ce9178;">"width"</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">600</span>,<span style="color: #ce9178;">"height"</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">897</span>},{<span style="color: #ce9178;">"id"</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">"bi2"</span>,<span style="color: #ce9178;">"url"</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">"https://cdn2.thecatapi.com/images/bi2.jpg"</span>,<span style="color: #ce9178;">"width"</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">500</span>,<span style="color: #ce9178;">"height"</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">666</span>},{<span style="color: #ce9178;">"id"</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">"bjr"</span>,<span style="color: #ce9178;">"url"</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">"https://cdn2.thecatapi.com/images/bjr.jpg"</span>,<span style="color: #ce9178;">"width"</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">375</span>,<span style="color: #ce9178;">"height"</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">500</span>},{<span style="color: #ce9178;">"id"</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">"chc"</span>,<span style="color: #ce9178;">"url"</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">"https://cdn2.thecatapi.com/images/chc.gif"</span>,<span style="color: #ce9178;">"width"</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">500</span>,<span style="color: #ce9178;">"height"</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">417</span>},{<span style="color: #ce9178;">"id"</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">"ddp"</span>,<span style="color: #ce9178;">"url"</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">"https://cdn2.thecatapi.com/images/ddp.jpg"</span>,<span style="color: #ce9178;">"width"</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">612</span>,<span style="color: #ce9178;">"height"</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">612</span>},{<span style="color: #ce9178;">"id"</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">"MTkwMTQ2OQ"</span>,<span style="color: #ce9178;">"url"</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">"https://cdn2.thecatapi.com/images/MTkwMTQ2OQ.jpg"</span>,<span style="color: #ce9178;">"width"</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">819</span>,<span style="color: #ce9178;">"height"</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">1024</span>},{<span style="color: #ce9178;">"id"</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">"MjAyMTk2MQ"</span>,<span style="color: #ce9178;">"url"</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">"https://cdn2.thecatapi.com/images/MjAyMTk2MQ.jpg"</span>,<span style="color: #ce9178;">"width"</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">1200</span>,<span style="color: #ce9178;">"height"</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">800</span>}];</div><br /><br /><div><span style="color: #6a9955;">// create a component</span></div><div><span style="color: #569cd6;">const</span> <span style="color: #dcdcaa;">ImageFlatList</span> = () <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #6a9955;">//const [dataSource, setDataSource] = useState(DATA);</span></div><div> </div><br /><div> <span style="color: #c586c0;">return</span> (</div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">SafeAreaView</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">container</span><span style="color: #569cd6;">}</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">FlatList</span></div><div> <span style="color: #9cdcfe;">data</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">DATA</span><span style="color: #569cd6;">}</span></div><div> <span style="color: #9cdcfe;">renderItem</span>=<span style="color: #569cd6;">{</span>({<span style="color: #9cdcfe;">item</span>}) <span style="color: #569cd6;">=></span> (</div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">View</span></div><div> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span>{</div><div> <span style="color: #9cdcfe;">flex</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">1</span>,</div><div> <span style="color: #9cdcfe;">flexDirection</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'column'</span>,</div><div> <span style="color: #9cdcfe;">margin</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">1</span>,</div><div> }<span style="color: #569cd6;">}</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">Image</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">imageThumbnail</span><span style="color: #569cd6;">}</span> <span style="color: #9cdcfe;">source</span>=<span style="color: #569cd6;">{</span>{<span style="color: #9cdcfe;">uri</span><span style="color: #9cdcfe;">:</span> <span style="color: #9cdcfe;">item</span>.<span style="color: #9cdcfe;">url</span>}<span style="color: #569cd6;">}</span> <span style="color: grey;">/></span></div><div> <span style="color: grey;"></</span><span style="color: #4ec9b0;">View</span><span style="color: grey;">></span></div><div> )<span style="color: #569cd6;">}</span></div><div> <span style="color: #6a9955;">//Setting the number of column</span></div><div> <span style="color: #9cdcfe;">numColumns</span>=<span style="color: #569cd6;">{</span><span style="color: #b5cea8;">2</span><span style="color: #569cd6;">}</span></div><div> <span style="color: #9cdcfe;">keyExtractor</span>=<span style="color: #569cd6;">{</span>(<span style="color: #9cdcfe;">item</span>, <span style="color: #9cdcfe;">index</span>) <span style="color: #569cd6;">=></span> <span style="color: #9cdcfe;">index</span>.<span style="color: #dcdcaa;">toString</span>()<span style="color: #569cd6;">}</span></div><div> <span style="color: grey;">/></span></div><div> <span style="color: grey;"></</span><span style="color: #4ec9b0;">SafeAreaView</span><span style="color: grey;">></span></div><div> );</div><div>};</div><br /><div><span style="color: #6a9955;">// define your styles</span></div><div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">styles</span> = <span style="color: #4ec9b0;">StyleSheet</span>.<span style="color: #dcdcaa;">create</span>({</div><div> <span style="color: #9cdcfe;">container</span><span style="color: #9cdcfe;">:</span> {</div><div> <span style="color: #9cdcfe;">flex</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">1</span>,</div><div> <span style="color: #9cdcfe;">marginTop</span><span style="color: #9cdcfe;">:</span> <span style="color: #4ec9b0;">StatusBar</span>.<span style="color: #9cdcfe;">marginTop</span> || <span style="color: #b5cea8;">0</span>,</div><div> },</div><div> <span style="color: #9cdcfe;">imageThumbnail</span><span style="color: #9cdcfe;">:</span> {</div><div> <span style="color: #9cdcfe;">justifyContent</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'center'</span>,</div><div> <span style="color: #9cdcfe;">alignItems</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'center'</span>,</div><div> <span style="color: #9cdcfe;">height</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">200</span>,</div><div> <span style="color: #9cdcfe;">padding</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">1</span>,</div><div> <span style="color: #9cdcfe;">margin</span><span style="color: #9cdcfe;">:</span><span style="color: #b5cea8;">2</span></div><div> },</div><div>});</div><br /><div><span style="color: #6a9955;">//make this component available to the app</span></div><div><span style="color: #c586c0;">export</span> <span style="color: #c586c0;">default</span> <span style="color: #dcdcaa;">ImageFlatList</span>;</div><br /></div><div><br /></div><h3 style="text-align: left;">
Screenshot</h3><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPDzpMYJ0MRLdoVBUpxkXU3874EfPqkXIZhX9U71KOGyEhcIsBQ63MzWNfRddP9rt5M2ObPUQVI8NVBGz5gtMuXLfGZ6D193NmbcgO_Purk54aleOh1LPprCS2tBXoeJP0AKn3pFoIYzv18MxK3BY_SmL9Yl7udOSAR7HViUT7O90ayrqk0joZ--IBsQsY/s2796/Simulator%20Screen%20Shot%20-%20iPhone%2014%20Pro%20Max%20-%202023-07-28%20at%2002.22.15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="2796" data-original-width="1290" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPDzpMYJ0MRLdoVBUpxkXU3874EfPqkXIZhX9U71KOGyEhcIsBQ63MzWNfRddP9rt5M2ObPUQVI8NVBGz5gtMuXLfGZ6D193NmbcgO_Purk54aleOh1LPprCS2tBXoeJP0AKn3pFoIYzv18MxK3BY_SmL9Yl7udOSAR7HViUT7O90ayrqk0joZ--IBsQsY/w296-h640/Simulator%20Screen%20Shot%20-%20iPhone%2014%20Pro%20Max%20-%202023-07-28%20at%2002.22.15.png" width="296" /></a></div><br /><div><br /></div><div><br /></div><div><br /></div>Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com0tag:blogger.com,1999:blog-1368316095367596493.post-72289212168848120292023-07-28T01:58:00.003+05:302023-09-26T12:48:18.156+05:30REACT NATIVE - Simple Static ListView<p> <span style="background-color: #1e1e1e; color: #6a9955; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 17px; white-space: pre;">//import liraries</span></p><div style="background-color: #1e1e1e; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 17px; line-height: 26px; white-space: pre;"><div><span style="color: #c586c0;">// Day 2 - Learning</span></div><div style="color: #d4d4d4;"><span style="color: #c586c0;"><br /></span></div><div style="color: #d4d4d4;"><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">React</span>, {<span style="color: #9cdcfe;">Component</span>} <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'react'</span>;</div><div style="color: #d4d4d4;"><span style="color: #c586c0;">import</span> {</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">View</span>,</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">Text</span>,</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">StyleSheet</span>,</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">StatusBar</span>,</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">FlatList</span>,</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">SafeAreaView</span>,</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">Pressable</span>,</div><div style="color: #d4d4d4;">} <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'react-native'</span>;</div><span style="color: #d4d4d4;"><br /></span><div style="color: #d4d4d4;"><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">DATA</span> = [</div><div style="color: #d4d4d4;"> {</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">id</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'1'</span>,</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">title</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'First Item'</span>,</div><div style="color: #d4d4d4;"> },</div><div style="color: #d4d4d4;"> {</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">id</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'2'</span>,</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">title</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'Second Item'</span>,</div><div style="color: #d4d4d4;"> },</div><div style="color: #d4d4d4;"> {</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">id</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'3'</span>,</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">title</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'Third Item'</span>,</div><div style="color: #d4d4d4;"> },</div><div style="color: #d4d4d4;"> {</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">id</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'4'</span>,</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">title</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'Forth Item'</span>,</div><div style="color: #d4d4d4;"> },</div><div style="color: #d4d4d4;"> {</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">id</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'5'</span>,</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">title</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'Fifth Item'</span>,</div><div style="color: #d4d4d4;"> },</div><span style="color: #d4d4d4;"><br /></span><div style="color: #d4d4d4;"> {</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">id</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'6'</span>,</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">title</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'Sixth Item'</span>,</div><div style="color: #d4d4d4;"> },</div><span style="color: #d4d4d4;"><br /><br /></span><div style="color: #d4d4d4;"> {</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">id</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'7'</span>,</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">title</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'Seven Item'</span>,</div><div style="color: #d4d4d4;"> },</div><span style="color: #d4d4d4;"><br /></span><div style="color: #d4d4d4;">];</div><span style="color: #d4d4d4;"><br /></span><div style="color: #d4d4d4;"><span style="color: #569cd6;">const</span> <span style="color: #dcdcaa;">ListItemView</span> = ({<span style="color: #9cdcfe;">title</span>}) <span style="color: #569cd6;">=></span> (</div><div style="color: #d4d4d4;"> <span style="color: grey;"><</span><span style="color: #4ec9b0;">Pressable</span></div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">onPress</span>=<span style="color: #569cd6;">{</span>() <span style="color: #569cd6;">=></span> {</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #ce9178;">'press - '</span>+<span style="color: #9cdcfe;">title</span>);</div><div style="color: #d4d4d4;"> }<span style="color: #569cd6;">}</span><span style="color: grey;">></span></div><div style="color: #d4d4d4;"> <span style="color: grey;"><</span><span style="color: #4ec9b0;">View</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">item</span><span style="color: #569cd6;">}</span><span style="color: grey;">></span></div><div style="color: #d4d4d4;"> <span style="color: grey;"><</span><span style="color: #4ec9b0;">Text</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">title</span><span style="color: #569cd6;">}</span><span style="color: grey;">></span><span style="color: #569cd6;">{</span><span style="color: #9cdcfe;">title</span><span style="color: #569cd6;">}</span><span style="color: grey;"></</span><span style="color: #4ec9b0;">Text</span><span style="color: grey;">></span></div><div style="color: #d4d4d4;"> <span style="color: grey;"></</span><span style="color: #4ec9b0;">View</span><span style="color: grey;">></span></div><div style="color: #d4d4d4;"> <span style="color: grey;"></</span><span style="color: #4ec9b0;">Pressable</span><span style="color: grey;">></span></div><div style="color: #d4d4d4;">);</div><span style="color: #d4d4d4;"><br /></span><div style="color: #d4d4d4;"><span style="color: #6a9955;">// create a component</span></div><div style="color: #d4d4d4;"><span style="color: #569cd6;">const</span> <span style="color: #dcdcaa;">SimpleList_1</span> = () <span style="color: #569cd6;">=></span> {</div><div style="color: #d4d4d4;"> <span style="color: #c586c0;">return</span> (</div><div style="color: #d4d4d4;"> <span style="color: grey;"><</span><span style="color: #4ec9b0;">SafeAreaView</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">container</span><span style="color: #569cd6;">}</span><span style="color: grey;">></span></div><div style="color: #d4d4d4;"> <span style="color: grey;"><</span><span style="color: #4ec9b0;">FlatList</span></div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">data</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">DATA</span><span style="color: #569cd6;">}</span></div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">renderItem</span>=<span style="color: #569cd6;">{</span>({<span style="color: #9cdcfe;">item</span>}) <span style="color: #569cd6;">=></span> <span style="color: grey;"><</span><span style="color: #4ec9b0;">ListItemView</span> <span style="color: #9cdcfe;">title</span>=<span style="color: #569cd6;">{</span><span style="color: #9cdcfe;">item</span>.<span style="color: #9cdcfe;">title</span><span style="color: #569cd6;">}</span> <span style="color: grey;">/></span><span style="color: #569cd6;">}</span></div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">keyExtractor</span>=<span style="color: #569cd6;">{</span><span style="color: #9cdcfe;">item</span> <span style="color: #569cd6;">=></span> <span style="color: #9cdcfe;">item</span>.<span style="color: #9cdcfe;">id</span><span style="color: #569cd6;">}</span></div><div style="color: #d4d4d4;"> <span style="color: grey;">/></span></div><div style="color: #d4d4d4;"> <span style="color: grey;"></</span><span style="color: #4ec9b0;">SafeAreaView</span><span style="color: grey;">></span></div><div style="color: #d4d4d4;"> );</div><div style="color: #d4d4d4;">};</div><span style="color: #d4d4d4;"><br /></span><div style="color: #d4d4d4;"><span style="color: #6a9955;">// define your styles</span></div><div style="color: #d4d4d4;"><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">styles</span> = <span style="color: #4ec9b0;">StyleSheet</span>.<span style="color: #dcdcaa;">create</span>({</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">container</span><span style="color: #9cdcfe;">:</span> {</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">flex</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">1</span>,</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">marginTop</span><span style="color: #9cdcfe;">:</span> <span style="color: #4ec9b0;">StatusBar</span>.<span style="color: #9cdcfe;">marginTop</span> || <span style="color: #b5cea8;">0</span>,</div><div style="color: #d4d4d4;"> },</div><span style="color: #d4d4d4;"><br /></span><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">item</span><span style="color: #9cdcfe;">:</span> {</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">backgroundColor</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'#F5F5F5'</span>,</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">marginVertical</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">5</span>,</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">padding</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">15</span>,</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">marginHorizontal</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">10</span>,</div><div style="color: #d4d4d4;"> },</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">title</span><span style="color: #9cdcfe;">:</span> {</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">fontSize</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">14</span>,</div><div style="color: #d4d4d4;"> },</div><div style="color: #d4d4d4;">});</div><span style="color: #d4d4d4;"><br /></span><div style="color: #d4d4d4;"><span style="color: #6a9955;">//make this component available to the app</span></div><div style="color: #d4d4d4;"><span style="color: #c586c0;">export</span> <span style="color: #c586c0;">default</span> <span style="color: #dcdcaa;">SimpleList_1</span>;</div></div><div><br /></div><h3 style="text-align: left;"><b>
Screenshot</b></h3><div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv6hyffW-7V283P6h9g_eqU6YRz4Tze0oUNIcclaoMJc_Kq4DZ1sCegOQzrWn_3uRaQmTbF95sIvEszgQZWKfuAG2ZxvbcGqYtEijNXMT_JFr_NwxeApIEF4YKbkfyam3LvqHWe3OgnsYRoMfMpwGu9_9HXvpH8Ou7GAKys1WHLUkfQJ4RhufUO4QmKgIC/s2796/Simulator%20Screen%20Shot%20-%20iPhone%2014%20Pro%20Max%20-%202023-07-28%20at%2001.54.11.png" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="2796" data-original-width="1290" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv6hyffW-7V283P6h9g_eqU6YRz4Tze0oUNIcclaoMJc_Kq4DZ1sCegOQzrWn_3uRaQmTbF95sIvEszgQZWKfuAG2ZxvbcGqYtEijNXMT_JFr_NwxeApIEF4YKbkfyam3LvqHWe3OgnsYRoMfMpwGu9_9HXvpH8Ou7GAKys1WHLUkfQJ4RhufUO4QmKgIC/w295-h640/Simulator%20Screen%20Shot%20-%20iPhone%2014%20Pro%20Max%20-%202023-07-28%20at%2001.54.11.png" width="295" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;"></td></tr></tbody></table><br /><b><br /></b></div><div><b><br /></b></div><div><b><br /></b></div>Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com0tag:blogger.com,1999:blog-1368316095367596493.post-67783377331157734862023-07-27T21:19:00.007+05:302024-02-05T16:48:52.750+05:30REACT NATIVE - Simple Login Screen <div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 17px; line-height: 26px; white-space: pre;"><div><span style="color: #6a9955;">// Day 2 Learning</span></div><div><span style="color: #6a9955;"><br /></span></div><div><span style="color: #6a9955;">//import liraries</span></div><div><span style="color: #c586c0;">import</span> <span style="color: #9cdcfe;">React</span>, {<span style="color: #9cdcfe;">Component</span>, <span style="color: #9cdcfe;">useState</span>} <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'react'</span>;</div><div><span style="color: #c586c0;">import</span> {</div><div> <span style="color: #9cdcfe;">View</span>,</div><div> <span style="color: #9cdcfe;">TouchableOpacity</span>,</div><div> <span style="color: #9cdcfe;">Text</span>,</div><div> <span style="color: #9cdcfe;">TextInput</span>,</div><div> <span style="color: #9cdcfe;">StyleSheet</span>,</div><div>} <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'react-native'</span>;</div><br /><div><span style="color: #6a9955;">// create a component</span></div><div><span style="color: #569cd6;">const</span> <span style="color: #dcdcaa;">LoginScreen1</span> = () <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #569cd6;">const</span> [<span style="color: #4fc1ff;">email</span>, <span style="color: #dcdcaa;">setEmail</span>] = <span style="color: #dcdcaa;">useState</span>(<span style="color: #ce9178;">''</span>);</div><div> <span style="color: #569cd6;">const</span> [<span style="color: #4fc1ff;">password</span>, <span style="color: #dcdcaa;">setPassword</span>] = <span style="color: #dcdcaa;">useState</span>(<span style="color: #ce9178;">''</span>);</div><div> <span style="color: #569cd6;">const</span> <span style="color: #dcdcaa;">handleSubmitPress</span> = () <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #4fc1ff;">email</span> + <span style="color: #ce9178;">' -- '</span> + <span style="color: #4fc1ff;">password</span>);</div><div> };</div><br /><div> <span style="color: #c586c0;">return</span> (</div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">View</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">container</span><span style="color: #569cd6;">}</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">Text</span></div><div> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span>{</div><div> <span style="color: #9cdcfe;">fontSize</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">30</span>,</div><br /><div> <span style="color: #9cdcfe;">textAlign</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'center'</span>,</div><div> }<span style="color: #569cd6;">}</span><span style="color: grey;">></span></div><div> Welcome back</div><div> <span style="color: grey;"></</span><span style="color: #4ec9b0;">Text</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">TextInput</span></div><div> <span style="color: #9cdcfe;">placeholder</span>=<span style="color: #ce9178;">"Email"</span></div><div> <span style="color: #9cdcfe;">placeholderTextColor</span>=<span style="color: #ce9178;">"#010101"</span></div><div> <span style="color: #9cdcfe;">onChangeText</span>=<span style="color: #569cd6;">{</span><span style="color: #9cdcfe;">text</span> <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #6a9955;">//console.log(text)</span></div><div> <span style="color: #dcdcaa;">setEmail</span>(<span style="color: #9cdcfe;">text</span>);</div><div> }<span style="color: #569cd6;">}</span></div><div> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">input</span><span style="color: #569cd6;">}</span></div><div> <span style="color: grey;">/></span></div><br /><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">TextInput</span></div><div> <span style="color: #9cdcfe;">placeholder</span>=<span style="color: #ce9178;">"Password"</span></div><div> <span style="color: #9cdcfe;">placeholderTextColor</span>=<span style="color: #ce9178;">"#010101"</span></div><div> <span style="color: #9cdcfe;">secureTextEntry</span>=<span style="color: #569cd6;">{true}</span></div><div> <span style="color: #9cdcfe;">onChangeText</span>=<span style="color: #569cd6;">{</span><span style="color: #9cdcfe;">text</span> <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #6a9955;">//console.log(text)</span></div><div> <span style="color: #dcdcaa;">setPassword</span>(<span style="color: #9cdcfe;">text</span>);</div><div> }<span style="color: #569cd6;">}</span></div><div> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">input</span><span style="color: #569cd6;">}</span></div><div> <span style="color: grey;">/></span></div><br /><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">TouchableOpacity</span> <span style="color: #9cdcfe;">onPress</span>=<span style="color: #569cd6;">{</span><span style="color: #dcdcaa;">handleSubmitPress</span><span style="color: #569cd6;">}</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">submitButton</span><span style="color: #569cd6;">}</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">Text</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">submitButtonText</span><span style="color: #569cd6;">}</span><span style="color: grey;">></span> Login <span style="color: grey;"></</span><span style="color: #4ec9b0;">Text</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #4ec9b0;">TouchableOpacity</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #4ec9b0;">View</span><span style="color: grey;">></span></div><div> );</div><div>};</div><br /><div><span style="color: #6a9955;">// define your styles</span></div><div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">styles</span> = <span style="color: #4ec9b0;">StyleSheet</span>.<span style="color: #dcdcaa;">create</span>({</div><div> <span style="color: #9cdcfe;">safeAreacontainer</span><span style="color: #9cdcfe;">:</span> {</div><div> <span style="color: #9cdcfe;">flex</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">1</span>,</div><div> },</div><div> <span style="color: #9cdcfe;">container</span><span style="color: #9cdcfe;">:</span> {</div><div> <span style="color: #9cdcfe;">flex</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">1</span>,</div><div> <span style="color: #9cdcfe;">paddingTop</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">30</span>,</div><div> <span style="color: #9cdcfe;">justifyContent</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'center'</span>,</div><div> },</div><br /><div> <span style="color: #9cdcfe;">input</span><span style="color: #9cdcfe;">:</span> {</div><div> <span style="color: #9cdcfe;">backgroundColor</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'#F4F4F5'</span>,</div><div> <span style="color: #9cdcfe;">margin</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">15</span>,</div><div> <span style="color: #9cdcfe;">height</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">48</span>,</div><div> <span style="color: #9cdcfe;">borderColor</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'transparent'</span>,</div><div> <span style="color: #9cdcfe;">borderWidth</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">1</span>,</div><div> <span style="color: #9cdcfe;">padding</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">10</span>,</div><div> },</div><br /><div> <span style="color: #9cdcfe;">submitButton</span><span style="color: #9cdcfe;">:</span> {</div><div> <span style="color: #9cdcfe;">backgroundColor</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'#057AFF'</span>,</div><div> <span style="color: #9cdcfe;">padding</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">10</span>,</div><div> <span style="color: #9cdcfe;">margin</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">15</span>,</div><div> <span style="color: #9cdcfe;">height</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">40</span>,</div><br /><div> <span style="color: #9cdcfe;">alignItems</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'center'</span>,</div><div> },</div><div> <span style="color: #9cdcfe;">submitButtonText</span><span style="color: #9cdcfe;">:</span> {</div><div> <span style="color: #9cdcfe;">color</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'white'</span>,</div><div> <span style="color: #9cdcfe;">fontWeight</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'bold'</span>,</div><div> <span style="color: #9cdcfe;">justifyContent</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'center'</span>,</div><div> },</div><div>});</div><br /><div><span style="color: #6a9955;">//make this component available to the app</span></div><div><span style="color: #c586c0;">export</span> <span style="color: #c586c0;">default</span> <span style="color: #dcdcaa;">LoginScreen1</span>;</div><br /></div><p> <b>Screenshot</b></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1YuIn_NQUpnihd8gM_whernEqut8mzeHcMZDqITSxFnJLYhJ5wCDeRfjdqVmzKYvQsqmll8tM1d5dFG4uFsB0LAM8n4hXGyAHEoquKPTjIWNAfnGofVRu89fSn4kBLLIa-doNeSdrO8F3b634aPnz8Pxz-DYhDSyUc0DsZYVJ6fo26RvIWFbvAI2gh1xc/s2796/Simulator%20Screen%20Shot%20-%20iPhone%2014%20Pro%20Max%20-%202023-07-27%20at%2021.18.54.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="2796" data-original-width="1290" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1YuIn_NQUpnihd8gM_whernEqut8mzeHcMZDqITSxFnJLYhJ5wCDeRfjdqVmzKYvQsqmll8tM1d5dFG4uFsB0LAM8n4hXGyAHEoquKPTjIWNAfnGofVRu89fSn4kBLLIa-doNeSdrO8F3b634aPnz8Pxz-DYhDSyUc0DsZYVJ6fo26RvIWFbvAI2gh1xc/w296-h640/Simulator%20Screen%20Shot%20-%20iPhone%2014%20Pro%20Max%20-%202023-07-27%20at%2021.18.54.png" width="296" /></a></div><br /><p><br /></p><p><br /></p><p><br /></p>Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com0tag:blogger.com,1999:blog-1368316095367596493.post-91843857475404433392023-07-27T20:04:00.001+05:302023-07-27T20:04:39.768+05:30REACT NATIVE - SIMPLE LAYOUT DESIGN- 1<p><br /></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 17px; line-height: 26px; white-space: pre;"><div><p style="color: black; font-family: Times; font-size: medium; white-space: normal;"> <span style="color: #c586c0; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 17px; white-space: pre;">import</span><span style="color: #d4d4d4; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 17px; white-space: pre;"> </span><span style="color: #9cdcfe; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 17px; white-space: pre;">React</span><span style="color: #d4d4d4; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 17px; white-space: pre;"> </span><span style="color: #c586c0; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 17px; white-space: pre;">from</span><span style="color: #d4d4d4; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 17px; white-space: pre;"> </span><span style="color: #ce9178; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 17px; white-space: pre;">'react'</span><span style="color: #d4d4d4; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 17px; white-space: pre;">;</span></p><div style="line-height: 26px;"></div></div><div><span style="color: #c586c0;">import</span> {<span style="color: #9cdcfe;">View</span>, <span style="color: #9cdcfe;">StyleSheet</span>, <span style="color: #9cdcfe;">SafeAreaView</span>} <span style="color: #c586c0;">from</span> <span style="color: #ce9178;">'react-native'</span>;</div><br /><div><span style="color: #6a9955;">// create a component</span></div><div><span style="color: #569cd6;">const</span> <span style="color: #dcdcaa;">App</span> = () <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #c586c0;">return</span> (</div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">SafeAreaView</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">safeAreacontainer</span><span style="color: #569cd6;">}</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">View</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">mainContainer</span><span style="color: #569cd6;">}</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">View</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">box1</span><span style="color: #569cd6;">}</span> <span style="color: grey;">/></span></div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">View</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">box2</span><span style="color: #569cd6;">}</span> <span style="color: grey;">/></span></div><div> <span style="color: grey;"><</span><span style="color: #4ec9b0;">View</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span><span style="color: #4fc1ff;">styles</span>.<span style="color: #9cdcfe;">box3</span><span style="color: #569cd6;">}</span> <span style="color: grey;">/></span></div><div> <span style="color: grey;"></</span><span style="color: #4ec9b0;">View</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #4ec9b0;">SafeAreaView</span><span style="color: grey;">></span></div><div> );</div><div>};</div><br /><div><span style="color: #6a9955;">// define your styles</span></div><div><span style="color: #569cd6;">const</span> <span style="color: #4fc1ff;">styles</span> = <span style="color: #4ec9b0;">StyleSheet</span>.<span style="color: #dcdcaa;">create</span>({</div><div> <span style="color: #9cdcfe;">safeAreacontainer</span><span style="color: #9cdcfe;">:</span> {</div><div> <span style="color: #9cdcfe;">flex</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">1</span>,</div><div> },</div><br /><div> <span style="color: #9cdcfe;">mainContainer</span><span style="color: #9cdcfe;">:</span> {</div><div> <span style="color: #9cdcfe;">flex</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">1</span>,</div><div> <span style="color: #9cdcfe;">flexDirection</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'column'</span>,</div><div> },</div><br /><div> <span style="color: #9cdcfe;">box1</span><span style="color: #9cdcfe;">:</span> {</div><div> <span style="color: #9cdcfe;">flex</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">1</span>,</div><div> <span style="color: #9cdcfe;">backgroundColor</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'#4C6663'</span>,</div><div> },</div><br /><div> <span style="color: #9cdcfe;">box2</span><span style="color: #9cdcfe;">:</span> {</div><div> <span style="color: #9cdcfe;">flex</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">8</span>,</div><div> <span style="color: #9cdcfe;">backgroundColor</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'#C9D7F8'</span>,</div><div> },</div><br /><div> <span style="color: #9cdcfe;">box3</span><span style="color: #9cdcfe;">:</span> {</div><div> <span style="color: #9cdcfe;">flex</span><span style="color: #9cdcfe;">:</span> <span style="color: #b5cea8;">1</span>,</div><div> <span style="color: #9cdcfe;">backgroundColor</span><span style="color: #9cdcfe;">:</span> <span style="color: #ce9178;">'#7D4767'</span>,</div><div> },</div><div>});</div><br /><div><span style="color: #6a9955;">//make this component available to the app</span></div><div><span style="color: #c586c0;">export</span> <span style="color: #c586c0;">default</span> <span style="color: #dcdcaa;">App</span>;</div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwCqdL6BUcbcRBFFOLpEJa7lGjjYvrIceVPWjSLcHelayLAtAsuW7czlJUUIqGIFxWdIOzXFTIDlMfTdD9EEFg_urdoRCShCVlzZPRnCZk1SpfQ6g2CKog5XRFRzFsCrGRDqJJ5eCynvrtZB-nK32DS0izOKIepO228eKQJm67CS2ZryED0mABHS0RI_TY/s2796/Simulator%20Screen%20Shot%20-%20iPhone%2014%20Pro%20Max%20-%202023-07-27%20at%2019.51.47.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="2796" data-original-width="1290" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwCqdL6BUcbcRBFFOLpEJa7lGjjYvrIceVPWjSLcHelayLAtAsuW7czlJUUIqGIFxWdIOzXFTIDlMfTdD9EEFg_urdoRCShCVlzZPRnCZk1SpfQ6g2CKog5XRFRzFsCrGRDqJJ5eCynvrtZB-nK32DS0izOKIepO228eKQJm67CS2ZryED0mABHS0RI_TY/w296-h640/Simulator%20Screen%20Shot%20-%20iPhone%2014%20Pro%20Max%20-%202023-07-27%20at%2019.51.47.png" width="296" /></a></div><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 17px; line-height: 26px; white-space: pre;"><br /></div>
Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com0tag:blogger.com,1999:blog-1368316095367596493.post-69475672122877696992023-05-11T16:39:00.005+05:302023-05-11T16:52:17.761+05:30Login Screen using SwiftUI <p> </p><p><b>Simple Login Screen using SwiftUI </b></p><p>===========================</p><p><br /></p><p class="p1" style="background-color: white; color: #5d6c79; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">//</p><p class="p1" style="background-color: white; color: #5d6c79; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">//<span class="Apple-converted-space"> </span><span style="color: #0b4f79;">LoginScreen</span>.swift</p><p class="p1" style="background-color: white; color: #5d6c79; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">//<span class="Apple-converted-space"> </span>iOSApp1</p><p class="p1" style="background-color: white; color: #5d6c79; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">//</p><p class="p1" style="background-color: white; color: #5d6c79; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">//<span class="Apple-converted-space"> </span>Created by Pratap Kumar on 04/05/23.</p><p class="p1" style="background-color: white; color: #5d6c79; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">//</p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><br /></p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: #9b2393;"><b>import</b></span> SwiftUI</p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><br /></p><p class="p4" style="background-color: white; color: #0b4f79; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: #9b2393;"><b>struct</b></span><span class="s2" color="rgba(0, 0, 0, 0.85)"> </span>LoginScreen<span class="s2" color="rgba(0, 0, 0, 0.85)">: </span><span class="s3" style="color: #3900a0;">View</span><span class="s2" color="rgba(0, 0, 0, 0.85)"> {</span></p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><span class="Apple-converted-space"> </span></p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s3" style="color: #3900a0;">@State</span> <span class="s1" style="color: #9b2393;"><b>var</b></span> <span class="s4" style="color: #0f68a0;">username</span> : <span class="s3" style="color: #3900a0;">String</span> = <span class="s5" style="color: #c41a16;">""</span>;</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s3" style="color: #3900a0;">@State</span> <span class="s1" style="color: #9b2393;"><b>var</b></span> <span class="s4" style="color: #0f68a0;">email</span> : <span class="s3" style="color: #3900a0;">String</span> = <span class="s5" style="color: #c41a16;">""</span>;</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s3" style="color: #3900a0;">@State</span> <span class="s1" style="color: #9b2393;"><b>var</b></span> <span class="s4" style="color: #0f68a0;">password</span> :<span class="s3" style="color: #3900a0;">String</span> = <span class="s5" style="color: #c41a16;">""</span>;</p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><span class="Apple-converted-space"> </span></p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s1" style="color: #9b2393;"><b>var</b></span> <span class="s4" style="color: #0f68a0;">colorBlue</span>: <span class="s3" style="color: #3900a0;">Color</span> = <span class="s3" style="color: #3900a0;">Color</span>.<span class="s6" style="color: #6c36a9;">blue</span></p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s1" style="color: #9b2393;"><b>var</b></span> <span class="s4" style="color: #0f68a0;">grayBackground</span>: <span class="s3" style="color: #3900a0;">Color</span> = <span class="s3" style="color: #3900a0;">Color</span>.<span class="s6" style="color: #6c36a9;">gray</span>.<span class="s6" style="color: #6c36a9;">opacity</span>(<span class="s7" style="color: #1c00cf;">0.1</span>)</p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><span class="Apple-converted-space"> </span></p><p class="p5" style="background-color: white; color: #9b2393; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" color="rgba(0, 0, 0, 0.85)"> </span><span class="s3" style="color: #3900a0;">@State</span><span class="s2" color="rgba(0, 0, 0, 0.85)"> </span><b>private</b><span class="s2" color="rgba(0, 0, 0, 0.85)"> </span><b>var</b><span class="s2" color="rgba(0, 0, 0, 0.85)"> </span><span class="s4" style="color: #0f68a0;">showingAlert</span><span class="s2" color="rgba(0, 0, 0, 0.85)"> = </span><b>false</b></p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><br /></p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><span class="Apple-converted-space"> </span></p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s1" style="color: #9b2393;"><b>var</b></span> <span class="s4" style="color: #0f68a0;">body</span>: <span class="s1" style="color: #9b2393;"><b>some</b></span> <span class="s3" style="color: #3900a0;">View</span> {</p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><span class="Apple-converted-space"> </span></p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><span class="Apple-converted-space"> </span></p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s3" style="color: #3900a0;">VStack</span>{</p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><span class="Apple-converted-space"> </span></p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s8" style="color: #5d6c79;">// Welcome Label</span></p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s3" style="color: #3900a0;">Text</span>(<span class="s5" style="color: #c41a16;">"Welcome, User"</span>)</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span>.<span class="s6" style="color: #6c36a9;">foregroundColor</span>(<span class="s9" style="color: #326d74;">colorBlue</span>)</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span>.<span class="s6" style="color: #6c36a9;">padding</span>(.<span class="s6" style="color: #6c36a9;">bottom</span>, <span class="s7" style="color: #1c00cf;">30</span>).<span class="s6" style="color: #6c36a9;">font</span>(.<span class="s6" style="color: #6c36a9;">largeTitle</span>)</p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><span class="Apple-converted-space"> </span></p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><span class="Apple-converted-space"> </span></p><p class="p1" style="background-color: white; color: #5d6c79; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" color="rgba(0, 0, 0, 0.85)"> </span>// Email Address Field</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s3" style="color: #3900a0;">HStack</span>{</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s3" style="color: #3900a0;">Image</span>(<span class="s3" style="color: #3900a0;">systemName</span>:<span class="s5" style="color: #c41a16;">"envelope.fill"</span>).<span class="s6" style="color: #6c36a9;">foregroundColor</span>(<span class="s3" style="color: #3900a0;">Color</span>.<span class="s6" style="color: #6c36a9;">blue</span>)</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s3" style="color: #3900a0;">TextField</span>(<span class="s5" style="color: #c41a16;">"Email Address"</span>, <span class="s3" style="color: #3900a0;">text</span>: <span class="s9" style="color: #326d74;">$email</span>)</p><p class="p6" style="background-color: white; color: #6c36a9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" color="rgba(0, 0, 0, 0.85)"><span class="Apple-converted-space"> </span>}.</span>padding<span class="s2" color="rgba(0, 0, 0, 0.85)">().</span>background<span class="s2" color="rgba(0, 0, 0, 0.85)">(</span><span class="s9" style="color: #326d74;">grayBackground</span><span class="s2" color="rgba(0, 0, 0, 0.85)">).</span>cornerRadius<span class="s2" color="rgba(0, 0, 0, 0.85)">(</span><span class="s7" style="color: #1c00cf;">5.0</span><span class="s2" color="rgba(0, 0, 0, 0.85)">).</span>padding<span class="s2" color="rgba(0, 0, 0, 0.85)">(.</span>bottom<span class="s2" color="rgba(0, 0, 0, 0.85)">,</span><span class="s7" style="color: #1c00cf;">10</span><span class="s2" color="rgba(0, 0, 0, 0.85)">)</span></p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><span class="Apple-converted-space"> </span></p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><span class="Apple-converted-space"> </span></p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><span class="Apple-converted-space"> </span></p><p class="p1" style="background-color: white; color: #5d6c79; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" color="rgba(0, 0, 0, 0.85)"> </span>// Password Field</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s3" style="color: #3900a0;">HStack</span>{</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s3" style="color: #3900a0;">Image</span>(<span class="s3" style="color: #3900a0;">systemName</span>:<span class="s5" style="color: #c41a16;">"lock.fill"</span>).<span class="s6" style="color: #6c36a9;">foregroundColor</span>(<span class="s3" style="color: #3900a0;">Color</span>.<span class="s6" style="color: #6c36a9;">blue</span>)</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s3" style="color: #3900a0;">SecureField</span>(<span class="s5" style="color: #c41a16;">"Password"</span>, <span class="s3" style="color: #3900a0;">text</span>: <span class="s9" style="color: #326d74;">$password</span>)</p><p class="p6" style="background-color: white; color: #6c36a9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" color="rgba(0, 0, 0, 0.85)"><span class="Apple-converted-space"> </span>}.</span>padding<span class="s2" color="rgba(0, 0, 0, 0.85)">().</span>background<span class="s2" color="rgba(0, 0, 0, 0.85)">(</span><span class="s9" style="color: #326d74;">grayBackground</span><span class="s2" color="rgba(0, 0, 0, 0.85)">).</span>cornerRadius<span class="s2" color="rgba(0, 0, 0, 0.85)">(</span><span class="s7" style="color: #1c00cf;">5.0</span><span class="s2" color="rgba(0, 0, 0, 0.85)">).</span>padding<span class="s2" color="rgba(0, 0, 0, 0.85)">(.</span>bottom<span class="s2" color="rgba(0, 0, 0, 0.85)">,</span><span class="s7" style="color: #1c00cf;">10</span><span class="s2" color="rgba(0, 0, 0, 0.85)">)</span></p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><span class="Apple-converted-space"> </span></p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><span class="Apple-converted-space"> </span></p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s3" style="color: #3900a0;">Button</span>(<span class="s6" style="color: #6c36a9;">action</span>: {</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s9" style="color: #326d74;">showingAlert</span> = <span class="s1" style="color: #9b2393;"><b>true</b></span></p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span>}){</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s3" style="color: #3900a0;">Text</span>(<span class="s5" style="color: #c41a16;">"Login"</span>)</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span>.<span class="s6" style="color: #6c36a9;">font</span>(.<span class="s6" style="color: #6c36a9;">headline</span>)</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span>.<span class="s6" style="color: #6c36a9;">foregroundColor</span>(.<span class="s6" style="color: #6c36a9;">white</span>)</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span>.<span class="s6" style="color: #6c36a9;">padding</span>()</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span>.<span class="s6" style="color: #6c36a9;">frame</span>(<span class="s6" style="color: #6c36a9;">width</span>: <span class="s7" style="color: #1c00cf;">150</span>, <span class="s6" style="color: #6c36a9;">height</span>: <span class="s7" style="color: #1c00cf;">50</span>)</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span>.<span class="s6" style="color: #6c36a9;">background</span>(<span class="s9" style="color: #326d74;">colorBlue</span>)</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span>.<span class="s6" style="color: #6c36a9;">cornerRadius</span>(<span class="s7" style="color: #1c00cf;">10.0</span>)</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span>} .<span class="s6" style="color: #6c36a9;">alert</span>(<span class="s6" style="color: #6c36a9;">isPresented</span>: <span class="s9" style="color: #326d74;">$showingAlert</span>) {</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s3" style="color: #3900a0;">Alert</span>(<span class="s6" style="color: #6c36a9;">title</span>: <span class="s3" style="color: #3900a0;">Text</span>(<span class="s5" style="color: #c41a16;">"Login Details"</span>),</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s6" style="color: #6c36a9;">message</span>: <span class="s3" style="color: #3900a0;">Text</span>(<span class="s5" style="color: #c41a16;">"Email : </span>\(<span class="s9" style="color: #326d74;">email</span>)<span class="s5" style="color: #c41a16;">\nPassword : </span>\(<span class="s9" style="color: #326d74;">password</span>)<span class="s5" style="color: #c41a16;">"</span>),</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s6" style="color: #6c36a9;">primaryButton</span>: .<span class="s6" style="color: #6c36a9;">destructive</span>(<span class="s3" style="color: #3900a0;">Text</span>(<span class="s5" style="color: #c41a16;">"OK"</span>)),</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><span class="s6" style="color: #6c36a9;">secondaryButton</span>: .<span class="s6" style="color: #6c36a9;">cancel</span>(<span class="s3" style="color: #3900a0;">Text</span>(<span class="s5" style="color: #c41a16;">"Cancel"</span>)))</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span>}</p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><span class="Apple-converted-space"> </span></p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><span class="Apple-converted-space"> </span></p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><span class="Apple-converted-space"> </span></p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><span class="Apple-converted-space"> </span></p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span>}.<span class="s6" style="color: #6c36a9;">padding</span>(.<span class="s6" style="color: #6c36a9;">horizontal</span>)</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span>}</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span>}</p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><br /></p><p class="p2" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 15px;"><br /></p><p class="p4" style="background-color: white; color: #0b4f79; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: #9b2393;"><b>struct</b></span><span class="s2" color="rgba(0, 0, 0, 0.85)"> </span>LoginScreen_Previews<span class="s2" color="rgba(0, 0, 0, 0.85)">: </span><span class="s3" style="color: #3900a0;">PreviewProvider</span><span class="s2" color="rgba(0, 0, 0, 0.85)"> {</span></p><p class="p5" style="background-color: white; color: #9b2393; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" color="rgba(0, 0, 0, 0.85)"> </span><b>static</b><span class="s2" color="rgba(0, 0, 0, 0.85)"> </span><b>var</b><span class="s2" color="rgba(0, 0, 0, 0.85)"> </span><span class="s4" style="color: #0f68a0;">previews</span><span class="s2" color="rgba(0, 0, 0, 0.85)">: </span><b>some</b><span class="s2" color="rgba(0, 0, 0, 0.85)"> </span><span class="s3" style="color: #3900a0;">View</span><span class="s2" color="rgba(0, 0, 0, 0.85)"> {</span></p><p class="p7" style="background-color: white; color: #1c464a; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" color="rgba(0, 0, 0, 0.85)"> </span>LoginScreen<span class="s2" color="rgba(0, 0, 0, 0.85)">()</span></p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span>}</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;">}</p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><br /></p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><br /></p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><b>Screenshot</b></p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><b>============</b></p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><b><br /></b></p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><b><br /></b></p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><b><br /></b></p><p class="p3" style="background-color: white; color: rgba(0, 0, 0, 0.85); font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtFi3JK9hsoR2oiLTmHy7rTyhv-4SgFtaP7k_QT7qbFrV0fAqmE8BPucbxChW8oEqox--rs2a4lEl15h5TQfrSyf-9oSUT9FkWW_V8K5Wp5dsTW0ZOQ8dmccAVTgBf0z2FYcXWjYcnZE_LAz9cPnAV_U332Vny_CMS5vvsiRvRRYvyV7vA8DvYSDxFwQ/s2556/Simulator%20Screen%20Shot%20-%20iPhone%2014%20Pro%20-%202023-05-11%20at%2016.23.34.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="2556" data-original-width="1179" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtFi3JK9hsoR2oiLTmHy7rTyhv-4SgFtaP7k_QT7qbFrV0fAqmE8BPucbxChW8oEqox--rs2a4lEl15h5TQfrSyf-9oSUT9FkWW_V8K5Wp5dsTW0ZOQ8dmccAVTgBf0z2FYcXWjYcnZE_LAz9cPnAV_U332Vny_CMS5vvsiRvRRYvyV7vA8DvYSDxFwQ/w296-h640/Simulator%20Screen%20Shot%20-%20iPhone%2014%20Pro%20-%202023-05-11%20at%2016.23.34.png" width="296" /></a></div><div style="text-align: left;"></div><br /><b><br /></b><p></p>Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com0tag:blogger.com,1999:blog-1368316095367596493.post-52128608577937996082023-01-30T15:59:00.001+05:302023-01-30T15:59:32.830+05:30Stack View widget example<p> </p>
<!--HTML generated using hilite.me--><div style="background: rgb(255, 255, 255); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0px;">Container(
<span style="color: #997700; font-weight: bold;">child:</span> Stack(
<span style="color: #997700; font-weight: bold;">children:</span> [
<span style="color: #888888;">// Container with color blue</span>
Container(
<span style="color: #997700; font-weight: bold;">height:</span> <span style="color: #6600ee; font-weight: bold;">150</span>,
<span style="color: #997700; font-weight: bold;">width:</span> <span style="color: #333399; font-weight: bold;">double</span>.infinity,
<span style="color: #997700; font-weight: bold;">decoration:</span> BoxDecoration(
<span style="color: #997700; font-weight: bold;">color:</span> Colors.blue,
<span style="color: #997700; font-weight: bold;">border:</span> Border.all(<span style="color: #997700; font-weight: bold;">width:</span> <span style="color: #6600ee; font-weight: bold;">1</span>, <span style="color: #997700; font-weight: bold;">color:</span> Colors.grey),
<span style="color: #997700; font-weight: bold;">borderRadius:</span> BorderRadius.all(Radius.circular(<span style="color: #6600ee; font-weight: bold;">8</span>))),
),
Positioned(
<span style="color: #997700; font-weight: bold;">child:</span> Card(
<span style="color: #997700; font-weight: bold;">shape:</span> RoundedRectangleBorder(
<span style="color: #997700; font-weight: bold;">borderRadius:</span> BorderRadius.circular(<span style="color: #6600ee; font-weight: bold;">20</span>),
<span style="color: #888888;">//set border radius more than 50% of height and width to make circle</span>
),
<span style="color: #997700; font-weight: bold;">elevation:</span> <span style="color: #6600ee; font-weight: bold;">1</span>,
<span style="color: #997700; font-weight: bold;">color:</span> Colors.white,
<span style="color: #997700; font-weight: bold;">child:</span> Container(
<span style="color: #997700; font-weight: bold;">height:</span> <span style="color: #6600ee; font-weight: bold;">36</span>, <span style="color: #997700; font-weight: bold;">width:</span> <span style="color: #6600ee; font-weight: bold;">36</span>, <span style="color: #997700; font-weight: bold;">child:</span> Icon(Icons.safety_check)),
),
),
<span style="color: #888888;">// top right icon</span>
Positioned(
<span style="color: #997700; font-weight: bold;">left:</span> MediaQuery.of(context).size.width <span style="color: #333333;">-</span> <span style="color: #6600ee; font-weight: bold;">70</span>,
<span style="color: #997700; font-weight: bold;">child:</span> Card(
<span style="color: #997700; font-weight: bold;">shape:</span> RoundedRectangleBorder(
<span style="color: #997700; font-weight: bold;">borderRadius:</span> BorderRadius.circular(<span style="color: #6600ee; font-weight: bold;">20</span>),
<span style="color: #888888;">//set border radius more than 50% of height and width to make circle</span>
),
<span style="color: #997700; font-weight: bold;">elevation:</span> <span style="color: #6600ee; font-weight: bold;">1</span>,
<span style="color: #997700; font-weight: bold;">color:</span> Colors.white,
<span style="color: #997700; font-weight: bold;">child:</span> Container(
<span style="color: #997700; font-weight: bold;">height:</span> <span style="color: #6600ee; font-weight: bold;">36</span>, <span style="color: #997700; font-weight: bold;">width:</span> <span style="color: #6600ee; font-weight: bold;">36</span>, <span style="color: #997700; font-weight: bold;">child:</span> Icon(Icons.camera_alt)),
),
),
<span style="color: #888888;">// Botton Left Icon</span>
Positioned(
<span style="color: #997700; font-weight: bold;">top:</span> <span style="color: #6600ee; font-weight: bold;">100</span>,
<span style="color: #997700; font-weight: bold;">child:</span> Card(
<span style="color: #997700; font-weight: bold;">shape:</span> RoundedRectangleBorder(
<span style="color: #997700; font-weight: bold;">borderRadius:</span> BorderRadius.circular(<span style="color: #6600ee; font-weight: bold;">20</span>),
<span style="color: #888888;">//set border radius more than 50% of height and width to make circle</span>
),
<span style="color: #997700; font-weight: bold;">elevation:</span> <span style="color: #6600ee; font-weight: bold;">1</span>,
<span style="color: #997700; font-weight: bold;">color:</span> Colors.white,
<span style="color: #997700; font-weight: bold;">child:</span>
Container(<span style="color: #997700; font-weight: bold;">height:</span> <span style="color: #6600ee; font-weight: bold;">36</span>, <span style="color: #997700; font-weight: bold;">width:</span> <span style="color: #6600ee; font-weight: bold;">36</span>, <span style="color: #997700; font-weight: bold;">child:</span> Icon(Icons.sailing)),
),
),
<span style="color: #888888;">// bottom right icon</span>
Positioned(
<span style="color: #997700; font-weight: bold;">left:</span> MediaQuery.of(context).size.width <span style="color: #333333;">-</span> <span style="color: #6600ee; font-weight: bold;">70</span>,
<span style="color: #997700; font-weight: bold;">top:</span> <span style="color: #6600ee; font-weight: bold;">100</span>,
<span style="color: #997700; font-weight: bold;">child:</span> Card(
<span style="color: #997700; font-weight: bold;">shape:</span> RoundedRectangleBorder(
<span style="color: #997700; font-weight: bold;">borderRadius:</span> BorderRadius.circular(<span style="color: #6600ee; font-weight: bold;">20</span>),
<span style="color: #888888;">//set border radius more than 50% of height and width to make circle</span>
),
<span style="color: #997700; font-weight: bold;">elevation:</span> <span style="color: #6600ee; font-weight: bold;">1</span>,
<span style="color: #997700; font-weight: bold;">color:</span> Colors.white,
<span style="color: #997700; font-weight: bold;">child:</span>
Container(<span style="color: #997700; font-weight: bold;">height:</span> <span style="color: #6600ee; font-weight: bold;">36</span>, <span style="color: #997700; font-weight: bold;">width:</span> <span style="color: #6600ee; font-weight: bold;">36</span>, <span style="color: #997700; font-weight: bold;">child:</span> Icon(Icons.gamepad)),
),
),
],
),
);<div class="separator" style="clear: both; text-align: center;"><br /></div><br />
</pre></div>
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieRbvloEb8LzL0IHEDzLeEWyO8eqv2Q1xNIQvyy9yy-3KcWkxAMB696jih8yd7YMXWONJNdE0wAfoXl4Y4L4BqHKQBS56Iu3p3bvg1m_oGWGRmN7ainRBEXhstScNYE0RHS1bJfPWm508ak-J_Jm3oG5Li9_AbzNBpOFzxGZC5Hr2O3Q5q80pOkG_siw/s665/stack_view_sample.jpeg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" height="600" data-original-height="665" data-original-width="299" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieRbvloEb8LzL0IHEDzLeEWyO8eqv2Q1xNIQvyy9yy-3KcWkxAMB696jih8yd7YMXWONJNdE0wAfoXl4Y4L4BqHKQBS56Iu3p3bvg1m_oGWGRmN7ainRBEXhstScNYE0RHS1bJfPWm508ak-J_Jm3oG5Li9_AbzNBpOFzxGZC5Hr2O3Q5q80pOkG_siw/s600/stack_view_sample.jpeg"/></a></div>
Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com0tag:blogger.com,1999:blog-1368316095367596493.post-48383992912744641122023-01-20T17:10:00.001+05:302023-01-20T17:10:35.334+05:30Add Border, BorderColor, Align to Container<p> </p>
<!--HTML generated using hilite.me--><div style="background: rgb(255, 255, 255); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0px;"> Container(
<span style="color: #997700; font-weight: bold;">height:</span> <span style="color: #6600ee; font-weight: bold;">150</span>,
<span style="color: #997700; font-weight: bold;">width:</span> <span style="color: #6600ee; font-weight: bold;">150</span>,
<span style="color: #997700; font-weight: bold;">margin:</span> EdgeInsets.all(<span style="color: #6600ee; font-weight: bold;">8</span>),
<span style="color: #997700; font-weight: bold;">decoration:</span> BoxDecoration(
<span style="color: #997700; font-weight: bold;">borderRadius:</span> BorderRadius.all(Radius.circular(<span style="color: #6600ee; font-weight: bold;">8</span>)),
<span style="color: #997700; font-weight: bold;">color:</span> Colors.blue,
<span style="color: #997700; font-weight: bold;">border:</span> Border.all(<span style="color: #997700; font-weight: bold;">width:</span> <span style="color: #6600ee; font-weight: bold;">5</span>, <span style="color: #997700; font-weight: bold;">color:</span> Colors.green)),
<span style="color: #997700; font-weight: bold;">padding:</span> EdgeInsets.symmetric(<span style="color: #997700; font-weight: bold;">horizontal:</span> <span style="color: #6600ee; font-weight: bold;">10</span>, <span style="color: #997700; font-weight: bold;">vertical:</span> <span style="color: #6600ee; font-weight: bold;">8</span>),
<span style="color: #997700; font-weight: bold;">child:</span> Align(
<span style="color: #997700; font-weight: bold;">alignment:</span> Alignment.center,
<span style="color: #997700; font-weight: bold;">child:</span> Text(
<span style="background-color: #fff0f0;">"Container 1"</span>,
<span style="color: #997700; font-weight: bold;">style:</span> TextStyle(<span style="color: #997700; font-weight: bold;">color:</span> Colors.white),
),
),
),
</pre></div>
Screenshot:
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfwiNIbE82DFtvc1T4kBZP1N6FWCZGKd3b-uYKsItiyQTt21X1-El8Z7_jaOESlVJVWeH9ynk4PxjCfCZOCGObLzMzQmuEf5bBYhZTOMi3cMK1jzcmgVPyq44hKw5O0OWfuUMMaG1J7S_32NP9hOQbkI7s7znbE5peJxuYdDZiiAMKL9kG6Ie4okdFEg/s2280/Screenshot_1674214709.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" height="600" data-original-height="2280" data-original-width="1080" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfwiNIbE82DFtvc1T4kBZP1N6FWCZGKd3b-uYKsItiyQTt21X1-El8Z7_jaOESlVJVWeH9ynk4PxjCfCZOCGObLzMzQmuEf5bBYhZTOMi3cMK1jzcmgVPyq44hKw5O0OWfuUMMaG1J7S_32NP9hOQbkI7s7znbE5peJxuYdDZiiAMKL9kG6Ie4okdFEg/s600/Screenshot_1674214709.png"/></a></div>Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com0tag:blogger.com,1999:blog-1368316095367596493.post-19688320910594002782022-12-30T01:41:00.002+05:302022-12-30T01:41:25.879+05:30Flutter Container - Border Radius, Box Shape, Circle Avatar<!--HTML generated using hilite.me--><div style="background: rgb(255, 255, 255); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0px;"><span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:flutter/material.dart'</span>;
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">RegisterScreen</span> <span style="color: #008800; font-weight: bold;">extends</span> StatefulWidget {
<span style="color: #008800; font-weight: bold;">const</span> RegisterScreen({Key<span style="color: #333333;">?</span> key}) <span style="color: #333333;">:</span> <span style="color: #008800; font-weight: bold;">super</span>(<span style="color: #997700; font-weight: bold;">key:</span> key);
<span style="background-color: #ffaaaa; color: red;">@</span>override
_RegisterScreenState createState() <span style="color: #333333;">=></span> _RegisterScreenState();
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">_RegisterScreenState</span> <span style="color: #008800; font-weight: bold;">extends</span> State<span style="color: #333333;"><</span>RegisterScreen<span style="color: #333333;">></span> {
<span style="background-color: #ffaaaa; color: red;">@</span>override
Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> Scaffold(
<span style="color: #997700; font-weight: bold;">appBar:</span> AppBar(
<span style="color: #997700; font-weight: bold;">elevation:</span> <span style="color: #6600ee; font-weight: bold;">0</span>,
<span style="color: #997700; font-weight: bold;">title:</span> Text(<span style="background-color: #fff0f0;">"Container Examples"</span>),
),
<span style="color: #997700; font-weight: bold;">body:</span> Container(
<span style="color: #997700; font-weight: bold;">width:</span> <span style="color: #333399; font-weight: bold;">double</span>.infinity,
<span style="color: #997700; font-weight: bold;">child:</span> Column(
<span style="color: #997700; font-weight: bold;">crossAxisAlignment:</span> CrossAxisAlignment.center,
<span style="color: #997700; font-weight: bold;">mainAxisAlignment:</span> MainAxisAlignment.center,
<span style="color: #997700; font-weight: bold;">children:</span> [
Container(
<span style="color: #997700; font-weight: bold;">height:</span> <span style="color: #6600ee; font-weight: bold;">150</span>,
<span style="color: #997700; font-weight: bold;">width:</span> <span style="color: #6600ee; font-weight: bold;">150</span>,
<span style="color: #997700; font-weight: bold;">decoration:</span> BoxDecoration(
<span style="color: #997700; font-weight: bold;">color:</span> Colors.teal,
<span style="color: #997700; font-weight: bold;">borderRadius:</span> BorderRadius.all(Radius.circular(<span style="color: #6600ee; font-weight: bold;">20</span>)),
),
),
SizedBox(
<span style="color: #997700; font-weight: bold;">height:</span> <span style="color: #6600ee; font-weight: bold;">10</span>,
),
Container(
<span style="color: #997700; font-weight: bold;">height:</span> <span style="color: #6600ee; font-weight: bold;">150</span>,
<span style="color: #997700; font-weight: bold;">width:</span> <span style="color: #6600ee; font-weight: bold;">150</span>,
<span style="color: #997700; font-weight: bold;">decoration:</span> BoxDecoration(
<span style="color: #997700; font-weight: bold;">shape:</span> BoxShape.circle,
<span style="color: #997700; font-weight: bold;">color:</span> Colors.green,
),
),
Center(
<span style="color: #997700; font-weight: bold;">child:</span> Container(
<span style="color: #997700; font-weight: bold;">margin:</span> EdgeInsets.all(<span style="color: #6600ee; font-weight: bold;">16</span>),
<span style="color: #997700; font-weight: bold;">height:</span> <span style="color: #6600ee; font-weight: bold;">100</span>,
<span style="color: #997700; font-weight: bold;">width:</span> <span style="color: #6600ee; font-weight: bold;">100</span>,
<span style="color: #997700; font-weight: bold;">decoration:</span> BoxDecoration(
<span style="color: #997700; font-weight: bold;">borderRadius:</span> BorderRadius.circular(<span style="color: #6600ee; font-weight: bold;">52.5</span>),
<span style="color: #997700; font-weight: bold;">boxShadow:</span> [
BoxShadow(
<span style="color: #997700; font-weight: bold;">color:</span> Colors.black,
<span style="color: #997700; font-weight: bold;">spreadRadius:</span> <span style="color: #6600ee; font-weight: bold;">4</span>,
)
]),
<span style="color: #997700; font-weight: bold;">child:</span> CircleAvatar(
<span style="color: #997700; font-weight: bold;">radius:</span> <span style="color: #6600ee; font-weight: bold;">30</span>,
<span style="color: #997700; font-weight: bold;">backgroundImage:</span> NetworkImage(<span style="background-color: #fff0f0;">'https://randomuser.me/api/portraits/women/26.jpg'</span>),
),
),
),
],
),
));
}
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">HexColor</span> {
<span style="color: #008800; font-weight: bold;">static</span> hexToColor(<span style="color: #333399; font-weight: bold;">String</span> hexString) {
<span style="color: #008800; font-weight: bold;">final</span> buffer <span style="color: #333333;">=</span> StringBuffer();
<span style="color: #008800; font-weight: bold;">if</span> (hexString.length <span style="color: #333333;">==</span> <span style="color: #6600ee; font-weight: bold;">6</span> <span style="color: #333333;">||</span> hexString.length <span style="color: #333333;">==</span> <span style="color: #6600ee; font-weight: bold;">7</span>) buffer.write(<span style="background-color: #fff0f0;">'FF'</span>);
buffer.write(hexString.replaceFirst(<span style="background-color: #fff0f0;">'#'</span>, <span style="background-color: #fff0f0;">''</span>));
<span style="color: #008800; font-weight: bold;">return</span> Color(<span style="color: #333399; font-weight: bold;">int</span>.parse(buffer.toString(), <span style="color: #997700; font-weight: bold;">radix:</span> <span style="color: #6600ee; font-weight: bold;">16</span>));
}
}
</pre><pre style="line-height: 125%; margin: 0px;"><br /></pre><pre style="line-height: 125%; margin: 0px;"><br /></pre><pre style="line-height: 125%; margin: 0px;"><br /></pre><pre style="line-height: 125%; margin: 0px;"><b>Screenshot :</b></pre><pre style="line-height: 125%; margin: 0px;"><b><br /></b></pre><pre style="line-height: 125%; margin: 0px;"><b><br /></b></pre><pre style="line-height: 125%; margin: 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn75UwkwFpqeVJ2r-BwOEbbneecqk-2OBpYk6LpWMfiqT_IyvX0Yffo98SI8NudhAzyX8sZCM4NNbrt-gTNbpMr1BgZxPIDUEwhTUdwIAikSoLYD1SwRKq8FPONekOCSZVe3pLxHw_oLbcD6ZZomn1q8C5W1NF3yVRo4w4s_6D9sJLk0dq0xUd4P3TFw/s2532/Simulator%20Screen%20Shot%20-%20iPhone%2013%20Pro%20-%202022-12-30%20at%2001.39.07.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="2532" data-original-width="1170" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn75UwkwFpqeVJ2r-BwOEbbneecqk-2OBpYk6LpWMfiqT_IyvX0Yffo98SI8NudhAzyX8sZCM4NNbrt-gTNbpMr1BgZxPIDUEwhTUdwIAikSoLYD1SwRKq8FPONekOCSZVe3pLxHw_oLbcD6ZZomn1q8C5W1NF3yVRo4w4s_6D9sJLk0dq0xUd4P3TFw/w296-h640/Simulator%20Screen%20Shot%20-%20iPhone%2013%20Pro%20-%202022-12-30%20at%2001.39.07.png" width="296" /></a></div><br /><b><br /></b></pre></div>
Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com0tag:blogger.com,1999:blog-1368316095367596493.post-35947998684073581802022-12-30T01:25:00.003+05:302022-12-30T01:25:28.849+05:30How to use LinearGradinet with transparent AppBar<p> </p>
<!--HTML generated using hilite.me--><div style="background: rgb(255, 255, 255); border-color: gray; border-image: initial; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0px;"><span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:flutter/material.dart'</span>;
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">RegisterScreen</span> extends StatefulWidget {
const RegisterScreen({Key<span style="background-color: #ffaaaa; color: red;">?</span> key}) : <span style="color: #007020;">super</span>(key: key);
<span style="color: #555555; font-weight: bold;">@override</span>
_RegisterScreenState createState() <span style="color: #333333;">=></span> _RegisterScreenState();
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">_RegisterScreenState</span> extends State<span style="color: #333333;"><</span>RegisterScreen<span style="color: #333333;">></span> {
<span style="color: #555555; font-weight: bold;">@override</span>
Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
backgroundColor: Colors<span style="color: #333333;">.</span>transparent,
elevation: <span style="color: #0000dd; font-weight: bold;">0</span>,
title: Text(<span style="background-color: #fff0f0;">"AppBar Title"</span>),
),
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment<span style="color: #333333;">.</span>topCenter,
end: Alignment<span style="color: #333333;">.</span>bottomCenter,
colors: [
HexColor<span style="color: #333333;">.</span>hexToColor(<span style="background-color: #fff0f0;">"#D76984"</span>),
HexColor<span style="color: #333333;">.</span>hexToColor(<span style="background-color: #fff0f0;">"#2369C0"</span>)
]),
),
));
}
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">HexColor</span> {
static hexToColor(String hexString) {
final <span style="color: #007020;">buffer</span> <span style="color: #333333;">=</span> StringBuffer();
<span style="color: #008800; font-weight: bold;">if</span> (hexString<span style="color: #333333;">.</span>length <span style="color: #333333;">==</span> <span style="color: #0000dd; font-weight: bold;">6</span> <span style="color: #333333;">||</span> hexString<span style="color: #333333;">.</span>length <span style="color: #333333;">==</span> <span style="color: #0000dd; font-weight: bold;">7</span>) <span style="color: #007020;">buffer</span><span style="color: #333333;">.</span>write(<span style="background-color: #fff0f0;">'FF'</span>);
<span style="color: #007020;">buffer</span><span style="color: #333333;">.</span>write(hexString<span style="color: #333333;">.</span>replaceFirst(<span style="background-color: #fff0f0;">'#'</span>, <span style="background-color: #fff0f0;">''</span>));
<span style="color: #008800; font-weight: bold;">return</span> Color(<span style="color: #007020;">int</span><span style="color: #333333;">.</span>parse(<span style="color: #007020;">buffer</span><span style="color: #333333;">.</span>toString(), radix: <span style="color: #0000dd; font-weight: bold;">16</span>));
}
}
</pre><pre style="line-height: 125%; margin: 0px;"><br /></pre><pre style="line-height: 125%; margin: 0px;"><br /></pre><pre style="line-height: 125%; margin: 0px;">ScreenShot :</pre><pre style="line-height: 125%; margin: 0px;"><br /></pre><pre style="line-height: 125%; margin: 0px;"><br /></pre><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil7Qgwxd21ZXQ-4TBeBwQBSWxDR_R8oVtlc50ypv0OzL5Gh3MHjfCMPcvaV2l_WCKimY4_KVdN9ERrhgSb4GCD2XeHp2Fdv5hstV67jPghhHY2hE9F04i9hOJ_s--3nlF9AjV23pnbQp4J3J84EufzvMs8xBrE_WhsVvBegrHg8KJ5Zwg67cCNa0PYKQ/s2532/gradient_full_screen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="2532" data-original-width="1170" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil7Qgwxd21ZXQ-4TBeBwQBSWxDR_R8oVtlc50ypv0OzL5Gh3MHjfCMPcvaV2l_WCKimY4_KVdN9ERrhgSb4GCD2XeHp2Fdv5hstV67jPghhHY2hE9F04i9hOJ_s--3nlF9AjV23pnbQp4J3J84EufzvMs8xBrE_WhsVvBegrHg8KJ5Zwg67cCNa0PYKQ/w296-h640/gradient_full_screen.png" width="296" /></a></div><br /><pre style="line-height: 125%; margin: 0px;"><br /></pre></div>
Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com0tag:blogger.com,1999:blog-1368316095367596493.post-89410565916355981092020-07-27T19:32:00.002+05:302020-09-22T19:36:37.847+05:30create pdf file in flutter<div dir="ltr" style="text-align: left;" trbidi="on">
<pre style="background-color: white; font-family: consolas; font-size: 9.8pt;"><span style="color: navy; font-weight: bold;"><br /></span></pre><pre style="background-color: white; font-family: consolas; font-size: 9.8pt;"><span class="hljs-attr" style="box-sizing: border-box; color: #333333; font-family: "Roboto Mono", "Source Code Pro", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; font-size: 11.9px;">dependencies:</span><span style="background-color: #f8f8f8; color: #333333; font-family: "Roboto Mono", "Source Code Pro", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; font-size: 11.9px;">
</span><span class="hljs-attr" style="box-sizing: border-box; color: #333333; font-family: "Roboto Mono", "Source Code Pro", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; font-size: 11.9px;"> </span><span style="box-sizing: border-box; color: #333333; font-family: "Roboto Mono", "Source Code Pro", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; font-size: 11.9px;"><span class="hljs-attr" style="box-sizing: border-box;">pdf:</span> <span class="hljs-string" style="box-sizing: border-box; color: #dd1144;">^1.9.0</span></span></pre><pre style="background-color: white; font-family: consolas; font-size: 9.8pt;"><span style="color: navy; font-weight: bold;"><br /></span></pre><pre style="background-color: white; font-family: consolas; font-size: 9.8pt;"><span style="color: navy;"><u><b>CreatePdf.dart </b></u></span></pre><pre style="background-color: white; font-family: consolas; font-size: 9.8pt;"><span style="color: navy; font-weight: bold;"><br /></span></pre><pre style="background-color: white; font-family: consolas; font-size: 9.8pt;"><span style="color: navy; font-weight: bold;">import </span><span style="color: green; font-weight: bold;">'dart:io'</span>;
<span style="color: navy; font-weight: bold;">import </span><span style="color: green; font-weight: bold;">'package:flutter/material.dart'</span>;
<span style="color: navy; font-weight: bold;">import </span><span style="color: green; font-weight: bold;">'package:image/image.dart'</span>;
<span style="color: navy; font-weight: bold;">import </span><span style="color: green; font-weight: bold;">'package:movements/Utils.dart'</span>;
<span style="color: navy; font-weight: bold;">import </span><span style="color: green; font-weight: bold;">'package:path_provider/path_provider.dart'</span>;
<span style="color: navy; font-weight: bold;">import </span><span style="color: green; font-weight: bold;">'package:pdf/pdf.dart'</span>;
<span style="color: navy; font-weight: bold;">import </span><span style="color: green; font-weight: bold;">'package:pdf/widgets.dart' </span><span style="color: navy; font-weight: bold;">as </span>pw;
<span style="color: navy; font-weight: bold;">class </span>CreatePdf <span style="color: navy; font-weight: bold;">extends </span>StatefulWidget {
<span style="color: olive;">@override</span><span style="color: olive;"> </span>_CreatePdfState createState() => <span style="color: #2196f3;">_CreatePdfState</span>();
}
<span style="color: navy; font-weight: bold;">class </span>_CreatePdfState <span style="color: navy; font-weight: bold;">extends </span>State<CreatePdf> {
<span style="color: olive;">@override</span><span style="color: olive;"> </span><span style="color: navy; font-weight: bold;">void </span>initState() {
<span style="color: grey; font-style: italic;">// </span><span style="color: #0073bf; font-style: italic; font-weight: bold;">TODO: implement initState</span><span style="color: #0073bf; font-style: italic; font-weight: bold;"> </span><span style="color: navy; font-weight: bold;">super</span>.initState();
}
<span style="color: olive;">@override</span><span style="color: olive;"> </span>Widget build(BuildContext context) {
<span style="color: navy; font-weight: bold;">return </span><span style="color: #2196f3;">Scaffold</span>(
appBar: <span style="color: #2196f3;">AppBar</span>(
title: <span style="color: #2196f3;">Text</span>(<span style="color: green; font-weight: bold;">"Create PDF"</span>),
elevation: <span style="color: blue;">.1</span>,
),
body: <span style="color: #2196f3;">Center</span>(
child: <span style="color: #2196f3;">Container</span>(
child: <span style="color: #2196f3;">FlatButton</span>(
onPressed: () {
createPdf();
},
child: <span style="color: #2196f3;">Text</span>(<span style="color: green; font-weight: bold;">"Create PDF"</span>)),
),
),
);
}
Future createPdf() <span style="color: navy; font-weight: bold;">async </span>{
<span style="color: navy; font-weight: bold;">final </span>pdf = pw.Document();
pdf.addPage(pw.Page(
pageFormat: PdfPageFormat.<span style="color: #660e7a; font-style: italic;">a4</span>,
build: (pw.Context context) {
<span style="color: navy; font-weight: bold;">return </span>pw.Center(
child: pw.Text(<span style="color: green; font-weight: bold;">"Hello World"</span>),
); <span style="color: grey; font-style: italic;">// Center</span><span style="color: grey; font-style: italic;"> </span>}));
<span style="color: navy; font-weight: bold;">var </span>number = Utils.<span style="font-style: italic;">getRandomNumber</span>(<span style="color: blue;">4</span>);
<span style="color: navy; font-weight: bold;">final </span>output =
<span style="color: navy; font-weight: bold;">await </span>getExternalStorageDirectory(); <span style="color: grey; font-style: italic;">// use the [path_provider (https://pub.dartlang.org/packages/path_provider) library:</span><span style="color: grey; font-style: italic;"> </span><span style="color: navy; font-weight: bold;">final </span>file = <span style="color: #2196f3;">File</span>(<span style="color: green; font-weight: bold;">"</span>${output.<span style="color: #660e7a; font-weight: bold;">path</span>}<span style="color: green; font-weight: bold;">/example" </span>+ number.toString() + <span style="color: green; font-weight: bold;">".pdf"</span>);
<span style="color: navy; font-weight: bold;">await </span>file.writeAsBytes(pdf.save());
}
}</pre>
</div>
Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com2tag:blogger.com,1999:blog-1368316095367596493.post-19914339632708628382020-03-19T15:00:00.006+05:302023-06-08T14:45:41.217+05:30Flutter Keystore generate command<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<br />
Go to Java installation folder bin,<br />
<br />
Now use the below keytool command to generate keystore file. Go to the java bin path in command line tool and use below command<br />
<br /><b><br /></b>
<b>keytool -genkey -v -keystore "D:/AppkeyStore.jks" -keyalg RSA -keysize 2048 -validity 10000 -alias "AppAliasName"</b></div><div dir="ltr" style="text-align: left;" trbidi="on"><b><br /></b></div><div dir="ltr" style="text-align: left;" trbidi="on"><b>MAC System</b></div><div dir="ltr" style="text-align: left;" trbidi="on"><b><br /></b></div><div dir="ltr" style="text-align: left;" trbidi="on"><p class="p1" style="font-family: "Helvetica Neue"; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-size: 13px; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="Apple-converted-space"> </span><b>keytool -genkey -v -keystore </b>/Users/pratapkumar/Desktop<b>/AppkeyStore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias </b><b>AppAliasName</b></p>
<b><br /></b>
<br />
To check expiration of the jsk file.<br />
<br />
<b>keytool -list -v -keystore </b><b>AppkeyStore</b><b>.jks</b></div><div dir="ltr" style="text-align: left;" trbidi="on"><b><br /></b></div><div dir="ltr" style="text-align: left;" trbidi="on"><br /></div><div dir="ltr" style="text-align: left;" trbidi="on"><br /></div><div dir="ltr" style="text-align: left;" trbidi="on"><br /></div><div dir="ltr" style="text-align: left;" trbidi="on"><br /></div><div dir="ltr" style="text-align: left;" trbidi="on"><p class="p1" style="font-family: Menlo; font-size: 11px; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">keytool -importkeystore -srckeystore /Users/pratapkumar/Desktop/shary/sharyAppkeyStore.jks -destkeystore /Users/pratapkumar/Desktop/shary/sharyAppkeyStore.jks -deststoretype pkcs12</span></p></div>
Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com1tag:blogger.com,1999:blog-1368316095367596493.post-49621635514815625822019-05-30T14:13:00.000+05:302019-08-19T12:30:17.692+05:30Flutter GPS Location<div dir="ltr" style="text-align: left;" trbidi="on">
In this tutorial , we try to fetch phone GPS Location.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcaf1C9dcMsFhvqZY385lH4hMztlghkmNBl9y7Kg7GLgM2UMrrwI2Q7CLCiP0WRp7zNY0AIW3FPOLl0qjcEYaEs2c9e5MPtMLOGdeNiOghlYjFbYjjD3B8IOvkAalucFZlH60aSi3yNOMB/s1600/Screenshot_2019-05-30-14-12-14-201_com.pratap.flutter_app_sample.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="800" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcaf1C9dcMsFhvqZY385lH4hMztlghkmNBl9y7Kg7GLgM2UMrrwI2Q7CLCiP0WRp7zNY0AIW3FPOLl0qjcEYaEs2c9e5MPtMLOGdeNiOghlYjFbYjjD3B8IOvkAalucFZlH60aSi3yNOMB/s320/Screenshot_2019-05-30-14-12-14-201_com.pratap.flutter_app_sample.png" width="160" /></a></div>
<br />
<br />
I used this library in pubspec.yaml file under dependencies<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"><pre style="font-family: "Courier New"; font-size: 9pt;"><span style="color: navy; font-weight: bold;">dependencies</span>:
<a href="https://pub.dev/packages/location" target="_blank"> <span style="color: navy; font-weight: bold;">location</span>: ^2.3.5</a></pre>
<pre style="font-family: "Courier New"; font-size: 9pt;"></pre>
</pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"><h3 class="hash-header" id="android" style="box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 1.25em; line-height: 1.25; margin-bottom: 16px; margin-top: 24px; white-space: normal;">
Android <a class="hash-link" href="https://pub.dev/packages/location#android" style="box-sizing: border-box; color: #cccccc; cursor: pointer; font-weight: 500; opacity: 1; text-decoration-line: none; transition: opacity 0.5s ease-in-out 0.1s;">#</a></h3>
<div style="box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; margin-bottom: 16px; white-space: normal;">
In order to use this plugin in Android, you have to add this permission in AndroidManifest.xml :</div>
<pre style="background-color: #f6f8fa; border-radius: 3px; box-sizing: border-box; font-size: 13.6px; line-height: 1.45; margin-bottom: 16px; overflow-wrap: normal; overflow: auto; padding: 16px;"><code class="language-xml hljs" style="background: transparent; border-radius: 3px; border: 0px; box-sizing: border-box; color: #333333; display: inline; font-family: "Source Code Pro", Menlo, monospace; font-size: 13.6px; line-height: inherit; margin: 0px; overflow-wrap: normal; overflow: visible; padding: 0px; word-break: normal;"><span class="hljs-tag" style="box-sizing: border-box; color: navy;"><<span class="hljs-name" style="box-sizing: border-box;">uses-permission</span> <span class="hljs-attr" style="box-sizing: border-box; color: teal;">android:name</span>=<span class="hljs-string" style="box-sizing: border-box; color: #dd1144;">"android.permission.ACCESS_FINE_LOCATION"</span> /></span>
</code></pre>
<div style="box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; margin-bottom: 16px; white-space: normal;">
Permission check for Android 6+ was added.</div>
<h3 class="hash-header" id="ios" style="box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 1.25em; line-height: 1.25; margin-bottom: 16px; margin-top: 24px; white-space: normal;">
iOS <a class="hash-link" href="https://pub.dev/packages/location#ios" style="box-sizing: border-box; color: #cccccc; cursor: pointer; font-weight: 500; opacity: 0; text-decoration-line: none; transition: opacity 0.5s ease-in-out 0.1s;">#</a></h3>
<div style="box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; margin-bottom: 16px; white-space: normal;">
And to use it in iOS, you have to add this permission in Info.plist :</div>
<pre style="background-color: #f6f8fa; border-radius: 3px; box-sizing: border-box; font-size: 13.6px; line-height: 1.45; margin-bottom: 16px; overflow-wrap: normal; overflow: auto; padding: 16px;"><code class="language-xml hljs" style="background: transparent; border-radius: 3px; border: 0px; box-sizing: border-box; color: #333333; display: inline; font-family: "Source Code Pro", Menlo, monospace; font-size: 13.6px; line-height: inherit; margin: 0px; overflow-wrap: normal; overflow: visible; padding: 0px; word-break: normal;">NSLocationWhenInUseUsageDescription
NSLocationAlwaysUsageDescription
</code></pre>
<div style="box-sizing: border-box; font-family: Roboto, sans-serif; font-size: 16px; margin-bottom: 16px; white-space: normal;">
<strong style="box-sizing: border-box;">Warning:</strong> there is a currently a bug in iOS simulator in which you have to manually select a Location several in order for the Simulator to actually send data. Please keep that in mind when testing in iOS simulator.</div>
<div>
</div>
<div>
</div>
</pre>
<br />
<b><u>main.dart</u></b><br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:flutter/material.dart'</span>;
<span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:flutter_app_sample/GetLocationPage.dart'</span>;
<span style="color: #333399; font-weight: bold;">void</span> main() <span style="color: #333333;">=></span> runApp(MyApp());
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">MyApp</span> <span style="color: #008800; font-weight: bold;">extends</span> StatelessWidget {
<span style="color: #888888;">// This widget is the root of your application.</span>
<span style="background-color: #ffaaaa; color: red;">@</span>override
Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> MaterialApp(
<span style="color: #997700; font-weight: bold;">title:</span> <span style="background-color: #fff0f0;">'Flutter GPS'</span>,
<span style="color: #997700; font-weight: bold;">theme:</span> ThemeData(
<span style="color: #997700; font-weight: bold;">primarySwatch:</span> Colors.blue,
),
<span style="color: #997700; font-weight: bold;">home:</span> GetLocationPage(),
);
}
}
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<u><br /></u>
<br />
<pre style="background-color: white; line-height: 16.25px;"><span style="color: #bb0066; font-weight: bold;"><u>GetLocationPage.dart</u></span></pre>
<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:flutter/material.dart'</span>;
<span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:location/location.dart'</span>;
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">GetLocationPage</span> <span style="color: #008800; font-weight: bold;">extends</span> StatefulWidget {
<span style="background-color: #ffaaaa; color: red;">@</span>override
_GetLocationPageState createState() <span style="color: #333333;">=></span> _GetLocationPageState();
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">_GetLocationPageState</span> <span style="color: #008800; font-weight: bold;">extends</span> State<span style="color: #333333;"><</span>GetLocationPage<span style="color: #333333;">></span> {
LocationData _currentLocation;
Location _locationService <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> Location();
<span style="background-color: #ffaaaa; color: red;">@</span>override
<span style="color: #333399; font-weight: bold;">void</span> initState() {
<span style="color: #888888;">// TODO: implement initState</span>
<span style="color: #008800; font-weight: bold;">super</span>.initState();
_getLocation().then((value) {
setState(() {
_currentLocation <span style="color: #333333;">=</span> value;
});
});
}
<span style="background-color: #ffaaaa; color: red;">@</span>override
Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> Scaffold(
<span style="color: #997700; font-weight: bold;">appBar:</span> AppBar(),
<span style="color: #997700; font-weight: bold;">body:</span> Center(
<span style="color: #997700; font-weight: bold;">child:</span> Column(
<span style="color: #997700; font-weight: bold;">mainAxisAlignment:</span> MainAxisAlignment.center,
<span style="color: #997700; font-weight: bold;">children:</span> <span style="color: #333333;"><</span>Widget<span style="color: #333333;">></span>[
_currentLocation <span style="color: #333333;">==</span> <span style="color: #008800; font-weight: bold;">null</span>
<span style="color: #333333;">?</span> CircularProgressIndicator()
<span style="color: #333333;">:</span> Text(<span style="background-color: #fff0f0;">"Location:"</span> <span style="color: #333333;">+</span>
_currentLocation.latitude.toString() <span style="color: #333333;">+</span>
<span style="background-color: #fff0f0;">" "</span> <span style="color: #333333;">+</span>
_currentLocation.longitude.toString()),
Padding(
<span style="color: #997700; font-weight: bold;">padding:</span> <span style="color: #008800; font-weight: bold;">const</span> EdgeInsets.all(<span style="color: #6600ee; font-weight: bold;">8.0</span>),
<span style="color: #997700; font-weight: bold;">child:</span> RaisedButton(
<span style="color: #997700; font-weight: bold;">onPressed:</span> () {
_getLocation().then((value) {
setState(() {
_currentLocation <span style="color: #333333;">=</span> value;
});
});
},
<span style="color: #997700; font-weight: bold;">color:</span> Colors.blue,
<span style="color: #997700; font-weight: bold;">child:</span> Text(
<span style="background-color: #fff0f0;">"Get Location"</span>,
<span style="color: #997700; font-weight: bold;">style:</span> TextStyle(<span style="color: #997700; font-weight: bold;">color:</span> Colors.white),
),
),
),
],
),
),
);
}
Future<span style="color: #333333;"><</span>LocationData<span style="color: #333333;">></span> _getLocation() <span style="color: #333333;">as</span>ync {
LocationData currentLocation;
<span style="color: #008800; font-weight: bold;">try</span> {
currentLocation <span style="color: #333333;">=</span> await _locationService.getLocation();
} <span style="color: #008800; font-weight: bold;">catch</span> (e) {
currentLocation <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">null</span>;
}
<span style="color: #008800; font-weight: bold;">return</span> currentLocation;
}
}
</pre>
</td></tr>
</tbody></table>
</div>
</div>
Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com3tag:blogger.com,1999:blog-1368316095367596493.post-14563467416252564002018-12-06T13:24:00.004+05:302018-12-27T12:58:59.923+05:30Flutter Infinite ListView using Webservice<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
In this tutorial, we will see how to implement Infinite ListView in Flutter using webservice.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ObnHarvxdIH9CXFNT0pByQP8IYFLx0YklxvQr80v15gDsLRuCa1JDlgZbyOXO61u6oESejdH89BPyQzY6P91z-PxbQ0y4HsRvao88gFY9KHtck310W7iaIpZOywOGLV3xjhnT5cB1fs7/s1600/Flutter_Infinite_ListView.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="800" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ObnHarvxdIH9CXFNT0pByQP8IYFLx0YklxvQr80v15gDsLRuCa1JDlgZbyOXO61u6oESejdH89BPyQzY6P91z-PxbQ0y4HsRvao88gFY9KHtck310W7iaIpZOywOGLV3xjhnT5cB1fs7/s640/Flutter_Infinite_ListView.png" width="320" /></a></div>
<br />
<br />
Here is the reference link i used most of the code but i used webservice in this tutorial.<br />
<br />
Thanks to author of the tutorial<br />
https://marcinszalek.pl/flutter/infinite-dynamic-listview/<br />
<br />
<br />
Now Let see using this webservice<br />
https://api.randomuser.me/?page=1&results=20&seed=abc<br />
<br />
Here page number increments after scroll reaches the end.<br />
<br />
Demo:<br />
=======<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/3SGlTipa3O4/0.jpg" src="https://www.youtube.com/embed/3SGlTipa3O4?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />
<br />
main.dart<br />
==========<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:akeepo/randomuser_infinitelist.dart'</span>;
<span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:flutter/material.dart'</span>;
<span style="color: #333399; font-weight: bold;">void</span> main() <span style="color: #333333;">=></span> runApp(MyApp());
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">MyApp</span> <span style="color: #008800; font-weight: bold;">extends</span> StatelessWidget {
<span style="background-color: #ffaaaa; color: red;">@</span>override
Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> MaterialApp(
<span style="color: #997700; font-weight: bold;">title:</span> <span style="background-color: #fff0f0;">'Flutter'</span>,
<span style="color: #997700; font-weight: bold;">debugShowCheckedModeBanner:</span> <span style="color: #008800; font-weight: bold;">false</span>,
<span style="color: #997700; font-weight: bold;">theme:</span> ThemeData(
<span style="color: #997700; font-weight: bold;">primarySwatch:</span> Colors.blue,
),
<span style="color: #997700; font-weight: bold;">home:</span> InfiniteUsersList(),
);
}
}
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
randomuser_infinitelist.dart<br />
=============================<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'dart:async'</span>;
<span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'dart:convert'</span>;
<span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:flutter/material.dart'</span>;
<span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:http/http.dart'</span> <span style="color: #008800; font-weight: bold;">as</span> http;
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">InfiniteUsersList</span> <span style="color: #008800; font-weight: bold;">extends</span> StatefulWidget {
<span style="color: #008800; font-weight: bold;">static</span> <span style="color: #333399; font-weight: bold;">String</span> tag <span style="color: #333333;">=</span> <span style="background-color: #fff0f0;">'users-page'</span>;
<span style="background-color: #ffaaaa; color: red;">@</span>override
State<span style="color: #333333;"><</span>StatefulWidget<span style="color: #333333;">></span> createState() {
<span style="color: #008800; font-weight: bold;">return</span> <span style="color: #008800; font-weight: bold;">new</span> _InfiniteUsersListState();
}
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">_InfiniteUsersListState</span> <span style="color: #008800; font-weight: bold;">extends</span> State<span style="color: #333333;"><</span>InfiniteUsersList<span style="color: #333333;">></span> {
List<span style="color: #333333;"><</span>User<span style="color: #333333;">></span> users <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> List<span style="color: #333333;"><</span>User<span style="color: #333333;">></span>();
ScrollController _scrollController <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> ScrollController();
<span style="color: #333399; font-weight: bold;">bool</span> isPerformingRequest <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">false</span>;
<span style="color: #333399; font-weight: bold;">int</span> pageNumber <span style="color: #333333;">=</span> <span style="color: #6600ee; font-weight: bold;">0</span>;
<span style="background-color: #ffaaaa; color: red;">@</span>override
<span style="color: #333399; font-weight: bold;">void</span> initState() {
<span style="color: #008800; font-weight: bold;">super</span>.initState();
<span style="color: #888888;">// Loading initial data or first request to get the data</span>
_getMoreData();
<span style="color: #888888;">// Loading data after scroll reaches end of the list</span>
_scrollController.addListener(() {
<span style="color: #008800; font-weight: bold;">if</span> (_scrollController.position.pixels <span style="color: #333333;">==</span>
_scrollController.position.maxScrollExtent) {
_getMoreData();
}
});
}
<span style="color: #888888;">// to show progressbar while loading data in background</span>
Widget _buildProgressIndicator() {
<span style="color: #008800; font-weight: bold;">return</span> <span style="color: #008800; font-weight: bold;">new</span> Padding(
<span style="color: #997700; font-weight: bold;">padding:</span> <span style="color: #008800; font-weight: bold;">const</span> EdgeInsets.all(<span style="color: #6600ee; font-weight: bold;">8.0</span>),
<span style="color: #997700; font-weight: bold;">child:</span> <span style="color: #008800; font-weight: bold;">new</span> Center(
<span style="color: #997700; font-weight: bold;">child:</span> <span style="color: #008800; font-weight: bold;">new</span> Opacity(
<span style="color: #997700; font-weight: bold;">opacity:</span> isPerformingRequest <span style="color: #333333;">?</span> <span style="color: #6600ee; font-weight: bold;">1.0</span> <span style="color: #333333;">:</span> <span style="color: #6600ee; font-weight: bold;">0.0</span>,
<span style="color: #997700; font-weight: bold;">child:</span> <span style="color: #008800; font-weight: bold;">new</span> CircularProgressIndicator(),
),
),
);
}
<span style="background-color: #ffaaaa; color: red;">@</span>override
<span style="color: #333399; font-weight: bold;">void</span> dispose() {
_scrollController.dispose();
<span style="color: #008800; font-weight: bold;">super</span>.dispose();
}
<span style="color: #888888;">// Webservice request to load 20 users data using paging</span>
Future<span style="color: #333333;"><</span>List<span style="color: #333333;"><</span>User<span style="color: #333333;">>></span> _getUsers() <span style="color: #333333;">as</span>ync {
List<span style="color: #333333;"><</span>User<span style="color: #333333;">></span> users <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> List<span style="color: #333333;"><</span>User<span style="color: #333333;">></span>();
setState(() {
pageNumber<span style="color: #333333;">++</span>;
});
<span style="color: #333399; font-weight: bold;">String</span> url <span style="color: #333333;">=</span>
<span style="background-color: #fff0f0;">"https://api.randomuser.me/?page=</span><span style="background-color: #eeeeee;">$</span>pageNumber<span style="background-color: #fff0f0;">&results=20&seed=abc"</span>;
print(url);
<span style="color: #008800; font-weight: bold;">var</span> response <span style="color: #333333;">=</span> await http.<span style="color: #008800; font-weight: bold;">get</span>(url);
<span style="color: #008800; font-weight: bold;">var</span> jsonData <span style="color: #333333;">=</span> json.decode(response.body);
print(jsonData);
<span style="color: #008800; font-weight: bold;">var</span> usersData <span style="color: #333333;">=</span> jsonData[<span style="background-color: #fff0f0;">"results"</span>];
<span style="color: #008800; font-weight: bold;">for</span> (<span style="color: #008800; font-weight: bold;">var</span> user <span style="color: #008800; font-weight: bold;">in</span> usersData) {
User newUser <span style="color: #333333;">=</span> User(user[<span style="background-color: #fff0f0;">"name"</span>][<span style="background-color: #fff0f0;">"first"</span>] <span style="color: #333333;">+</span> user[<span style="background-color: #fff0f0;">"name"</span>][<span style="background-color: #fff0f0;">"last"</span>],
user[<span style="background-color: #fff0f0;">"email"</span>], user[<span style="background-color: #fff0f0;">"picture"</span>][<span style="background-color: #fff0f0;">"large"</span>], user[<span style="background-color: #fff0f0;">"phone"</span>]);
users.add(newUser);
}
<span style="color: #008800; font-weight: bold;">return</span> users;
}
_getMoreData() <span style="color: #333333;">as</span>ync {
<span style="color: #008800; font-weight: bold;">if</span> (<span style="color: #333333;">!</span>isPerformingRequest) {
setState(() {
isPerformingRequest <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">true</span>;
});
List<span style="color: #333333;"><</span>User<span style="color: #333333;">></span> newEntries <span style="color: #333333;">=</span> await _getUsers(); <span style="color: #888888;">//returns empty list</span>
<span style="color: #008800; font-weight: bold;">if</span> (newEntries.isEmpty) {
<span style="color: #333399; font-weight: bold;">double</span> edge <span style="color: #333333;">=</span> <span style="color: #6600ee; font-weight: bold;">50.0</span>;
<span style="color: #333399; font-weight: bold;">double</span> offsetFromBottom <span style="color: #333333;">=</span> _scrollController.position.maxScrollExtent <span style="color: #333333;">-</span>
_scrollController.position.pixels;
<span style="color: #008800; font-weight: bold;">if</span> (offsetFromBottom <span style="color: #333333;"><</span> edge) {
_scrollController.animateTo(
_scrollController.offset <span style="color: #333333;">-</span> (edge <span style="color: #333333;">-</span> offsetFromBottom),
<span style="color: #997700; font-weight: bold;">duration:</span> <span style="color: #008800; font-weight: bold;">new</span> Duration(<span style="color: #997700; font-weight: bold;">milliseconds:</span> <span style="color: #6600ee; font-weight: bold;">500</span>),
<span style="color: #997700; font-weight: bold;">curve:</span> Curves.easeOut);
}
}
setState(() {
users.addAll(newEntries);
isPerformingRequest <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">false</span>;
});
}
}
Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> Scaffold(
<span style="color: #997700; font-weight: bold;">appBar:</span> AppBar(
<span style="color: #997700; font-weight: bold;">title:</span> Text(<span style="background-color: #fff0f0;">'Users'</span>,
<span style="color: #997700; font-weight: bold;">style:</span>
TextStyle(<span style="color: #997700; font-weight: bold;">color:</span> Colors.white, <span style="color: #997700; font-weight: bold;">fontWeight:</span> FontWeight.bold))),
<span style="color: #997700; font-weight: bold;">body:</span> Container(
<span style="color: #997700; font-weight: bold;">child:</span> ListView.builder(
<span style="color: #997700; font-weight: bold;">shrinkWrap:</span> <span style="color: #008800; font-weight: bold;">true</span>,
<span style="color: #997700; font-weight: bold;">controller:</span> _scrollController,
<span style="color: #997700; font-weight: bold;">itemCount:</span> users.length <span style="color: #333333;">+</span> <span style="color: #6600ee; font-weight: bold;">1</span>,
<span style="color: #997700; font-weight: bold;">itemBuilder:</span> (BuildContext context, <span style="color: #333399; font-weight: bold;">int</span> index) {
<span style="color: #008800; font-weight: bold;">if</span> (index <span style="color: #333333;">==</span> users.length) {
<span style="color: #008800; font-weight: bold;">return</span> _buildProgressIndicator();
} <span style="color: #008800; font-weight: bold;">else</span> {
<span style="color: #008800; font-weight: bold;">return</span> ListTile(
<span style="color: #997700; font-weight: bold;">onTap:</span> () {
Navigator.push(
context,
<span style="color: #008800; font-weight: bold;">new</span> MaterialPageRoute(
<span style="color: #997700; font-weight: bold;">builder:</span> (context) <span style="color: #333333;">=></span>
UserDetailPage(users[index])));
},
<span style="color: #997700; font-weight: bold;">title:</span> Text(users[index].fullName),
<span style="color: #997700; font-weight: bold;">subtitle:</span> Text(users[index].mobileNumber),
<span style="color: #997700; font-weight: bold;">leading:</span> CircleAvatar(
<span style="color: #997700; font-weight: bold;">backgroundImage:</span> NetworkImage(users[index].imageUrl)),
);
}
})),
);
}
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">User</span> {
<span style="color: #008800; font-weight: bold;">final</span> <span style="color: #333399; font-weight: bold;">String</span> fullName;
<span style="color: #008800; font-weight: bold;">final</span> <span style="color: #333399; font-weight: bold;">String</span> email;
<span style="color: #008800; font-weight: bold;">final</span> <span style="color: #333399; font-weight: bold;">String</span> imageUrl;
<span style="color: #008800; font-weight: bold;">final</span> <span style="color: #333399; font-weight: bold;">String</span> mobileNumber;
User(<span style="color: #008800; font-weight: bold;">this</span>.fullName, <span style="color: #008800; font-weight: bold;">this</span>.email, <span style="color: #008800; font-weight: bold;">this</span>.imageUrl, <span style="color: #008800; font-weight: bold;">this</span>.mobileNumber);
}
<span style="color: #888888;">// User Detail Page</span>
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">UserDetailPage</span> <span style="color: #008800; font-weight: bold;">extends</span> StatelessWidget {
<span style="color: #008800; font-weight: bold;">final</span> User user;
UserDetailPage(<span style="color: #008800; font-weight: bold;">this</span>.user);
<span style="background-color: #ffaaaa; color: red;">@</span>override
Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> Scaffold(
<span style="color: #997700; font-weight: bold;">appBar:</span> AppBar(
<span style="color: #997700; font-weight: bold;">title:</span> Text(<span style="background-color: #fff0f0;">"User Details"</span>),
),
<span style="color: #997700; font-weight: bold;">body:</span> Center(
<span style="color: #997700; font-weight: bold;">child:</span> Text(
user.fullName,
<span style="color: #997700; font-weight: bold;">style:</span> TextStyle(<span style="color: #997700; font-weight: bold;">fontSize:</span> <span style="color: #6600ee; font-weight: bold;">35.0</span>),
),
),
);
}
}
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<br /></div>
Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com1tag:blogger.com,1999:blog-1368316095367596493.post-82759513319908859552018-09-17T15:16:00.002+05:302021-09-24T15:58:54.117+05:30Git Commands <div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: #fafafa; color: #444444; font-family: "roboto slab" , "times new roman" , serif; font-size: 14px; white-space: pre-wrap;"><b>Download git</b></span><br />
<span style="background-color: #fafafa; color: #444444; font-family: "roboto slab" , "times new roman" , serif;"><span style="font-size: 14px; white-space: pre-wrap;"><b>https://git-scm.com/</b></span></span><br />
<span style="background-color: #fafafa; color: #444444; font-family: "roboto slab" , "times new roman" , serif;"><b style="font-size: 14px; white-space: pre-wrap;"><br /></b></span>
<span style="color: #444444;"><span style="background-color: #fafafa; font-family: "roboto slab" , "times new roman" , serif;"><b style="font-size: 14px; white-space: pre-wrap;">if you want to add your project to bitbucket or github. you can use the following commands</b></span>
<span style="background-color: #fafafa; font-family: "roboto slab" , "times new roman" , serif; font-size: 14px; white-space: pre-wrap;"><b><br /></b></span>
<span style="background-color: #fafafa; font-family: "roboto slab" , "times new roman" , serif; font-size: 14px; white-space: pre-wrap;"><b><br /></b></span>
<span style="background-color: #fafafa; font-family: "roboto slab" , "times new roman" , serif; font-size: 14px; white-space: pre-wrap;"><b>Step 1: </b></span></span><br />
<span style="background-color: #fafafa; color: #444444; font-family: "roboto slab" , "times new roman" , serif; font-size: 14px; white-space: pre-wrap;">Right Click-> Git Bash Here or go to the Project folder if you are not using git GUI tools</span><br />
<span style="color: #444444;"><br style="background-color: #fafafa; font-family: "roboto slab", "times new roman", serif; font-size: 14px; white-space: pre-wrap;" /></span>
<span style="background-color: #fafafa; color: #444444; font-family: "roboto slab" , "times new roman" , serif; font-size: 14px; white-space: pre-wrap;"><b>Step 2: </b></span><br />
<span style="background-color: #fafafa; color: #444444; font-family: "roboto slab" , "times new roman" , serif; font-size: 14px; white-space: pre-wrap;">Type git init (For initializing git).</span><br />
<span style="color: #444444;"><br style="background-color: #fafafa; font-family: "roboto slab", "times new roman", serif; font-size: 14px; white-space: pre-wrap;" /></span>
<span style="background-color: #fafafa; color: #444444; font-family: "roboto slab" , "times new roman" , serif; font-size: 14px; white-space: pre-wrap;"><b>Step 3: </b></span><br />
<span style="background-color: #fafafa; color: #444444; font-family: "roboto slab" , "times new roman" , serif; font-size: 14px; white-space: pre-wrap;">Type git add -A (Get all files in the staging area).</span><br />
<span style="color: #444444;"><br style="background-color: #fafafa; font-family: "roboto slab", "times new roman", serif; font-size: 14px; white-space: pre-wrap;" /></span>
<span style="background-color: #fafafa; color: #444444; font-family: "roboto slab" , "times new roman" , serif; font-size: 14px; white-space: pre-wrap;"><b>Step 4: </b></span><br />
<span style="background-color: #fafafa; color: #444444; font-family: "roboto slab" , "times new roman" , serif; font-size: 14px; white-space: pre-wrap;">Type git commit -m "First Commit"(Commit Changes)</span><br />
<span style="color: #444444;"><br style="background-color: #fafafa; font-family: "roboto slab", "times new roman", serif; font-size: 14px; white-space: pre-wrap;" /></span>
<span style="background-color: #fafafa; color: #444444; font-family: "roboto slab" , "times new roman" , serif; font-size: 14px; white-space: pre-wrap;"><b>Step 5:</b> </span><br />
<span style="color: #444444;"><span style="background-color: #fafafa; font-family: "roboto slab" , "times new roman" , serif; font-size: 14px; white-space: pre-wrap;">Type git remote add origin https://..</span><a href="http://bitbucket.org/" rel="nofollow" style="background-color: #fafafa; font-family: "roboto slab", "times new roman", serif; font-size: 14px; white-space: pre-wrap;" target="_blank">bitbucket.org/</a><span style="background-color: #fafafa; font-family: "roboto slab" , "times new roman" , serif; font-size: 14px; white-space: pre-wrap;">../ABC.git (Your repo URL)</span></span><br />
<span style="color: #444444;"><br style="background-color: #fafafa; font-family: "roboto slab", "times new roman", serif; font-size: 14px; white-space: pre-wrap;" /></span>
<span style="background-color: #fafafa; color: #444444; font-family: "roboto slab" , "times new roman" , serif; font-size: 14px; white-space: pre-wrap;"><b>Step 6: </b></span><br />
<span style="background-color: #fafafa; color: #444444; font-family: "roboto slab" , "times new roman" , serif; font-size: 14px; white-space: pre-wrap;">Type git push -f origin master(your branch name)</span></div>
Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com0tag:blogger.com,1999:blog-1368316095367596493.post-68232465744158081202018-08-28T16:48:00.000+05:302018-09-19T17:02:46.784+05:30Flutter Navigation Drawer Example<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNGbVaXktWQQuQcp6QwrTV7f-UcEcW_f6B6XCkiN4WWCC-ooqbXXbyD5E0CaK04BrT1VB0psl6XzeWFhW25zsC5ksUHCnVBermeJAxEFP4CLPtqtA1BCfMfh-QqRB01Sz4q6pwkf8HTX_5/s1600/Screenshot_2018-08-28-16-44-09-940_com.infodat.akeepo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="800" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNGbVaXktWQQuQcp6QwrTV7f-UcEcW_f6B6XCkiN4WWCC-ooqbXXbyD5E0CaK04BrT1VB0psl6XzeWFhW25zsC5ksUHCnVBermeJAxEFP4CLPtqtA1BCfMfh-QqRB01Sz4q6pwkf8HTX_5/s320/Screenshot_2018-08-28-16-44-09-940_com.infodat.akeepo.png" width="160" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
main.dart</div>
<div>
=========</div>
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:flutter/material.dart'</span>;
<span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:akeepo/navdrawer.dart'</span>;
<span style="color: #333399; font-weight: bold;">void</span> main() <span style="color: #333333;">=></span> runApp(MyApp());
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">MyApp</span> <span style="color: #008800; font-weight: bold;">extends</span> StatelessWidget {
<span style="background-color: #ffaaaa; color: red;">@</span>override Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> MaterialApp(
<span style="color: #997700; font-weight: bold;">title:</span> <span style="background-color: #fff0f0;">'Flutter'</span>,
<span style="color: #997700; font-weight: bold;">debugShowCheckedModeBanner:</span> <span style="color: #008800; font-weight: bold;">false</span>,
<span style="color: #997700; font-weight: bold;">theme:</span> ThemeData(
<span style="color: #997700; font-weight: bold;">primarySwatch:</span> Colors.blue,
),
<span style="color: #997700; font-weight: bold;">home:</span> NavDrawer(),
);
}
}
</pre>
</div>
<br />
<br />
<div>
<br /></div>
<div>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">navdrawer.dart</pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">================</pre>
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:flutter/material.dart'</span>;
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">NavDrawer</span> <span style="color: #008800; font-weight: bold;">extends</span> StatefulWidget {
<span style="background-color: #ffaaaa; color: red;">@</span>override _NavDrawerState createState() <span style="color: #333333;">=></span> _NavDrawerState();
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">_NavDrawerState</span> <span style="color: #008800; font-weight: bold;">extends</span> State<span style="color: #333333;"><</span>NavDrawer<span style="color: #333333;">></span> {
<span style="background-color: #ffaaaa; color: red;">@</span>override Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> Scaffold(
<span style="color: #997700; font-weight: bold;">appBar:</span> AppBar(<span style="color: #997700; font-weight: bold;">title:</span> Text(<span style="background-color: #fff0f0;">"Nav Drawer"</span>)),
<span style="color: #997700; font-weight: bold;">drawer:</span> <span style="color: #008800; font-weight: bold;">new</span> Drawer(
<span style="color: #997700; font-weight: bold;">child:</span> <span style="color: #008800; font-weight: bold;">new</span> ListView(
<span style="color: #997700; font-weight: bold;">children:</span> <span style="color: #333333;"><</span>Widget<span style="color: #333333;">></span>[
<span style="color: #008800; font-weight: bold;">new</span> UserAccountsDrawerHeader(
<span style="color: #997700; font-weight: bold;">accountName:</span> <span style="color: #008800; font-weight: bold;">new</span> Text(<span style="background-color: #fff0f0;">"Pratap Kumar"</span>),
<span style="color: #997700; font-weight: bold;">accountEmail:</span> <span style="color: #008800; font-weight: bold;">new</span> Text(<span style="background-color: #fff0f0;">"kprathap23@gmail.com"</span>),
<span style="color: #997700; font-weight: bold;">decoration:</span> <span style="color: #008800; font-weight: bold;">new</span> BoxDecoration(
<span style="color: #997700; font-weight: bold;">image:</span> <span style="color: #008800; font-weight: bold;">new</span> DecorationImage(
<span style="color: #997700; font-weight: bold;">image:</span> <span style="color: #008800; font-weight: bold;">new</span> ExactAssetImage(<span style="background-color: #fff0f0;">'assets/images/lake.jpeg'</span>),
<span style="color: #997700; font-weight: bold;">fit:</span> BoxFit.cover,
),
),
<span style="color: #997700; font-weight: bold;">currentAccountPicture:</span> CircleAvatar(
<span style="color: #997700; font-weight: bold;">backgroundImage:</span> NetworkImage(
<span style="background-color: #fff0f0;">"https://randomuser.me/api/portraits/men/46.jpg"</span>)),
),
<span style="color: #008800; font-weight: bold;">new</span> ListTile(
<span style="color: #997700; font-weight: bold;">leading:</span> Icon(Icons.library_music),
<span style="color: #997700; font-weight: bold;">title:</span> <span style="color: #008800; font-weight: bold;">new</span> Text(<span style="background-color: #fff0f0;">"Music"</span>),
<span style="color: #997700; font-weight: bold;">onTap:</span> () {
Navigator.pop(context);
}),
<span style="color: #008800; font-weight: bold;">new</span> ListTile(
<span style="color: #997700; font-weight: bold;">leading:</span> Icon(Icons.movie),
<span style="color: #997700; font-weight: bold;">title:</span> <span style="color: #008800; font-weight: bold;">new</span> Text(<span style="background-color: #fff0f0;">"Movies"</span>),
<span style="color: #997700; font-weight: bold;">onTap:</span> () {
Navigator.pop(context);
}),
<span style="color: #008800; font-weight: bold;">new</span> ListTile(
<span style="color: #997700; font-weight: bold;">leading:</span> Icon(Icons.shopping_cart),
<span style="color: #997700; font-weight: bold;">title:</span> <span style="color: #008800; font-weight: bold;">new</span> Text(<span style="background-color: #fff0f0;">"Shopping"</span>),
<span style="color: #997700; font-weight: bold;">onTap:</span> () {
Navigator.pop(context);
}),
<span style="color: #008800; font-weight: bold;">new</span> ListTile(
<span style="color: #997700; font-weight: bold;">leading:</span> Icon(Icons.apps),
<span style="color: #997700; font-weight: bold;">title:</span> <span style="color: #008800; font-weight: bold;">new</span> Text(<span style="background-color: #fff0f0;">"Apps"</span>),
<span style="color: #997700; font-weight: bold;">onTap:</span> () {
Navigator.pop(context);
}),
<span style="color: #008800; font-weight: bold;">new</span> ListTile(
<span style="color: #997700; font-weight: bold;">leading:</span> Icon(Icons.dashboard),
<span style="color: #997700; font-weight: bold;">title:</span> <span style="color: #008800; font-weight: bold;">new</span> Text(<span style="background-color: #fff0f0;">"Docs"</span>),
<span style="color: #997700; font-weight: bold;">onTap:</span> () {
Navigator.pop(context);
}),
<span style="color: #008800; font-weight: bold;">new</span> ListTile(
<span style="color: #997700; font-weight: bold;">leading:</span> Icon(Icons.settings),
<span style="color: #997700; font-weight: bold;">title:</span> <span style="color: #008800; font-weight: bold;">new</span> Text(<span style="background-color: #fff0f0;">"Settings"</span>),
<span style="color: #997700; font-weight: bold;">onTap:</span> () {
Navigator.pop(context);
}),
<span style="color: #008800; font-weight: bold;">new</span> Divider(),
<span style="color: #008800; font-weight: bold;">new</span> ListTile(
<span style="color: #997700; font-weight: bold;">leading:</span> Icon(Icons.info),
<span style="color: #997700; font-weight: bold;">title:</span> <span style="color: #008800; font-weight: bold;">new</span> Text(<span style="background-color: #fff0f0;">"About"</span>),
<span style="color: #997700; font-weight: bold;">onTap:</span> () {
Navigator.pop(context);
}),
<span style="color: #008800; font-weight: bold;">new</span> ListTile(
<span style="color: #997700; font-weight: bold;">leading:</span> Icon(Icons.power_settings_new),
<span style="color: #997700; font-weight: bold;">title:</span> <span style="color: #008800; font-weight: bold;">new</span> Text(<span style="background-color: #fff0f0;">"Logout"</span>),
<span style="color: #997700; font-weight: bold;">onTap:</span> () {
Navigator.pop(context);
}),
],
),
),
);
}
}
</pre>
</div>
<br />
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"><pre style="font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="font-family: "Courier New"; font-size: 9pt;"></pre>
</pre>
</div>
</div>
Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com3tag:blogger.com,1999:blog-1368316095367596493.post-10379967327303473972018-08-28T15:34:00.000+05:302018-09-06T12:09:52.866+05:30Flutter BottomNavigation Example<div dir="ltr" style="text-align: left;" trbidi="on">
<b><br />
</b> <b><br />
</b> <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIJxDqsubylRNldgOnqgzGg2Fr1oL7dTTt_cfY_JGRkLmKB3_gyKSiRU9ZpF49kbU0IxVf-Ws9KKh4QGhNNU_4eE8uWako2i5ae4S2-9fe6WnFO6JlUkRf10MsJgWOouxFRureW2RYbkBE/s1600/Screenshot_2018-08-28-15-31-22-619_com.infodat.akeepo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="800" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIJxDqsubylRNldgOnqgzGg2Fr1oL7dTTt_cfY_JGRkLmKB3_gyKSiRU9ZpF49kbU0IxVf-Ws9KKh4QGhNNU_4eE8uWako2i5ae4S2-9fe6WnFO6JlUkRf10MsJgWOouxFRureW2RYbkBE/s320/Screenshot_2018-08-28-15-31-22-619_com.infodat.akeepo.png" width="160" /></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRtVZ3BLfgH3M-Fzm-xnW-UYgVh_ieY_5P09YSO0aLwo2K7yh9FqkZTl-NQBQHX35rTtVsOWPK-H7v541er3de8URNuIesnomJ9DUTm7HTNoef3U4Tv1-O9YBfovD6jVHUFYRRqNQyqcPh/s1600/Screenshot_2018-08-28-15-31-28-103_com.infodat.akeepo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="1600" data-original-width="800" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRtVZ3BLfgH3M-Fzm-xnW-UYgVh_ieY_5P09YSO0aLwo2K7yh9FqkZTl-NQBQHX35rTtVsOWPK-H7v541er3de8URNuIesnomJ9DUTm7HTNoef3U4Tv1-O9YBfovD6jVHUFYRRqNQyqcPh/s320/Screenshot_2018-08-28-15-31-28-103_com.infodat.akeepo.png" width="160" /></a><br />
<b><br />
</b> <b><br />
</b> <b>main.dart</b><br />
<b>=======</b><br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:flutter/material.dart'</span>;
<span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:akeepo/bottomnavigation.dart'</span>;
<span style="color: #333399; font-weight: bold;">void</span> main() <span style="color: #333333;">=></span> runApp(MyApp());
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">MyApp</span> <span style="color: #008800; font-weight: bold;">extends</span> StatelessWidget {
<span style="background-color: #ffaaaa; color: red;">@</span>override Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> MaterialApp(
<span style="color: #997700; font-weight: bold;">title:</span> <span style="background-color: #fff0f0;">'Flutter'</span>,
<span style="color: #997700; font-weight: bold;">debugShowCheckedModeBanner:</span> <span style="color: #008800; font-weight: bold;">false</span>,
<span style="color: #997700; font-weight: bold;">theme:</span> ThemeData(
<span style="color: #997700; font-weight: bold;">primarySwatch:</span> Colors.blue,
),
<span style="color: #997700; font-weight: bold;">home:</span> BottomNavigation(),
);
}
}
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<br />
<b style="background-color: white; font-family: "times new roman";">bottomnavigation.dart</b><br />
<h2 style="background-color: white; font-family: "Courier New"; font-size: 9pt; text-align: left;">
<div style="font-family: "Times New Roman"; font-size: medium; font-weight: 400;">
<b>==================</b></div>
</h2>
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:flutter/material.dart'</span>;
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">BottomNavigation</span> <span style="color: #008800; font-weight: bold;">extends</span> StatefulWidget {
<span style="background-color: #ffaaaa; color: red;">@</span>override _BottomNavigation createState() <span style="color: #333333;">=></span> <span style="color: #008800; font-weight: bold;">new</span> _BottomNavigation();
}
<span style="color: #888888;">// SingleTickerProviderStateMixin is used for animation</span>
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">_BottomNavigation</span> <span style="color: #008800; font-weight: bold;">extends</span> State<span style="color: #333333;"><</span>BottomNavigation<span style="color: #333333;">></span>
with SingleTickerProviderStateMixin {
<span style="color: #333399; font-weight: bold;">int</span> _currentIndex <span style="color: #333333;">=</span> <span style="color: #6600ee; font-weight: bold;">0</span>;
<span style="color: #333399; font-weight: bold;">void</span> onTabTapped(<span style="color: #333399; font-weight: bold;">int</span> index) {
setState(() {
_currentIndex <span style="color: #333333;">=</span> index;
});
}
<span style="color: #008800; font-weight: bold;">final</span> List<span style="color: #333333;"><</span>Widget<span style="color: #333333;">></span> _children <span style="color: #333333;">=</span> [
<span style="color: #008800; font-weight: bold;">new</span> DialledCallsPage(),
<span style="color: #008800; font-weight: bold;">new</span> MissedCallsPage(),
<span style="color: #008800; font-weight: bold;">new</span> ReceivedCallsPage()
];
<span style="background-color: #ffaaaa; color: red;">@</span>override Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> <span style="color: #008800; font-weight: bold;">new</span> Scaffold(
<span style="color: #888888;">// Appbar appBar: new AppBar(</span>
<span style="color: #888888;">// Title title: new Text("Bottom Navigation"),</span>
<span style="color: #888888;">// Set the background color of the App Bar backgroundColor: Colors.blue,</span>
),
<span style="color: #997700; font-weight: bold;">body:</span> _children[_currentIndex],
<span style="color: #888888;">// Set the bottom navigation bar </span>
<span style="color: #997700; font-weight: bold;">bottomNavigationBar:</span> BottomNavigationBar(
<span style="color: #997700; font-weight: bold;">onTap:</span> onTabTapped,
<span style="color: #997700; font-weight: bold;">currentIndex:</span> _currentIndex,
<span style="color: #997700; font-weight: bold;">items:</span> [
BottomNavigationBarItem(
<span style="color: #997700; font-weight: bold;">icon:</span> <span style="color: #008800; font-weight: bold;">new</span> Icon(Icons.call_made),
<span style="color: #997700; font-weight: bold;">title:</span> <span style="color: #008800; font-weight: bold;">new</span> Text(<span style="background-color: #fff0f0;">'All Calls'</span>)),
BottomNavigationBarItem(
<span style="color: #997700; font-weight: bold;">icon:</span> <span style="color: #008800; font-weight: bold;">new</span> Icon(Icons.call_missed), <span style="color: #997700; font-weight: bold;">title:</span> <span style="color: #008800; font-weight: bold;">new</span> Text(<span style="background-color: #fff0f0;">'Missed'</span>)),
BottomNavigationBarItem(
<span style="color: #997700; font-weight: bold;">icon:</span> <span style="color: #008800; font-weight: bold;">new</span> Icon(Icons.call_received),
<span style="color: #997700; font-weight: bold;">title:</span> <span style="color: #008800; font-weight: bold;">new</span> Text(<span style="background-color: #fff0f0;">'Received'</span>)),
]));
}
}
List<span style="color: #333333;"><</span>Contact<span style="color: #333333;">></span> missedCallContacts <span style="color: #333333;">=</span> [
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Pratap Kumar'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'pratap@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Jagadeesh'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Jagadeesh@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Srinivas'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Srinivas@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Narendra'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Narendra@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Sravan '</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Sravan@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Ranganadh'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Ranganadh@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Karthik'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Karthik@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Saranya'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Saranya@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Mahesh'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Mahesh@example.com'</span>),
];
List<span style="color: #333333;"><</span>Contact<span style="color: #333333;">></span> receivedCallContacts <span style="color: #333333;">=</span> [
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Pratap Kumar'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'pratap@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Jagadeesh'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Jagadeesh@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Srinivas'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Srinivas@example.com'</span>),
];
List<span style="color: #333333;"><</span>Contact<span style="color: #333333;">></span> dialledCallContacts <span style="color: #333333;">=</span> [
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Ranganadh'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Ranganadh@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Karthik'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Karthik@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Saranya'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Saranya@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Mahesh'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Mahesh@example.com'</span>),
];
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">MissedCallsPage</span> <span style="color: #008800; font-weight: bold;">extends</span> StatefulWidget {
<span style="background-color: #ffaaaa; color: red;">@</span>override State<span style="color: #333333;"><</span>StatefulWidget<span style="color: #333333;">></span> createState() {
<span style="color: #008800; font-weight: bold;">return</span> <span style="color: #008800; font-weight: bold;">new</span> _MissedCallsPage();
}
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">_MissedCallsPage</span> <span style="color: #008800; font-weight: bold;">extends</span> State<span style="color: #333333;"><</span>MissedCallsPage<span style="color: #333333;">></span> {
<span style="background-color: #ffaaaa; color: red;">@</span>override Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> Scaffold(
<span style="color: #997700; font-weight: bold;">body:</span> <span style="color: #008800; font-weight: bold;">new</span> Column(
<span style="color: #997700; font-weight: bold;">children:</span> <span style="color: #333333;"><</span>Widget<span style="color: #333333;">></span>[
<span style="color: #008800; font-weight: bold;">new</span> Expanded(
<span style="color: #997700; font-weight: bold;">child:</span> <span style="color: #008800; font-weight: bold;">new</span> ListView.builder(
<span style="color: #997700; font-weight: bold;">itemCount:</span> missedCallContacts.length,
<span style="color: #997700; font-weight: bold;">itemBuilder:</span> (context, index) {
<span style="color: #008800; font-weight: bold;">return</span> ListTile(
<span style="color: #997700; font-weight: bold;">title:</span> Text(
<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>missedCallContacts[index].fullName<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>,
),
<span style="color: #997700; font-weight: bold;">subtitle:</span> Text(<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>missedCallContacts[index].email<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>),
<span style="color: #997700; font-weight: bold;">leading:</span> <span style="color: #008800; font-weight: bold;">new</span> CircleAvatar(
<span style="color: #997700; font-weight: bold;">backgroundColor:</span> Colors.blue,
<span style="color: #997700; font-weight: bold;">child:</span> Text(<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>missedCallContacts[index].fullName.substring(
<span style="color: #6600ee; font-weight: bold;">0</span>, <span style="color: #6600ee; font-weight: bold;">1</span>)<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>)),
<span style="color: #997700; font-weight: bold;">onTap:</span> () <span style="color: #333333;">=></span> _onTapItem(context, missedCallContacts[index]),
);
},
),
),
],
));
}
<span style="color: #333399; font-weight: bold;">void</span> _onTapItem(BuildContext context, Contact post) {
Scaffold.of(context).showSnackBar(
<span style="color: #008800; font-weight: bold;">new</span> SnackBar(<span style="color: #997700; font-weight: bold;">content:</span> <span style="color: #008800; font-weight: bold;">new</span> Text(<span style="background-color: #fff0f0;">"Tap on "</span> <span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">' - '</span> <span style="color: #333333;">+</span> post.fullName)));
}
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">ReceivedCallsPage</span> <span style="color: #008800; font-weight: bold;">extends</span> StatefulWidget {
<span style="background-color: #ffaaaa; color: red;">@</span>override State<span style="color: #333333;"><</span>StatefulWidget<span style="color: #333333;">></span> createState() {
<span style="color: #008800; font-weight: bold;">return</span> <span style="color: #008800; font-weight: bold;">new</span> _ReceivedCallsPage();
}
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">_ReceivedCallsPage</span> <span style="color: #008800; font-weight: bold;">extends</span> State<span style="color: #333333;"><</span>ReceivedCallsPage<span style="color: #333333;">></span> {
<span style="background-color: #ffaaaa; color: red;">@</span>override Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> Scaffold(
<span style="color: #997700; font-weight: bold;">body:</span> <span style="color: #008800; font-weight: bold;">new</span> Column(
<span style="color: #997700; font-weight: bold;">children:</span> <span style="color: #333333;"><</span>Widget<span style="color: #333333;">></span>[
<span style="color: #008800; font-weight: bold;">new</span> Expanded(
<span style="color: #997700; font-weight: bold;">child:</span> <span style="color: #008800; font-weight: bold;">new</span> ListView.builder(
<span style="color: #997700; font-weight: bold;">itemCount:</span> receivedCallContacts.length,
<span style="color: #997700; font-weight: bold;">itemBuilder:</span> (context, index) {
<span style="color: #008800; font-weight: bold;">return</span> ListTile(
<span style="color: #997700; font-weight: bold;">title:</span> Text(
<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>receivedCallContacts[index].fullName<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>,
),
<span style="color: #997700; font-weight: bold;">subtitle:</span> Text(<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>receivedCallContacts[index].email<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>),
<span style="color: #997700; font-weight: bold;">leading:</span> <span style="color: #008800; font-weight: bold;">new</span> CircleAvatar(
<span style="color: #997700; font-weight: bold;">backgroundColor:</span> Colors.blue,
<span style="color: #997700; font-weight: bold;">child:</span>
Text(<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>receivedCallContacts[index].fullName.substring(
<span style="color: #6600ee; font-weight: bold;">0</span>, <span style="color: #6600ee; font-weight: bold;">1</span>)<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>)),
<span style="color: #997700; font-weight: bold;">onTap:</span> () <span style="color: #333333;">=></span> _onTapItem(context, receivedCallContacts[index]),
);
},
),
),
],
));
}
<span style="color: #333399; font-weight: bold;">void</span> _onTapItem(BuildContext context, Contact post) {
Scaffold.of(context).showSnackBar(
<span style="color: #008800; font-weight: bold;">new</span> SnackBar(<span style="color: #997700; font-weight: bold;">content:</span> <span style="color: #008800; font-weight: bold;">new</span> Text(<span style="background-color: #fff0f0;">"Tap on "</span> <span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">' - '</span> <span style="color: #333333;">+</span> post.fullName)));
}
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">DialledCallsPage</span> <span style="color: #008800; font-weight: bold;">extends</span> StatefulWidget {
<span style="background-color: #ffaaaa; color: red;">@</span>override State<span style="color: #333333;"><</span>StatefulWidget<span style="color: #333333;">></span> createState() {
<span style="color: #008800; font-weight: bold;">return</span> <span style="color: #008800; font-weight: bold;">new</span> _DialledCallsPage();
}
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">_DialledCallsPage</span> <span style="color: #008800; font-weight: bold;">extends</span> State<span style="color: #333333;"><</span>DialledCallsPage<span style="color: #333333;">></span> {
<span style="background-color: #ffaaaa; color: red;">@</span>override Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> Scaffold(
<span style="color: #997700; font-weight: bold;">body:</span> <span style="color: #008800; font-weight: bold;">new</span> Column(
<span style="color: #997700; font-weight: bold;">children:</span> <span style="color: #333333;"><</span>Widget<span style="color: #333333;">></span>[
<span style="color: #008800; font-weight: bold;">new</span> Expanded(
<span style="color: #997700; font-weight: bold;">child:</span> <span style="color: #008800; font-weight: bold;">new</span> ListView.builder(
<span style="color: #997700; font-weight: bold;">itemCount:</span> dialledCallContacts.length,
<span style="color: #997700; font-weight: bold;">itemBuilder:</span> (context, index) {
<span style="color: #008800; font-weight: bold;">return</span> ListTile(
<span style="color: #997700; font-weight: bold;">title:</span> Text(
<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>dialledCallContacts[index].fullName<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>,
),
<span style="color: #997700; font-weight: bold;">subtitle:</span> Text(<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>dialledCallContacts[index].email<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>),
<span style="color: #997700; font-weight: bold;">leading:</span> <span style="color: #008800; font-weight: bold;">new</span> CircleAvatar(
<span style="color: #997700; font-weight: bold;">backgroundColor:</span> Colors.blue,
<span style="color: #997700; font-weight: bold;">child:</span>
Text(<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>dialledCallContacts[index].fullName.substring(
<span style="color: #6600ee; font-weight: bold;">0</span>, <span style="color: #6600ee; font-weight: bold;">1</span>)<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>)),
<span style="color: #997700; font-weight: bold;">onTap:</span> () <span style="color: #333333;">=></span> _onTapItem(context, dialledCallContacts[index]),
);
},
),
),
],
));
}
<span style="color: #333399; font-weight: bold;">void</span> _onTapItem(BuildContext context, Contact post) {
Scaffold.of(context).showSnackBar(
<span style="color: #008800; font-weight: bold;">new</span> SnackBar(<span style="color: #997700; font-weight: bold;">content:</span> <span style="color: #008800; font-weight: bold;">new</span> Text(<span style="background-color: #fff0f0;">"Tap on "</span> <span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">' - '</span> <span style="color: #333333;">+</span> post.fullName)));
}
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">Contact</span> {
<span style="color: #008800; font-weight: bold;">final</span> <span style="color: #333399; font-weight: bold;">String</span> fullName;
<span style="color: #008800; font-weight: bold;">final</span> <span style="color: #333399; font-weight: bold;">String</span> email;
<span style="color: #008800; font-weight: bold;">const</span> Contact({<span style="color: #008800; font-weight: bold;">this</span>.fullName, <span style="color: #008800; font-weight: bold;">this</span>.email});
}
</pre>
</td></tr>
</tbody></table>
</div>
<br /></div>
Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com0tag:blogger.com,1999:blog-1368316095367596493.post-44711441570000720402018-08-28T13:18:00.003+05:302019-09-17T18:40:59.834+05:30Flutter Tabbar Example<div dir="ltr" style="text-align: left;" trbidi="on">
Flutter Tabbar Example<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-GxLRhiastUY/W4T82Vz1x-I/AAAAAAAAVec/fNp4nzM2k-A6gWWb7lfJpuNlbtgDi4omgCPcBGAYYCw/s1600/Screenshot_2018-08-28-13-05-47-604_com.infodat.akeepo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="800" height="320" src="https://1.bp.blogspot.com/-GxLRhiastUY/W4T82Vz1x-I/AAAAAAAAVec/fNp4nzM2k-A6gWWb7lfJpuNlbtgDi4omgCPcBGAYYCw/s320/Screenshot_2018-08-28-13-05-47-604_com.infodat.akeepo.png" width="160" /></a></div>
<a href="https://3.bp.blogspot.com/-Crhnj6GnEMg/W4T81C6XaCI/AAAAAAAAVeY/yoMP-FlxjNkOxijMdsmWlltNPvAbBlLKgCPcBGAYYCw/s1600/Screenshot_2018-08-28-13-06-00-755_com.infodat.akeepo.png" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="1600" data-original-width="800" height="320" src="https://3.bp.blogspot.com/-Crhnj6GnEMg/W4T81C6XaCI/AAAAAAAAVeY/yoMP-FlxjNkOxijMdsmWlltNPvAbBlLKgCPcBGAYYCw/s320/Screenshot_2018-08-28-13-06-00-755_com.infodat.akeepo.png" width="160" /></a><br />
<br />
<br />
<br />
main.dart<br />
===========<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:akeepo/tabbar.dart'</span>;
<span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:flutter/material.dart'</span>;
<span style="color: #333399; font-weight: bold;">void</span> main() <span style="color: #333333;">=></span> runApp(MyApp());
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">MyApp</span> <span style="color: #008800; font-weight: bold;">extends</span> StatelessWidget {
<span style="background-color: #ffaaaa; color: red;">@</span>override Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> MaterialApp(
<span style="color: #997700; font-weight: bold;">title:</span> <span style="background-color: #fff0f0;">'Flutter'</span>,
<span style="color: #997700; font-weight: bold;">debugShowCheckedModeBanner:</span> <span style="color: #008800; font-weight: bold;">false</span>,
<span style="color: #997700; font-weight: bold;">theme:</span> ThemeData(
<span style="color: #997700; font-weight: bold;">primarySwatch:</span> Colors.blue,
),
<span style="color: #997700; font-weight: bold;">home:</span> TabBarDemo(),
);
}
}
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<br />
<br />
tabbar.dart<br />
==========<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:flutter/material.dart'</span>;
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">TabBarDemo</span> <span style="color: #008800; font-weight: bold;">extends</span> StatelessWidget {
<span style="background-color: #ffaaaa; color: red;">@</span>override Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> MaterialApp(
<span style="color: #997700; font-weight: bold;">home:</span> DefaultTabController(
<span style="color: #997700; font-weight: bold;">length:</span> <span style="color: #6600ee; font-weight: bold;">3</span>,
<span style="color: #997700; font-weight: bold;">child:</span> Scaffold(
<span style="color: #997700; font-weight: bold;">appBar:</span> AppBar(
<span style="color: #997700; font-weight: bold;">bottom:</span> TabBar(
<span style="color: #997700; font-weight: bold;">tabs:</span> [
Tab(<span style="color: #997700; font-weight: bold;">text:</span> <span style="background-color: #fff0f0;">"Calls"</span>, <span style="color: #997700; font-weight: bold;">icon:</span> Icon(Icons.call_made)),
Tab(<span style="color: #997700; font-weight: bold;">text:</span> <span style="background-color: #fff0f0;">"Missed"</span>,<span style="color: #997700; font-weight: bold;">icon:</span> Icon(Icons.call_missed)),
Tab(<span style="color: #997700; font-weight: bold;">text:</span> <span style="background-color: #fff0f0;">"Received"</span>, <span style="color: #997700; font-weight: bold;">icon:</span> Icon(Icons.call_received)),
],
),
<span style="color: #997700; font-weight: bold;">title:</span> Text(<span style="background-color: #fff0f0;">'Tabs Demo'</span>),
),
<span style="color: #997700; font-weight: bold;">body:</span> TabBarView(
<span style="color: #997700; font-weight: bold;">children:</span> [
DialledCallsPage(),
MissedCallsPage(),
ReceivedCallsPage(),
],
),
),
),
);
}
}
List<span style="color: #333333;"><</span>Contact<span style="color: #333333;">></span> missedCallContacts <span style="color: #333333;">=</span> [
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Pratap Kumar'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'pratap@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Jagadeesh'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Jagadeesh@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Srinivas'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Srinivas@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Narendra'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Narendra@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Sravan '</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Sravan@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Ranganadh'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Ranganadh@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Karthik'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Karthik@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Saranya'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Saranya@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Mahesh'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Mahesh@example.com'</span>),
];
List<span style="color: #333333;"><</span>Contact<span style="color: #333333;">></span> receivedCallContacts <span style="color: #333333;">=</span> [
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Pratap Kumar'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'pratap@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Jagadeesh'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Jagadeesh@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Srinivas'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Srinivas@example.com'</span>),
];
List<span style="color: #333333;"><</span>Contact<span style="color: #333333;">></span> dialledCallContacts <span style="color: #333333;">=</span> [
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Ranganadh'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Ranganadh@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Karthik'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Karthik@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Saranya'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Saranya@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Mahesh'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Mahesh@example.com'</span>),
];
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">MissedCallsPage</span> <span style="color: #008800; font-weight: bold;">extends</span> StatefulWidget {
<span style="background-color: #ffaaaa; color: red;">@</span>override State<span style="color: #333333;"><</span>StatefulWidget<span style="color: #333333;">></span> createState() {
<span style="color: #888888;">// TODO: implement createState return new _MissedCallsPage();</span>
}
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">_MissedCallsPage</span> <span style="color: #008800; font-weight: bold;">extends</span> State<span style="color: #333333;"><</span>MissedCallsPage<span style="color: #333333;">></span> {
<span style="background-color: #ffaaaa; color: red;">@</span>override Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> Scaffold(
<span style="color: #997700; font-weight: bold;">body:</span> <span style="color: #008800; font-weight: bold;">new</span> Column(
<span style="color: #997700; font-weight: bold;">children:</span> <span style="color: #333333;"><</span>Widget<span style="color: #333333;">></span>[
<span style="color: #008800; font-weight: bold;">new</span> Expanded(
<span style="color: #997700; font-weight: bold;">child:</span> <span style="color: #008800; font-weight: bold;">new</span> ListView.builder(
<span style="color: #997700; font-weight: bold;">itemCount:</span> missedCallContacts.length,
<span style="color: #997700; font-weight: bold;">itemBuilder:</span> (context, index) {
<span style="color: #008800; font-weight: bold;">return</span> ListTile(
<span style="color: #997700; font-weight: bold;">title:</span> Text(
<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>missedCallContacts[index].fullName<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>,
),
<span style="color: #997700; font-weight: bold;">subtitle:</span> Text(<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>missedCallContacts[index].email<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>),
<span style="color: #997700; font-weight: bold;">leading:</span> <span style="color: #008800; font-weight: bold;">new</span> CircleAvatar(
<span style="color: #997700; font-weight: bold;">backgroundColor:</span> Colors.blue,
<span style="color: #997700; font-weight: bold;">child:</span> Text(<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>missedCallContacts[index].fullName.substring(
<span style="color: #6600ee; font-weight: bold;">0</span>, <span style="color: #6600ee; font-weight: bold;">1</span>)<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>)),
<span style="color: #997700; font-weight: bold;">onTap:</span> () <span style="color: #333333;">=></span> _onTapItem(context, missedCallContacts[index]),
);
},
),
),
],
));
}
<span style="color: #333399; font-weight: bold;">void</span> _onTapItem(BuildContext context, Contact post) {
Scaffold.of(context).showSnackBar(
<span style="color: #008800; font-weight: bold;">new</span> SnackBar(<span style="color: #997700; font-weight: bold;">content:</span> <span style="color: #008800; font-weight: bold;">new</span> Text(<span style="background-color: #fff0f0;">"Tap on "</span> <span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">' - '</span> <span style="color: #333333;">+</span> post.fullName)));
}
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">ReceivedCallsPage</span> <span style="color: #008800; font-weight: bold;">extends</span> StatefulWidget {
<span style="background-color: #ffaaaa; color: red;">@</span>override State<span style="color: #333333;"><</span>StatefulWidget<span style="color: #333333;">></span> createState() {
<span style="color: #888888;">// TODO: implement createState return new _ReceivedCallsPage();</span>
}
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">_ReceivedCallsPage</span> <span style="color: #008800; font-weight: bold;">extends</span> State<span style="color: #333333;"><</span>ReceivedCallsPage<span style="color: #333333;">></span> {
<span style="background-color: #ffaaaa; color: red;">@</span>override Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> Scaffold(
<span style="color: #997700; font-weight: bold;">body:</span> <span style="color: #008800; font-weight: bold;">new</span> Column(
<span style="color: #997700; font-weight: bold;">children:</span> <span style="color: #333333;"><</span>Widget<span style="color: #333333;">></span>[
<span style="color: #008800; font-weight: bold;">new</span> Expanded(
<span style="color: #997700; font-weight: bold;">child:</span> <span style="color: #008800; font-weight: bold;">new</span> ListView.builder(
<span style="color: #997700; font-weight: bold;">itemCount:</span> receivedCallContacts.length,
<span style="color: #997700; font-weight: bold;">itemBuilder:</span> (context, index) {
<span style="color: #008800; font-weight: bold;">return</span> ListTile(
<span style="color: #997700; font-weight: bold;">title:</span> Text(
<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>receivedCallContacts[index].fullName<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>,
),
<span style="color: #997700; font-weight: bold;">subtitle:</span> Text(<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>receivedCallContacts[index].email<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>),
<span style="color: #997700; font-weight: bold;">leading:</span> <span style="color: #008800; font-weight: bold;">new</span> CircleAvatar(
<span style="color: #997700; font-weight: bold;">backgroundColor:</span> Colors.blue,
<span style="color: #997700; font-weight: bold;">child:</span>
Text(<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>receivedCallContacts[index].fullName.substring(
<span style="color: #6600ee; font-weight: bold;">0</span>, <span style="color: #6600ee; font-weight: bold;">1</span>)<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>)),
<span style="color: #997700; font-weight: bold;">onTap:</span> () <span style="color: #333333;">=></span> _onTapItem(context, receivedCallContacts[index]),
);
},
),
),
],
));
}
<span style="color: #333399; font-weight: bold;">void</span> _onTapItem(BuildContext context, Contact post) {
Scaffold.of(context).showSnackBar(
<span style="color: #008800; font-weight: bold;">new</span> SnackBar(<span style="color: #997700; font-weight: bold;">content:</span> <span style="color: #008800; font-weight: bold;">new</span> Text(<span style="background-color: #fff0f0;">"Tap on "</span> <span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">' - '</span> <span style="color: #333333;">+</span> post.fullName)));
}
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">DialledCallsPage</span> <span style="color: #008800; font-weight: bold;">extends</span> StatefulWidget {
<span style="background-color: #ffaaaa; color: red;">@</span>override State<span style="color: #333333;"><</span>StatefulWidget<span style="color: #333333;">></span> createState() {
<span style="color: #888888;">// TODO: implement createState return new _DialledCallsPage();</span>
}
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">_DialledCallsPage</span> <span style="color: #008800; font-weight: bold;">extends</span> State<span style="color: #333333;"><</span>DialledCallsPage<span style="color: #333333;">></span> {
<span style="background-color: #ffaaaa; color: red;">@</span>override Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> Scaffold(
<span style="color: #997700; font-weight: bold;">body:</span> <span style="color: #008800; font-weight: bold;">new</span> Column(
<span style="color: #997700; font-weight: bold;">children:</span> <span style="color: #333333;"><</span>Widget<span style="color: #333333;">></span>[
<span style="color: #008800; font-weight: bold;">new</span> Expanded(
<span style="color: #997700; font-weight: bold;">child:</span> <span style="color: #008800; font-weight: bold;">new</span> ListView.builder(
<span style="color: #997700; font-weight: bold;">itemCount:</span> dialledCallContacts.length,
<span style="color: #997700; font-weight: bold;">itemBuilder:</span> (context, index) {
<span style="color: #008800; font-weight: bold;">return</span> ListTile(
<span style="color: #997700; font-weight: bold;">title:</span> Text(
<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>dialledCallContacts[index].fullName<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>,
),
<span style="color: #997700; font-weight: bold;">subtitle:</span> Text(<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>dialledCallContacts[index].email<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>),
<span style="color: #997700; font-weight: bold;">leading:</span> <span style="color: #008800; font-weight: bold;">new</span> CircleAvatar(
<span style="color: #997700; font-weight: bold;">backgroundColor:</span> Colors.blue,
<span style="color: #997700; font-weight: bold;">child:</span>
Text(<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>dialledCallContacts[index].fullName.substring(
<span style="color: #6600ee; font-weight: bold;">0</span>, <span style="color: #6600ee; font-weight: bold;">1</span>)<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>)),
<span style="color: #997700; font-weight: bold;">onTap:</span> () <span style="color: #333333;">=></span> _onTapItem(context, dialledCallContacts[index]),
);
},
),
),
],
));
}
<span style="color: #333399; font-weight: bold;">void</span> _onTapItem(BuildContext context, Contact post) {
Scaffold.of(context).showSnackBar(
<span style="color: #008800; font-weight: bold;">new</span> SnackBar(<span style="color: #997700; font-weight: bold;">content:</span> <span style="color: #008800; font-weight: bold;">new</span> Text(<span style="background-color: #fff0f0;">"Tap on "</span> <span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">' - '</span> <span style="color: #333333;">+</span> post.fullName)));
}
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">Contact</span> {
<span style="color: #008800; font-weight: bold;">final</span> <span style="color: #333399; font-weight: bold;">String</span> fullName;
<span style="color: #008800; font-weight: bold;">final</span> <span style="color: #333399; font-weight: bold;">String</span> email;
<span style="color: #008800; font-weight: bold;">const</span> Contact({<span style="color: #008800; font-weight: bold;">this</span>.fullName, <span style="color: #008800; font-weight: bold;">this</span>.email});
}
</pre>
</td></tr>
</tbody></table>
</div>
<br /></div>
Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com0tag:blogger.com,1999:blog-1368316095367596493.post-55511845613722242442018-08-27T16:43:00.002+05:302019-09-26T15:48:03.003+05:30Flutter ListView Search<div dir="ltr" style="text-align: left;" trbidi="on">
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"><span style="color: green; font-weight: bold;">
</span></pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy0PCfmsZasIktKG96EVTS1P6RmgqbDIwB6aJXNyqeAiWDZqXVdCsCDVFfBc5EskuZDgblrEc_n4tT_EUHg0NzRcmD-B02OhOnI4AE5QCAWYU7wyI56LCoi8ggRlA3HuLMluDUOkfFL3iv/s1600/Screenshot_2018-08-27-16-39-55-300_com.infodat.akeepo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="800" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy0PCfmsZasIktKG96EVTS1P6RmgqbDIwB6aJXNyqeAiWDZqXVdCsCDVFfBc5EskuZDgblrEc_n4tT_EUHg0NzRcmD-B02OhOnI4AE5QCAWYU7wyI56LCoi8ggRlA3HuLMluDUOkfFL3iv/s400/Screenshot_2018-08-27-16-39-55-300_com.infodat.akeepo.png" width="200" /></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhylA1W-17nr4VAV6Ae3ydbfZMDwFfDYGEa9icXmOMs4Uwrey1eeju5S5dtoAPIe1DwKGDB15xExTDoxrVKdHzcEp9ntiqGEXuKdnBK_4dozh4J3EMK2QDV-JZEZVG-HkTnUWmdvAdB_KaZ/s1600/Screenshot_2018-08-27-16-40-06-907_com.infodat.akeepo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="1600" data-original-width="800" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhylA1W-17nr4VAV6Ae3ydbfZMDwFfDYGEa9icXmOMs4Uwrey1eeju5S5dtoAPIe1DwKGDB15xExTDoxrVKdHzcEp9ntiqGEXuKdnBK_4dozh4J3EMK2QDV-JZEZVG-HkTnUWmdvAdB_KaZ/s400/Screenshot_2018-08-27-16-40-06-907_com.infodat.akeepo.png" width="200" /></a><br />
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"><span style="color: green; font-weight: bold;">
</span></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"><span style="color: green; font-weight: bold;">
</span></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">contactslist.dart</pre>
================<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">ContactsList</span> <span style="color: #008800; font-weight: bold;">extends</span> StatefulWidget {
<span style="color: #008800; font-weight: bold;">static</span> <span style="color: #333399; font-weight: bold;">String</span> tag <span style="color: #333333;">=</span> <span style="background-color: #fff0f0;">'contactlist-page'</span>;
<span style="background-color: #ffaaaa; color: red;">@</span>override State<span style="color: #333333;"><</span>StatefulWidget<span style="color: #333333;">></span> createState() {
<span style="color: #008800; font-weight: bold;">return</span> <span style="color: #008800; font-weight: bold;">new</span> _ContactsListState();
}
}
List<span style="color: #333333;"><</span>Contact<span style="color: #333333;">></span> contacts <span style="color: #333333;">=</span> [
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Pratap Kumar'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'pratap@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Jagadeesh'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Jagadeesh@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Srinivas'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Srinivas@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Narendra'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Narendra@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Sravan '</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Sravan@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Ranganadh'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Ranganadh@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Karthik'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Karthik@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Saranya'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Saranya@example.com'</span>),
Contact(<span style="color: #997700; font-weight: bold;">fullName:</span> <span style="background-color: #fff0f0;">'Mahesh'</span>, <span style="color: #997700; font-weight: bold;">email:</span> <span style="background-color: #fff0f0;">'Mahesh@example.com'</span>),
];
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">_ContactsListState</span> <span style="color: #008800; font-weight: bold;">extends</span> State<span style="color: #333333;"><</span>ContactsList<span style="color: #333333;">></span> {
TextEditingController searchController <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> TextEditingController();
<span style="color: #333399; font-weight: bold;">String</span> filter;
<span style="background-color: #ffaaaa; color: red;">@</span>override initState() {
searchController.addListener(() {
setState(() {
filter <span style="color: #333333;">=</span> searchController.text;
});
});
}
<span style="background-color: #ffaaaa; color: red;">@</span>override <span style="color: #333399; font-weight: bold;">void</span> dispose() {
searchController.dispose();
<span style="color: #008800; font-weight: bold;">super</span>.dispose();
}
<span style="background-color: #ffaaaa; color: red;">@</span>override Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> Scaffold(
<span style="color: #997700; font-weight: bold;">appBar:</span> AppBar(
<span style="color: #997700; font-weight: bold;">title:</span> Text(<span style="background-color: #fff0f0;">'Contacts'</span>,
<span style="color: #997700; font-weight: bold;">style:</span> TextStyle(
<span style="color: #997700; font-weight: bold;">color:</span> Colors.white, <span style="color: #997700; font-weight: bold;">fontWeight:</span> FontWeight.bold))),
<span style="color: #997700; font-weight: bold;">body:</span> <span style="color: #008800; font-weight: bold;">new</span> Column(
<span style="color: #997700; font-weight: bold;">children:</span> <span style="color: #333333;"><</span>Widget<span style="color: #333333;">></span>[
<span style="color: #008800; font-weight: bold;">new</span> Padding(
<span style="color: #997700; font-weight: bold;">padding:</span> <span style="color: #008800; font-weight: bold;">new</span> EdgeInsets.all(<span style="color: #6600ee; font-weight: bold;">8.0</span>),
<span style="color: #997700; font-weight: bold;">child:</span> <span style="color: #008800; font-weight: bold;">new</span> TextField(
<span style="color: #997700; font-weight: bold;">controller:</span> searchController,
<span style="color: #997700; font-weight: bold;">decoration:</span> InputDecoration(
<span style="color: #997700; font-weight: bold;">hintText:</span> <span style="background-color: #fff0f0;">'Search Contacts'</span>,
<span style="color: #997700; font-weight: bold;">contentPadding:</span> EdgeInsets.fromLTRB(<span style="color: #6600ee; font-weight: bold;">20.0</span>, <span style="color: #6600ee; font-weight: bold;">15.0</span>, <span style="color: #6600ee; font-weight: bold;">20.0</span>, <span style="color: #6600ee; font-weight: bold;">15.0</span>),
<span style="color: #997700; font-weight: bold;">border:</span> OutlineInputBorder(
<span style="color: #997700; font-weight: bold;">borderRadius:</span> BorderRadius.circular(<span style="color: #6600ee; font-weight: bold;">32.0</span>)),
),
),
),
<span style="color: #008800; font-weight: bold;">new</span> Expanded(
<span style="color: #997700; font-weight: bold;">child:</span> <span style="color: #008800; font-weight: bold;">new</span> ListView.builder(
<span style="color: #997700; font-weight: bold;">itemCount:</span> contacts.length,
<span style="color: #997700; font-weight: bold;">itemBuilder:</span> (context, index) {
<span style="color: #888888;">// if filter is null or empty returns all data return filter == null || filter == "" ? ListTile(</span>
<span style="color: #997700; font-weight: bold;">title:</span> Text(
<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>contacts[index].fullName<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>,
),
<span style="color: #997700; font-weight: bold;">subtitle:</span> Text(<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>contacts[index].email<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>),
<span style="color: #997700; font-weight: bold;">leading:</span> <span style="color: #008800; font-weight: bold;">new</span> CircleAvatar(
<span style="color: #997700; font-weight: bold;">backgroundColor:</span> Colors.blue,
<span style="color: #997700; font-weight: bold;">child:</span> Text(
<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>contacts[index].fullName.substring(<span style="color: #6600ee; font-weight: bold;">0</span>, <span style="color: #6600ee; font-weight: bold;">1</span>)<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>)),
<span style="color: #997700; font-weight: bold;">onTap:</span> () <span style="color: #333333;">=></span> _onTapItem(context, contacts[index]),
)
<span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>contacts[index].fullName<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span> .toLowerCase()
.contains(filter.toLowerCase())
<span style="color: #333333;">?</span> ListTile(
<span style="color: #997700; font-weight: bold;">title:</span> Text(
<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>contacts[index].fullName<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>,
),
<span style="color: #997700; font-weight: bold;">subtitle:</span> Text(<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>contacts[index].email<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>),
<span style="color: #997700; font-weight: bold;">leading:</span> <span style="color: #008800; font-weight: bold;">new</span> CircleAvatar(
<span style="color: #997700; font-weight: bold;">backgroundColor:</span> Colors.blue,
<span style="color: #997700; font-weight: bold;">child:</span> Text(
<span style="background-color: #fff0f0;">'</span><span style="background-color: #eeeeee;">${</span>contacts[index].fullName.substring(<span style="color: #6600ee; font-weight: bold;">0</span>, <span style="color: #6600ee; font-weight: bold;">1</span>)<span style="background-color: #eeeeee;">}</span><span style="background-color: #fff0f0;">'</span>)),
<span style="color: #997700; font-weight: bold;">onTap:</span> () <span style="color: #333333;">=></span>
_onTapItem(context, contacts[index]),
)
<span style="color: #333333;">:</span> <span style="color: #008800; font-weight: bold;">new</span> Container();
},
),
),
],
));
}
<span style="color: #333399; font-weight: bold;">void</span> _onTapItem(BuildContext context, Contact post) {
Scaffold.of(context).showSnackBar(
<span style="color: #008800; font-weight: bold;">new</span> SnackBar(<span style="color: #997700; font-weight: bold;">content:</span> <span style="color: #008800; font-weight: bold;">new</span> Text(<span style="background-color: #fff0f0;">"Tap on "</span> <span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">' - '</span> <span style="color: #333333;">+</span> post.fullName)));
}
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">Contact</span> {
<span style="color: #008800; font-weight: bold;">final</span> <span style="color: #333399; font-weight: bold;">String</span> fullName;
<span style="color: #008800; font-weight: bold;">final</span> <span style="color: #333399; font-weight: bold;">String</span> email;
<span style="color: #008800; font-weight: bold;">const</span> Contact({<span style="color: #008800; font-weight: bold;">this</span>.fullName, <span style="color: #008800; font-weight: bold;">this</span>.email});
}
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<br />
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">main.dart</pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">===========</pre>
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:flutter/material.dart'</span>;
<span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:users/contactslist.dart'</span>;
<span style="color: #333399; font-weight: bold;">void</span> main() <span style="color: #333333;">=></span> runApp(MyApp());
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">MyApp</span> <span style="color: #008800; font-weight: bold;">extends</span> StatelessWidget {
<span style="background-color: #ffaaaa; color: red;">@</span>override Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> MaterialApp(
<span style="color: #997700; font-weight: bold;">title:</span> <span style="background-color: #fff0f0;">'Contacts'</span>,
<span style="color: #997700; font-weight: bold;">debugShowCheckedModeBanner:</span> <span style="color: #008800; font-weight: bold;">false</span>,
<span style="color: #997700; font-weight: bold;">theme:</span> ThemeData(
<span style="color: #997700; font-weight: bold;">primarySwatch:</span> Colors.lightBlue,
),
<span style="color: #997700; font-weight: bold;">home:</span> ContactsList(),
);
}
}
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"><pre style="font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="font-family: "Courier New"; font-size: 9pt;"></pre>
</pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
</div>
Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com1tag:blogger.com,1999:blog-1368316095367596493.post-26332883229467080832018-08-27T12:32:00.003+05:302020-10-12T18:13:43.453+05:30Flutter ListView Example using Http<div dir="ltr" style="text-align: left;" trbidi="on">
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglbhnony3fIcYYHl3EaQIfJ-kIuK2uBRG0ode4njiZ9-9qSrUNAMyXMULjI_WeHAXEZnGdDD5GddtUzQMfoACFZoOy2leMGj5-K174cJBqKj3aZqGaElrI67QjjS_omSDzbdIPg1m0VQmZ/s1600/Screenshot_2018-08-20-17-10-11-120_com.infodat.akeepo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="800" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglbhnony3fIcYYHl3EaQIfJ-kIuK2uBRG0ode4njiZ9-9qSrUNAMyXMULjI_WeHAXEZnGdDD5GddtUzQMfoACFZoOy2leMGj5-K174cJBqKj3aZqGaElrI67QjjS_omSDzbdIPg1m0VQmZ/s320/Screenshot_2018-08-20-17-10-11-120_com.infodat.akeepo.png" width="160" /></a></div>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">userslist.dart</pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">=============</pre>
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'dart:async'</span>;
<span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'dart:convert'</span>;
<span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:flutter/material.dart'</span>;
<span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:http/http.dart'</span> <span style="color: #008800; font-weight: bold;">as</span> http;
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">UsersList</span> <span style="color: #008800; font-weight: bold;">extends</span> StatefulWidget {
<span style="color: #008800; font-weight: bold;">static</span> <span style="color: #333399; font-weight: bold;">String</span> tag <span style="color: #333333;">=</span> <span style="background-color: #fff0f0;">'users-page'</span>;
<span style="background-color: #ffaaaa; color: red;">@</span>override
State<span style="color: #333333;"><</span>StatefulWidget<span style="color: #333333;">></span> createState() {
<span style="color: #008800; font-weight: bold;">return</span> <span style="color: #008800; font-weight: bold;">new</span> _UsersListState();
}
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">_UsersListState</span> <span style="color: #008800; font-weight: bold;">extends</span> State<span style="color: #333333;"><</span>UsersList<span style="color: #333333;">></span> {
<span style="background-color: #ffaaaa; color: red;">@</span>override
Future<span style="color: #333333;"><</span>List<span style="color: #333333;"><</span>User<span style="color: #333333;">>></span> _getUsers() <span style="color: #333333;">as</span>ync {
List<span style="color: #333333;"><</span>User<span style="color: #333333;">></span> users <span style="color: #333333;">=</span> [];
<span style="color: #008800; font-weight: bold;">var</span> response <span style="color: #333333;">=</span> await http.<span style="color: #008800; font-weight: bold;">get</span>(<span style="background-color: #fff0f0;">'https://api.randomuser.me/?results=20'</span>);
<span style="color: #008800; font-weight: bold;">var</span> jsonData <span style="color: #333333;">=</span> JSON.decode(response.body);
<span style="color: #008800; font-weight: bold;">var</span> usersData <span style="color: #333333;">=</span> jsonData[<span style="background-color: #fff0f0;">"results"</span>];
<span style="color: #008800; font-weight: bold;">for</span> (<span style="color: #008800; font-weight: bold;">var</span> user <span style="color: #008800; font-weight: bold;">in</span> usersData) {
User newUser <span style="color: #333333;">=</span> User(user[<span style="background-color: #fff0f0;">"name"</span>][<span style="background-color: #fff0f0;">"first"</span>] <span style="color: #333333;">+</span> user[<span style="background-color: #fff0f0;">"name"</span>][<span style="background-color: #fff0f0;">"last"</span>],
user[<span style="background-color: #fff0f0;">"email"</span>], user[<span style="background-color: #fff0f0;">"picture"</span>][<span style="background-color: #fff0f0;">"large"</span>], user[<span style="background-color: #fff0f0;">"phone"</span>]);
users.add(newUser);
}
<span style="color: #008800; font-weight: bold;">return</span> users;
}
Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> Scaffold(
<span style="color: #997700; font-weight: bold;">appBar:</span> AppBar(
<span style="color: #997700; font-weight: bold;">title:</span> Text(<span style="background-color: #fff0f0;">'Users'</span>,
<span style="color: #997700; font-weight: bold;">style:</span>
TextStyle(<span style="color: #997700; font-weight: bold;">color:</span> Colors.white, <span style="color: #997700; font-weight: bold;">fontWeight:</span> FontWeight.bold))),
<span style="color: #997700; font-weight: bold;">body:</span> Container(
<span style="color: #997700; font-weight: bold;">child:</span> FutureBuilder(
<span style="color: #997700; font-weight: bold;">future:</span> _getUsers(),
<span style="color: #997700; font-weight: bold;">builder:</span> (BuildContext context, AsyncSnapshot snapshot) {
<span style="color: #008800; font-weight: bold;">if</span> (snapshot.data <span style="color: #333333;">==</span> <span style="color: #008800; font-weight: bold;">null</span>) {
<span style="color: #008800; font-weight: bold;">return</span> Container(
<span style="color: #997700; font-weight: bold;">child:</span> Center(
<span style="color: #997700; font-weight: bold;">child:</span> Text(<span style="background-color: #fff0f0;">"Loading..."</span>),
),
);
} <span style="color: #008800; font-weight: bold;">else</span> {
<span style="color: #008800; font-weight: bold;">return</span> ListView.builder(
<span style="color: #997700; font-weight: bold;">itemCount:</span> snapshot.data.length,
<span style="color: #997700; font-weight: bold;">itemBuilder:</span> (BuildContext context, <span style="color: #333399; font-weight: bold;">int</span> index) {
<span style="color: #008800; font-weight: bold;">return</span> ListTile(
<span style="color: #997700; font-weight: bold;">onTap:</span> () {
Navigator.push(
context,
<span style="color: #008800; font-weight: bold;">new</span> MaterialPageRoute(
<span style="color: #997700; font-weight: bold;">builder:</span> (context) <span style="color: #333333;">=></span>
UserDetailPage(snapshot.data[index])));
},
<span style="color: #997700; font-weight: bold;">title:</span> Text(snapshot.data[index].fullName),
<span style="color: #997700; font-weight: bold;">subtitle:</span> Text(snapshot.data[index].mobileNumber),
<span style="color: #997700; font-weight: bold;">leading:</span> CircleAvatar(
<span style="color: #997700; font-weight: bold;">backgroundImage:</span>
NetworkImage(snapshot.data[index].imageUrl)),
);
});
}
}),
),
);
}
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">User</span> {
<span style="color: #008800; font-weight: bold;">final</span> <span style="color: #333399; font-weight: bold;">String</span> fullName;
<span style="color: #008800; font-weight: bold;">final</span> <span style="color: #333399; font-weight: bold;">String</span> email;
<span style="color: #008800; font-weight: bold;">final</span> <span style="color: #333399; font-weight: bold;">String</span> imageUrl;
<span style="color: #008800; font-weight: bold;">final</span> <span style="color: #333399; font-weight: bold;">String</span> mobileNumber;
User(<span style="color: #008800; font-weight: bold;">this</span>.fullName, <span style="color: #008800; font-weight: bold;">this</span>.email, <span style="color: #008800; font-weight: bold;">this</span>.imageUrl, <span style="color: #008800; font-weight: bold;">this</span>.mobileNumber);
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">UserDetailPage</span> <span style="color: #008800; font-weight: bold;">extends</span> StatelessWidget {
<span style="color: #008800; font-weight: bold;">final</span> User user;
UserDetailPage(<span style="color: #008800; font-weight: bold;">this</span>.user);
<span style="background-color: #ffaaaa; color: red;">@</span>override
Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> Scaffold(
<span style="color: #997700; font-weight: bold;">appBar:</span> AppBar(
<span style="color: #997700; font-weight: bold;">title:</span> Text(user.fullName),
),
);
}
}
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">main.dart</pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">==========</pre>
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<table><tbody>
<tr><td><pre style="line-height: 125%; margin: 0;">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18</pre>
</td><td><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">import</span> <span style="background-color: #fff0f0;">'package:flutter/material.dart'</span>;
<span style="color: #333399; font-weight: bold;">void</span> main() <span style="color: #333333;">=></span> runApp(MyApp());
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">MyApp</span> <span style="color: #008800; font-weight: bold;">extends</span> StatelessWidget {
<span style="background-color: #ffaaaa; color: red;">@</span>override
Widget build(BuildContext context) {
<span style="color: #008800; font-weight: bold;">return</span> MaterialApp(
<span style="color: #997700; font-weight: bold;">title:</span> <span style="background-color: #fff0f0;">'Users'</span>,
<span style="color: #997700; font-weight: bold;">debugShowCheckedModeBanner:</span> <span style="color: #008800; font-weight: bold;">false</span>,
<span style="color: #997700; font-weight: bold;">theme:</span> ThemeData(
<span style="color: #997700; font-weight: bold;">primarySwatch:</span> Colors.lightBlue
),
<span style="color: #997700; font-weight: bold;">home:</span> UsersList()
);
}
}
</pre>
</td></tr>
</tbody></table>
</div>
<br />
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"><pre style="font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="font-family: "Courier New"; font-size: 9pt;"></pre>
</pre>
</div>
Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com1tag:blogger.com,1999:blog-1368316095367596493.post-76561797527493159392018-03-09T13:05:00.003+05:302018-03-19T16:12:30.899+05:30Get Location Using FusedLocationProviderClient Api<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<b><u>Step 1:</u></b><br />
<b><u><br />
</u></b> <br />
Add play services location in build.gradle<br />
<br />
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">compile <span style="color: green; font-weight: bold;">'com.google.android.gms:play-services-location:11.4.2'</span></pre>
<b><u><br />
</u></b> <b><u>Step 2:</u></b><br />
<b><u><br />
</u></b> Add Permission in AndroidManifestFile.xml<br />
<br />
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"><<span style="color: navy; font-weight: bold;">uses-permission </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:name=</span><span style="color: green; font-weight: bold;">"android.permission.ACCESS_FINE_LOCATION" </span>/>
<<span style="color: navy; font-weight: bold;">uses-permission </span><span style="color: #660e7a; font-weight: bold;">android</span><span style="color: blue; font-weight: bold;">:name=</span><span style="color: green; font-weight: bold;">"android.permission.ACCESS_COARSE_LOCATION" </span>/></pre>
<b><u><br />
</u></b> <b><u>Step 3 :</u></b><br />
<br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">package</span> org<span style="color: #333333;">.</span><span style="color: #0000cc;">pratap</span><span style="color: #333333;">.</span><span style="color: #0000cc;">userlocation</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.Manifest</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.content.Intent</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.content.pm.PackageManager</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.location.Location</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.net.Uri</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.os.Bundle</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.provider.Settings</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.support.annotation.NonNull</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.support.v4.app.ActivityCompat</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.support.v4.content.ContextCompat</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.support.v7.app.AppCompatActivity</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.view.View</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.widget.Button</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.widget.TextView</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.widget.Toast</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">com.google.android.gms.location.FusedLocationProviderClient</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">com.google.android.gms.location.LocationServices</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">com.google.android.gms.tasks.OnCompleteListener</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">com.google.android.gms.tasks.Task</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">MainActivity</span> <span style="color: #008800; font-weight: bold;">extends</span> AppCompatActivity <span style="color: #333333;">{</span>
<span style="color: #888888;">/**</span>
<span style="color: #888888;"> * Represents a geographical location.</span>
<span style="color: #888888;"> */</span>
<span style="color: #008800; font-weight: bold;">protected</span> Location mLastLocation<span style="color: #333333;">;</span>
<span style="color: #333399; font-weight: bold;">int</span> REQUEST_PERMISSIONS_REQUEST_CODE <span style="color: #333333;">=</span> <span style="color: #0000dd; font-weight: bold;">1001</span><span style="color: #333333;">;</span>
FusedLocationProviderClient mFusedLocationClient<span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">private</span> TextView mLatitudeText<span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">private</span> TextView mLongitudeText<span style="color: #333333;">;</span>
Button btn_getLocation<span style="color: #333333;">;</span>
<span style="color: #555555; font-weight: bold;">@Override</span>
<span style="color: #008800; font-weight: bold;">protected</span> <span style="color: #333399; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">onCreate</span><span style="color: #333333;">(</span>Bundle savedInstanceState<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">super</span><span style="color: #333333;">.</span><span style="color: #0000cc;">onCreate</span><span style="color: #333333;">(</span>savedInstanceState<span style="color: #333333;">);</span>
setContentView<span style="color: #333333;">(</span>R<span style="color: #333333;">.</span><span style="color: #0000cc;">layout</span><span style="color: #333333;">.</span><span style="color: #0000cc;">activity_main</span><span style="color: #333333;">);</span>
mFusedLocationClient <span style="color: #333333;">=</span> LocationServices<span style="color: #333333;">.</span><span style="color: #0000cc;">getFusedLocationProviderClient</span><span style="color: #333333;">(</span><span style="color: #008800; font-weight: bold;">this</span><span style="color: #333333;">);</span>
btn_getLocation <span style="color: #333333;">=</span> <span style="color: #333333;">(</span>Button<span style="color: #333333;">)</span> findViewById<span style="color: #333333;">(</span>R<span style="color: #333333;">.</span><span style="color: #0000cc;">id</span><span style="color: #333333;">.</span><span style="color: #0000cc;">btn_get_location</span><span style="color: #333333;">);</span>
mLatitudeText <span style="color: #333333;">=</span> <span style="color: #333333;">(</span>TextView<span style="color: #333333;">)</span> findViewById<span style="color: #333333;">((</span>R<span style="color: #333333;">.</span><span style="color: #0000cc;">id</span><span style="color: #333333;">.</span><span style="color: #0000cc;">mLatitudeText</span><span style="color: #333333;">));</span>
mLongitudeText <span style="color: #333333;">=</span> <span style="color: #333333;">(</span>TextView<span style="color: #333333;">)</span> findViewById<span style="color: #333333;">((</span>R<span style="color: #333333;">.</span><span style="color: #0000cc;">id</span><span style="color: #333333;">.</span><span style="color: #0000cc;">mLongitudeText</span><span style="color: #333333;">));</span>
btn_getLocation<span style="color: #333333;">.</span><span style="color: #0000cc;">setOnClickListener</span><span style="color: #333333;">(</span><span style="color: #008800; font-weight: bold;">new</span> View<span style="color: #333333;">.</span><span style="color: #0000cc;">OnClickListener</span><span style="color: #333333;">()</span> <span style="color: #333333;">{</span>
<span style="color: #555555; font-weight: bold;">@Override</span>
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #333399; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">onClick</span><span style="color: #333333;">(</span>View v<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(!</span>checkPermissions<span style="color: #333333;">())</span> <span style="color: #333333;">{</span>
requestPermissions<span style="color: #333333;">();</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">else</span> <span style="color: #333333;">{</span>
getLastLocation<span style="color: #333333;">();</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">});</span>
<span style="color: #333333;">}</span>
<span style="color: #888888;">/**</span>
<span style="color: #888888;"> * Return the current state of the permissions needed.</span>
<span style="color: #888888;"> */</span>
<span style="color: #008800; font-weight: bold;">private</span> <span style="color: #333399; font-weight: bold;">boolean</span> <span style="color: #0066bb; font-weight: bold;">checkPermissions</span><span style="color: #333333;">()</span> <span style="color: #333333;">{</span>
<span style="color: #333399; font-weight: bold;">int</span> permissionState <span style="color: #333333;">=</span> ActivityCompat<span style="color: #333333;">.</span><span style="color: #0000cc;">checkSelfPermission</span><span style="color: #333333;">(</span><span style="color: #008800; font-weight: bold;">this</span><span style="color: #333333;">,</span>
Manifest<span style="color: #333333;">.</span><span style="color: #0000cc;">permission</span><span style="color: #333333;">.</span><span style="color: #0000cc;">ACCESS_FINE_LOCATION</span><span style="color: #333333;">);</span>
<span style="color: #008800; font-weight: bold;">return</span> permissionState <span style="color: #333333;">==</span> PackageManager<span style="color: #333333;">.</span><span style="color: #0000cc;">PERMISSION_GRANTED</span><span style="color: #333333;">;</span>
<span style="color: #333333;">}</span>
<span style="color: #555555; font-weight: bold;">@SuppressWarnings</span><span style="color: #333333;">(</span><span style="background-color: #fff0f0;">"MissingPermission"</span><span style="color: #333333;">)</span>
<span style="color: #008800; font-weight: bold;">private</span> <span style="color: #333399; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">getLastLocation</span><span style="color: #333333;">()</span> <span style="color: #333333;">{</span>
mFusedLocationClient<span style="color: #333333;">.</span><span style="color: #0000cc;">getLastLocation</span><span style="color: #333333;">()</span>
<span style="color: #333333;">.</span><span style="color: #0000cc;">addOnCompleteListener</span><span style="color: #333333;">(</span><span style="color: #008800; font-weight: bold;">this</span><span style="color: #333333;">,</span> <span style="color: #008800; font-weight: bold;">new</span> OnCompleteListener<span style="color: #333333;"><</span>Location<span style="color: #333333;">>()</span> <span style="color: #333333;">{</span>
<span style="color: #555555; font-weight: bold;">@Override</span>
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #333399; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">onComplete</span><span style="color: #333333;">(</span><span style="color: #555555; font-weight: bold;">@NonNull</span> Task<span style="color: #333333;"><</span>Location<span style="color: #333333;">></span> task<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>task<span style="color: #333333;">.</span><span style="color: #0000cc;">isSuccessful</span><span style="color: #333333;">()</span> <span style="color: #333333;">&&</span> task<span style="color: #333333;">.</span><span style="color: #0000cc;">getResult</span><span style="color: #333333;">()</span> <span style="color: #333333;">!=</span> <span style="color: #008800; font-weight: bold;">null</span><span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
mLastLocation <span style="color: #333333;">=</span> task<span style="color: #333333;">.</span><span style="color: #0000cc;">getResult</span><span style="color: #333333;">();</span>
mLatitudeText<span style="color: #333333;">.</span><span style="color: #0000cc;">setText</span><span style="color: #333333;">(</span><span style="background-color: #fff0f0;">"Latitude : "</span><span style="color: #333333;">+</span>
mLastLocation<span style="color: #333333;">.</span><span style="color: #0000cc;">getLatitude</span><span style="color: #333333;">()</span> <span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">""</span><span style="color: #333333;">);</span>
mLongitudeText<span style="color: #333333;">.</span><span style="color: #0000cc;">setText</span><span style="color: #333333;">(</span><span style="background-color: #fff0f0;">"Longitude : "</span><span style="color: #333333;">+</span>
mLastLocation<span style="color: #333333;">.</span><span style="color: #0000cc;">getLongitude</span><span style="color: #333333;">()</span> <span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">""</span><span style="color: #333333;">);</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">else</span> <span style="color: #333333;">{</span>
showMessage<span style="color: #333333;">(</span><span style="background-color: #fff0f0;">"No Location found"</span><span style="color: #333333;">);</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">});</span>
<span style="color: #333333;">}</span>
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #333399; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">showMessage</span><span style="color: #333333;">(</span>String message<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>message <span style="color: #333333;">==</span> <span style="color: #008800; font-weight: bold;">null</span> <span style="color: #333333;">||</span> message<span style="color: #333333;">.</span><span style="color: #0000cc;">length</span><span style="color: #333333;">()</span> <span style="color: #333333;">==</span> <span style="color: #0000dd; font-weight: bold;">0</span><span style="color: #333333;">)</span>
<span style="color: #008800; font-weight: bold;">return</span><span style="color: #333333;">;</span>
Toast<span style="color: #333333;">.</span><span style="color: #0000cc;">makeText</span><span style="color: #333333;">(</span><span style="color: #008800; font-weight: bold;">this</span><span style="color: #333333;">,</span> message<span style="color: #333333;">,</span> Toast<span style="color: #333333;">.</span><span style="color: #0000cc;">LENGTH_SHORT</span><span style="color: #333333;">).</span><span style="color: #0000cc;">show</span><span style="color: #333333;">();</span>
<span style="color: #333333;">}</span>
<span style="color: #008800; font-weight: bold;">private</span> <span style="color: #333399; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">requestPermissions</span><span style="color: #333333;">()</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>ContextCompat<span style="color: #333333;">.</span><span style="color: #0000cc;">checkSelfPermission</span><span style="color: #333333;">(</span><span style="color: #008800; font-weight: bold;">this</span><span style="color: #333333;">,</span> Manifest<span style="color: #333333;">.</span><span style="color: #0000cc;">permission</span><span style="color: #333333;">.</span><span style="color: #0000cc;">ACCESS_FINE_LOCATION</span><span style="color: #333333;">)</span> <span style="color: #333333;">==</span> PackageManager<span style="color: #333333;">.</span><span style="color: #0000cc;">PERMISSION_GRANTED</span><span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
getLastLocation<span style="color: #333333;">();</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">else</span> <span style="color: #333333;">{</span>
ActivityCompat<span style="color: #333333;">.</span><span style="color: #0000cc;">requestPermissions</span><span style="color: #333333;">(</span><span style="color: #008800; font-weight: bold;">this</span><span style="color: #333333;">,</span> <span style="color: #008800; font-weight: bold;">new</span> String<span style="color: #333333;">[]{</span>Manifest<span style="color: #333333;">.</span><span style="color: #0000cc;">permission</span><span style="color: #333333;">.</span><span style="color: #0000cc;">WRITE_EXTERNAL_STORAGE</span><span style="color: #333333;">},</span> REQUEST_PERMISSIONS_REQUEST_CODE<span style="color: #333333;">);</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span>
<span style="color: #555555; font-weight: bold;">@Override</span>
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #333399; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">onRequestPermissionsResult</span><span style="color: #333333;">(</span><span style="color: #333399; font-weight: bold;">int</span> requestCode<span style="color: #333333;">,</span> <span style="color: #555555; font-weight: bold;">@NonNull</span> String<span style="color: #333333;">[]</span> permissions<span style="color: #333333;">,</span>
<span style="color: #555555; font-weight: bold;">@NonNull</span> <span style="color: #333399; font-weight: bold;">int</span><span style="color: #333333;">[]</span> grantResults<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>requestCode <span style="color: #333333;">==</span> REQUEST_PERMISSIONS_REQUEST_CODE<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>grantResults<span style="color: #333333;">.</span><span style="color: #0000cc;">length</span> <span style="color: #333333;"><=</span> <span style="color: #0000dd; font-weight: bold;">0</span><span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">else</span> <span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>grantResults<span style="color: #333333;">[</span><span style="color: #0000dd; font-weight: bold;">0</span><span style="color: #333333;">]</span> <span style="color: #333333;">==</span> PackageManager<span style="color: #333333;">.</span><span style="color: #0000cc;">PERMISSION_GRANTED</span><span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #888888;">// Permission granted.</span>
getLastLocation<span style="color: #333333;">();</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">else</span> <span style="color: #333333;">{</span>
Intent intent <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> Intent<span style="color: #333333;">();</span>
intent<span style="color: #333333;">.</span><span style="color: #0000cc;">setAction</span><span style="color: #333333;">(</span>
Settings<span style="color: #333333;">.</span><span style="color: #0000cc;">ACTION_APPLICATION_DETAILS_SETTINGS</span><span style="color: #333333;">);</span>
Uri uri <span style="color: #333333;">=</span> Uri<span style="color: #333333;">.</span><span style="color: #0000cc;">fromParts</span><span style="color: #333333;">(</span><span style="background-color: #fff0f0;">"package"</span><span style="color: #333333;">,</span>
BuildConfig<span style="color: #333333;">.</span><span style="color: #0000cc;">APPLICATION_ID</span><span style="color: #333333;">,</span> <span style="color: #008800; font-weight: bold;">null</span><span style="color: #333333;">);</span>
intent<span style="color: #333333;">.</span><span style="color: #0000cc;">setData</span><span style="color: #333333;">(</span>uri<span style="color: #333333;">);</span>
intent<span style="color: #333333;">.</span><span style="color: #0000cc;">setFlags</span><span style="color: #333333;">(</span>Intent<span style="color: #333333;">.</span><span style="color: #0000cc;">FLAG_ACTIVITY_NEW_TASK</span><span style="color: #333333;">);</span>
startActivity<span style="color: #333333;">(</span>intent<span style="color: #333333;">);</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span>
</pre>
</div>
<br />
<br />
<br />
<br />
<br /></div>
Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com0tag:blogger.com,1999:blog-1368316095367596493.post-78037865820807761382018-02-22T16:23:00.001+05:302018-02-22T17:44:48.237+05:30Android Take Photo from Camera and Gallery<div dir="ltr" style="text-align: left;" trbidi="on"><br />
A Simple example application to capture image/ selecting image from gallery.<br />
<br />
This application includes sd card permission checking and FileUrilExposedException issue fix..<br />
<br />
<br />
<b>Step 1:</b><br />
=========<br />
Create an Activity like below<br />
<br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">package</span> org<span style="color: #333333;">.</span><span style="color: #0000cc;">pratap</span><span style="color: #333333;">.</span><span style="color: #0000cc;">cameraexample</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.Manifest</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.content.ActivityNotFoundException</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.content.Context</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.content.Intent</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.content.pm.PackageManager</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.database.Cursor</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.net.Uri</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.os.Build</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.os.Bundle</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.os.Environment</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.os.Handler</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.os.Message</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.provider.MediaStore</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.support.v4.app.ActivityCompat</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.support.v4.content.ContextCompat</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.support.v4.content.FileProvider</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.support.v7.app.AppCompatActivity</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.view.View</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.widget.Button</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.widget.ImageView</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">android.widget.Toast</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">com.bumptech.glide.Glide</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">java.io.File</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">java.io.IOException</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">java.text.SimpleDateFormat</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">import</span> <span style="color: #0e84b5; font-weight: bold;">java.util.Date</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">MainActivity</span> <span style="color: #008800; font-weight: bold;">extends</span> AppCompatActivity <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">final</span> <span style="color: #333399; font-weight: bold;">int</span> REQUEST_PERMISSIONS <span style="color: #333333;">=</span> <span style="color: #0000dd; font-weight: bold;">1001</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">final</span> <span style="color: #333399; font-weight: bold;">int</span> DELAY_TIME <span style="color: #333333;">=</span> <span style="color: #0000dd; font-weight: bold;">1000</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">private</span> <span style="color: #008800; font-weight: bold;">static</span> <span style="color: #333399; font-weight: bold;">int</span> NEW_IMAGE <span style="color: #333333;">=</span> <span style="color: #0000dd; font-weight: bold;">0</span><span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">private</span> <span style="color: #008800; font-weight: bold;">static</span> <span style="color: #333399; font-weight: bold;">int</span> EXISTING_IMAGE <span style="color: #333333;">=</span> <span style="color: #0000dd; font-weight: bold;">1</span><span style="color: #333333;">;</span>
Button btn_capture_image<span style="color: #333333;">,</span> btn_galley_image<span style="color: #333333;">;</span>
ImageView img_photo<span style="color: #333333;">;</span>
String imageFilePath <span style="color: #333333;">=</span> <span style="background-color: #fff0f0;">""</span><span style="color: #333333;">;</span>
<span style="color: #333399; font-weight: bold;">int</span> imageType <span style="color: #333333;">=</span> <span style="color: #0000dd; font-weight: bold;">0</span><span style="color: #333333;">;</span>
<span style="color: #555555; font-weight: bold;">@Override</span>
<span style="color: #008800; font-weight: bold;">protected</span> <span style="color: #333399; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">onCreate</span><span style="color: #333333;">(</span>Bundle savedInstanceState<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">super</span><span style="color: #333333;">.</span><span style="color: #0000cc;">onCreate</span><span style="color: #333333;">(</span>savedInstanceState<span style="color: #333333;">);</span>
setContentView<span style="color: #333333;">(</span>R<span style="color: #333333;">.</span><span style="color: #0000cc;">layout</span><span style="color: #333333;">.</span><span style="color: #0000cc;">activity_main</span><span style="color: #333333;">);</span>
btn_capture_image <span style="color: #333333;">=</span> <span style="color: #333333;">(</span>Button<span style="color: #333333;">)</span> findViewById<span style="color: #333333;">(</span>R<span style="color: #333333;">.</span><span style="color: #0000cc;">id</span><span style="color: #333333;">.</span><span style="color: #0000cc;">btn_capture_image</span><span style="color: #333333;">);</span>
btn_galley_image <span style="color: #333333;">=</span> <span style="color: #333333;">(</span>Button<span style="color: #333333;">)</span> findViewById<span style="color: #333333;">(</span>R<span style="color: #333333;">.</span><span style="color: #0000cc;">id</span><span style="color: #333333;">.</span><span style="color: #0000cc;">btn_galley_image</span><span style="color: #333333;">);</span>
img_photo <span style="color: #333333;">=</span> <span style="color: #333333;">(</span>ImageView<span style="color: #333333;">)</span> findViewById<span style="color: #333333;">(</span>R<span style="color: #333333;">.</span><span style="color: #0000cc;">id</span><span style="color: #333333;">.</span><span style="color: #0000cc;">img_photo</span><span style="color: #333333;">);</span>
img_photo<span style="color: #333333;">.</span><span style="color: #0000cc;">setOnClickListener</span><span style="color: #333333;">(</span><span style="color: #008800; font-weight: bold;">new</span> View<span style="color: #333333;">.</span><span style="color: #0000cc;">OnClickListener</span><span style="color: #333333;">()</span> <span style="color: #333333;">{</span>
<span style="color: #555555; font-weight: bold;">@Override</span>
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #333399; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">onClick</span><span style="color: #333333;">(</span>View v<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
viewImage<span style="color: #333333;">();</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">});</span>
btn_capture_image<span style="color: #333333;">.</span><span style="color: #0000cc;">setOnClickListener</span><span style="color: #333333;">(</span><span style="color: #008800; font-weight: bold;">new</span> View<span style="color: #333333;">.</span><span style="color: #0000cc;">OnClickListener</span><span style="color: #333333;">()</span> <span style="color: #333333;">{</span>
<span style="color: #555555; font-weight: bold;">@Override</span>
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #333399; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">onClick</span><span style="color: #333333;">(</span>View v<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
checkPermissions<span style="color: #333333;">();</span>
<span style="color: #888888;">// for camera image</span>
imageType <span style="color: #333333;">=</span> <span style="color: #0000dd; font-weight: bold;">0</span><span style="color: #333333;">;</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">});</span>
btn_galley_image<span style="color: #333333;">.</span><span style="color: #0000cc;">setOnClickListener</span><span style="color: #333333;">(</span><span style="color: #008800; font-weight: bold;">new</span> View<span style="color: #333333;">.</span><span style="color: #0000cc;">OnClickListener</span><span style="color: #333333;">()</span> <span style="color: #333333;">{</span>
<span style="color: #555555; font-weight: bold;">@Override</span>
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #333399; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">onClick</span><span style="color: #333333;">(</span>View v<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
checkPermissions<span style="color: #333333;">();</span>
<span style="color: #888888;">// for gallery image</span>
imageType <span style="color: #333333;">=</span> <span style="color: #0000dd; font-weight: bold;">1</span><span style="color: #333333;">;</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">});</span>
<span style="color: #333333;">}</span>
<span style="color: #008800; font-weight: bold;">private</span> <span style="color: #333399; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">checkPermissions</span><span style="color: #333333;">()</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>ContextCompat<span style="color: #333333;">.</span><span style="color: #0000cc;">checkSelfPermission</span><span style="color: #333333;">(</span><span style="color: #008800; font-weight: bold;">this</span><span style="color: #333333;">,</span> Manifest<span style="color: #333333;">.</span><span style="color: #0000cc;">permission</span><span style="color: #333333;">.</span><span style="color: #0000cc;">WRITE_EXTERNAL_STORAGE</span><span style="color: #333333;">)</span> <span style="color: #333333;">==</span> PackageManager<span style="color: #333333;">.</span><span style="color: #0000cc;">PERMISSION_GRANTED</span><span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
mHandler<span style="color: #333333;">.</span><span style="color: #0000cc;">sendEmptyMessageDelayed</span><span style="color: #333333;">(</span><span style="color: #0000dd; font-weight: bold;">1</span><span style="color: #333333;">,</span> DELAY_TIME<span style="color: #333333;">);</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">else</span> <span style="color: #333333;">{</span>
ActivityCompat<span style="color: #333333;">.</span><span style="color: #0000cc;">requestPermissions</span><span style="color: #333333;">(</span><span style="color: #008800; font-weight: bold;">this</span><span style="color: #333333;">,</span> <span style="color: #008800; font-weight: bold;">new</span> String<span style="color: #333333;">[]{</span>Manifest<span style="color: #333333;">.</span><span style="color: #0000cc;">permission</span><span style="color: #333333;">.</span><span style="color: #0000cc;">WRITE_EXTERNAL_STORAGE</span><span style="color: #333333;">},</span> REQUEST_PERMISSIONS<span style="color: #333333;">);</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span>
<span style="color: #555555; font-weight: bold;">@Override</span>
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #333399; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">onRequestPermissionsResult</span><span style="color: #333333;">(</span><span style="color: #333399; font-weight: bold;">int</span> requestCode<span style="color: #333333;">,</span> String<span style="color: #333333;">[]</span> permissions<span style="color: #333333;">,</span> <span style="color: #333399; font-weight: bold;">int</span><span style="color: #333333;">[]</span> grantResults<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">super</span><span style="color: #333333;">.</span><span style="color: #0000cc;">onRequestPermissionsResult</span><span style="color: #333333;">(</span>requestCode<span style="color: #333333;">,</span> permissions<span style="color: #333333;">,</span> grantResults<span style="color: #333333;">);</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>requestCode <span style="color: #333333;">==</span> REQUEST_PERMISSIONS<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>grantResults<span style="color: #333333;">.</span><span style="color: #0000cc;">length</span> <span style="color: #333333;">></span> <span style="color: #0000dd; font-weight: bold;">0</span> <span style="color: #333333;">&&</span> grantResults<span style="color: #333333;">[</span><span style="color: #0000dd; font-weight: bold;">0</span><span style="color: #333333;">]</span> <span style="color: #333333;">==</span> PackageManager<span style="color: #333333;">.</span><span style="color: #0000cc;">PERMISSION_GRANTED</span><span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #888888;">// permission was granted</span>
mHandler<span style="color: #333333;">.</span><span style="color: #0000cc;">sendEmptyMessageDelayed</span><span style="color: #333333;">(</span><span style="color: #0000dd; font-weight: bold;">1</span><span style="color: #333333;">,</span> DELAY_TIME<span style="color: #333333;">);</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">else</span> <span style="color: #333333;">{</span>
<span style="color: #888888;">// permission denied, boo!</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span>
<span style="color: #008800; font-weight: bold;">private</span> Handler mHandler <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> Handler<span style="color: #333333;">()</span> <span style="color: #333333;">{</span>
<span style="color: #555555; font-weight: bold;">@Override</span>
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #333399; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">handleMessage</span><span style="color: #333333;">(</span>Message msg<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>msg<span style="color: #333333;">.</span><span style="color: #0000cc;">what</span> <span style="color: #333333;">==</span> <span style="color: #0000dd; font-weight: bold;">1</span><span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #888888;">// code goes here after getting permission</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>imageType <span style="color: #333333;">==</span> <span style="color: #0000dd; font-weight: bold;">0</span><span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
takePictureFromCamera<span style="color: #333333;">();</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">else</span> <span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>imageType <span style="color: #333333;">==</span> <span style="color: #0000dd; font-weight: bold;">1</span><span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
pictureFromGallery<span style="color: #333333;">();</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">};</span>
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #333399; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">takePictureFromCamera</span><span style="color: #333333;">()</span> <span style="color: #333333;">{</span>
imageFilePath <span style="color: #333333;">=</span> <span style="background-color: #fff0f0;">""</span><span style="color: #333333;">;</span>
File imageFile <span style="color: #333333;">=</span> createFileName<span style="color: #333333;">();</span>
imageFilePath <span style="color: #333333;">=</span> imageFile<span style="color: #333333;">.</span><span style="color: #0000cc;">getAbsolutePath</span><span style="color: #333333;">();</span>
Uri outputFileUri <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">null</span><span style="color: #333333;">;</span>
<span style="color: #888888;">// if you are running nougat and above there is chance to crash</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>Build<span style="color: #333333;">.</span><span style="color: #0000cc;">VERSION</span><span style="color: #333333;">.</span><span style="color: #0000cc;">SDK_INT</span> <span style="color: #333333;">>=</span> <span style="color: #0000dd; font-weight: bold;">24</span><span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
outputFileUri <span style="color: #333333;">=</span> FileProvider<span style="color: #333333;">.</span><span style="color: #0000cc;">getUriForFile</span><span style="color: #333333;">(</span>MainActivity<span style="color: #333333;">.</span><span style="color: #0000cc;">this</span><span style="color: #333333;">,</span>
BuildConfig<span style="color: #333333;">.</span><span style="color: #0000cc;">APPLICATION_ID</span> <span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">".provider"</span><span style="color: #333333;">,</span>
imageFile<span style="color: #333333;">);</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">else</span> <span style="color: #333333;">{</span>
outputFileUri <span style="color: #333333;">=</span> Uri<span style="color: #333333;">.</span><span style="color: #0000cc;">fromFile</span><span style="color: #333333;">(</span>imageFile<span style="color: #333333;">);</span>
<span style="color: #333333;">}</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>outputFileUri <span style="color: #333333;">!=</span> <span style="color: #008800; font-weight: bold;">null</span><span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
Intent cameraIntent <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> Intent<span style="color: #333333;">(</span>MediaStore<span style="color: #333333;">.</span><span style="color: #0000cc;">ACTION_IMAGE_CAPTURE</span><span style="color: #333333;">);</span>
cameraIntent<span style="color: #333333;">.</span><span style="color: #0000cc;">putExtra</span><span style="color: #333333;">(</span>MediaStore<span style="color: #333333;">.</span><span style="color: #0000cc;">EXTRA_OUTPUT</span><span style="color: #333333;">,</span> outputFileUri<span style="color: #333333;">);</span>
startActivityForResult<span style="color: #333333;">(</span>cameraIntent<span style="color: #333333;">,</span> NEW_IMAGE<span style="color: #333333;">);</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">else</span> <span style="color: #333333;">{</span>
Toast<span style="color: #333333;">.</span><span style="color: #0000cc;">makeText</span><span style="color: #333333;">(</span><span style="color: #008800; font-weight: bold;">this</span><span style="color: #333333;">,</span> <span style="background-color: #fff0f0;">"URI not found"</span><span style="color: #333333;">,</span> Toast<span style="color: #333333;">.</span><span style="color: #0000cc;">LENGTH_SHORT</span><span style="color: #333333;">).</span><span style="color: #0000cc;">show</span><span style="color: #333333;">();</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span>
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #333399; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">pictureFromGallery</span><span style="color: #333333;">()</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">try</span> <span style="color: #333333;">{</span>
Intent i <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> Intent<span style="color: #333333;">(</span>
Intent<span style="color: #333333;">.</span><span style="color: #0000cc;">ACTION_PICK</span><span style="color: #333333;">,</span>
MediaStore<span style="color: #333333;">.</span><span style="color: #0000cc;">Images</span><span style="color: #333333;">.</span><span style="color: #0000cc;">Media</span><span style="color: #333333;">.</span><span style="color: #0000cc;">EXTERNAL_CONTENT_URI</span><span style="color: #333333;">);</span>
startActivityForResult<span style="color: #333333;">(</span>i<span style="color: #333333;">,</span> EXISTING_IMAGE<span style="color: #333333;">);</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">catch</span> <span style="color: #333333;">(</span>ActivityNotFoundException anfe<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #888888;">// display an error message</span>
String errorMessage <span style="color: #333333;">=</span> <span style="background-color: #fff0f0;">"Your device doesn't have gallery"</span><span style="color: #333333;">;</span>
Toast toast <span style="color: #333333;">=</span> Toast
<span style="color: #333333;">.</span><span style="color: #0000cc;">makeText</span><span style="color: #333333;">(</span><span style="color: #008800; font-weight: bold;">this</span><span style="color: #333333;">,</span> errorMessage<span style="color: #333333;">,</span> Toast<span style="color: #333333;">.</span><span style="color: #0000cc;">LENGTH_SHORT</span><span style="color: #333333;">);</span>
toast<span style="color: #333333;">.</span><span style="color: #0000cc;">show</span><span style="color: #333333;">();</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span>
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #333399; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">viewImage</span><span style="color: #333333;">()</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>imageFilePath<span style="color: #333333;">.</span><span style="color: #0000cc;">length</span><span style="color: #333333;">()</span> <span style="color: #333333;">!=</span> <span style="color: #0000dd; font-weight: bold;">0</span><span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">try</span> <span style="color: #333333;">{</span>
File file <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> File<span style="color: #333333;">(</span>imageFilePath<span style="color: #333333;">);</span>
String documentType <span style="color: #333333;">=</span> getFileExtension<span style="color: #333333;">(</span>file<span style="color: #333333;">);</span>
Uri uri <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">null</span><span style="color: #333333;">;</span>
Intent intent <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> Intent<span style="color: #333333;">();</span>
intent<span style="color: #333333;">.</span><span style="color: #0000cc;">setAction</span><span style="color: #333333;">(</span>Intent<span style="color: #333333;">.</span><span style="color: #0000cc;">ACTION_VIEW</span><span style="color: #333333;">);</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>Build<span style="color: #333333;">.</span><span style="color: #0000cc;">VERSION</span><span style="color: #333333;">.</span><span style="color: #0000cc;">SDK_INT</span> <span style="color: #333333;">>=</span> <span style="color: #0000dd; font-weight: bold;">24</span><span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
uri <span style="color: #333333;">=</span> FileProvider<span style="color: #333333;">.</span><span style="color: #0000cc;">getUriForFile</span><span style="color: #333333;">(</span>MainActivity<span style="color: #333333;">.</span><span style="color: #0000cc;">this</span><span style="color: #333333;">,</span>
BuildConfig<span style="color: #333333;">.</span><span style="color: #0000cc;">APPLICATION_ID</span> <span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">".provider"</span><span style="color: #333333;">,</span>
file<span style="color: #333333;">);</span>
intent<span style="color: #333333;">.</span><span style="color: #0000cc;">addFlags</span><span style="color: #333333;">(</span>Intent<span style="color: #333333;">.</span><span style="color: #0000cc;">FLAG_GRANT_READ_URI_PERMISSION</span><span style="color: #333333;">);</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">else</span> <span style="color: #333333;">{</span>
uri <span style="color: #333333;">=</span> Uri<span style="color: #333333;">.</span><span style="color: #0000cc;">fromFile</span><span style="color: #333333;">(</span>file<span style="color: #333333;">);</span>
<span style="color: #333333;">}</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>documentType<span style="color: #333333;">.</span><span style="color: #0000cc;">equalsIgnoreCase</span><span style="color: #333333;">(</span><span style="background-color: #fff0f0;">"jpg"</span><span style="color: #333333;">))</span> <span style="color: #333333;">{</span>
intent<span style="color: #333333;">.</span><span style="color: #0000cc;">setDataAndType</span><span style="color: #333333;">(</span>uri<span style="color: #333333;">,</span> <span style="background-color: #fff0f0;">"image/jpeg"</span><span style="color: #333333;">);</span>
startActivity<span style="color: #333333;">(</span>intent<span style="color: #333333;">);</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">else</span> <span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>documentType<span style="color: #333333;">.</span><span style="color: #0000cc;">equalsIgnoreCase</span><span style="color: #333333;">(</span><span style="background-color: #fff0f0;">"png"</span><span style="color: #333333;">))</span> <span style="color: #333333;">{</span>
intent<span style="color: #333333;">.</span><span style="color: #0000cc;">setDataAndType</span><span style="color: #333333;">(</span>uri<span style="color: #333333;">,</span> <span style="background-color: #fff0f0;">"image/png"</span><span style="color: #333333;">);</span>
startActivity<span style="color: #333333;">(</span>intent<span style="color: #333333;">);</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">else</span> <span style="color: #333333;">{</span>
intent<span style="color: #333333;">.</span><span style="color: #0000cc;">setDataAndType</span><span style="color: #333333;">(</span>uri<span style="color: #333333;">,</span> <span style="background-color: #fff0f0;">"*/*"</span><span style="color: #333333;">);</span>
startActivity<span style="color: #333333;">(</span>intent<span style="color: #333333;">);</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">catch</span> <span style="color: #333333;">(</span>ActivityNotFoundException e<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
e<span style="color: #333333;">.</span><span style="color: #0000cc;">printStackTrace</span><span style="color: #333333;">();</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">else</span> <span style="color: #333333;">{</span>
Toast<span style="color: #333333;">.</span><span style="color: #0000cc;">makeText</span><span style="color: #333333;">(</span>MainActivity<span style="color: #333333;">.</span><span style="color: #0000cc;">this</span><span style="color: #333333;">,</span> <span style="background-color: #fff0f0;">"Image not selected.Please Select Image First"</span><span style="color: #333333;">,</span> Toast<span style="color: #333333;">.</span><span style="color: #0000cc;">LENGTH_SHORT</span><span style="color: #333333;">).</span><span style="color: #0000cc;">show</span><span style="color: #333333;">();</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span>
<span style="color: #008800; font-weight: bold;">public</span> File <span style="color: #0066bb; font-weight: bold;">createFileName</span><span style="color: #333333;">()</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">final</span> String dir <span style="color: #333333;">=</span> Environment<span style="color: #333333;">.</span><span style="color: #0000cc;">getExternalStoragePublicDirectory</span><span style="color: #333333;">(</span>Environment<span style="color: #333333;">.</span><span style="color: #0000cc;">DIRECTORY_PICTURES</span><span style="color: #333333;">)</span> <span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">"/CameraEx/Images/"</span><span style="color: #333333;">;</span>
File newDir <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> File<span style="color: #333333;">(</span>dir<span style="color: #333333;">);</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(!</span>newDir<span style="color: #333333;">.</span><span style="color: #0000cc;">exists</span><span style="color: #333333;">())</span> <span style="color: #333333;">{</span>
newDir<span style="color: #333333;">.</span><span style="color: #0000cc;">mkdirs</span><span style="color: #333333;">();</span>
<span style="color: #333333;">}</span>
String newFilename <span style="color: #333333;">=</span> <span style="background-color: #fff0f0;">""</span><span style="color: #333333;">;</span>
Date date <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> Date<span style="color: #333333;">();</span>
SimpleDateFormat sdf <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> SimpleDateFormat<span style="color: #333333;">(</span><span style="background-color: #fff0f0;">"yyyyMMddHHmmss"</span><span style="color: #333333;">);</span>
newFilename <span style="color: #333333;">=</span> sdf<span style="color: #333333;">.</span><span style="color: #0000cc;">format</span><span style="color: #333333;">(</span>date<span style="color: #333333;">);</span>
String filePath <span style="color: #333333;">=</span> dir <span style="color: #333333;">+</span> newFilename <span style="color: #333333;">+</span> <span style="background-color: #fff0f0;">".jpg"</span><span style="color: #333333;">;</span>
File newFile <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> File<span style="color: #333333;">(</span>filePath<span style="color: #333333;">);</span>
<span style="color: #008800; font-weight: bold;">try</span> <span style="color: #333333;">{</span>
newFile<span style="color: #333333;">.</span><span style="color: #0000cc;">createNewFile</span><span style="color: #333333;">();</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">catch</span> <span style="color: #333333;">(</span>IOException e<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #333333;">}</span>
<span style="color: #008800; font-weight: bold;">return</span> newFile<span style="color: #333333;">;</span>
<span style="color: #333333;">}</span>
<span style="color: #555555; font-weight: bold;">@Override</span>
<span style="color: #008800; font-weight: bold;">protected</span> <span style="color: #333399; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">onActivityResult</span><span style="color: #333333;">(</span><span style="color: #333399; font-weight: bold;">int</span> requestCode<span style="color: #333333;">,</span> <span style="color: #333399; font-weight: bold;">int</span> resultCode<span style="color: #333333;">,</span> Intent data<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">super</span><span style="color: #333333;">.</span><span style="color: #0000cc;">onActivityResult</span><span style="color: #333333;">(</span>requestCode<span style="color: #333333;">,</span> resultCode<span style="color: #333333;">,</span> data<span style="color: #333333;">);</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>requestCode <span style="color: #333333;">==</span> EXISTING_IMAGE <span style="color: #333333;">&&</span> resultCode <span style="color: #333333;">==</span> RESULT_OK
<span style="color: #333333;">&&</span> <span style="color: #008800; font-weight: bold;">null</span> <span style="color: #333333;">!=</span> data<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">try</span> <span style="color: #333333;">{</span>
Uri selectedImage <span style="color: #333333;">=</span> data<span style="color: #333333;">.</span><span style="color: #0000cc;">getData</span><span style="color: #333333;">();</span>
String<span style="color: #333333;">[]</span> filePathColumn <span style="color: #333333;">=</span> <span style="color: #333333;">{</span>MediaStore<span style="color: #333333;">.</span><span style="color: #0000cc;">Images</span><span style="color: #333333;">.</span><span style="color: #0000cc;">Media</span><span style="color: #333333;">.</span><span style="color: #0000cc;">DATA</span><span style="color: #333333;">};</span>
Cursor cursor <span style="color: #333333;">=</span> getContentResolver<span style="color: #333333;">().</span><span style="color: #0000cc;">query</span><span style="color: #333333;">(</span>selectedImage<span style="color: #333333;">,</span>
filePathColumn<span style="color: #333333;">,</span> <span style="color: #008800; font-weight: bold;">null</span><span style="color: #333333;">,</span> <span style="color: #008800; font-weight: bold;">null</span><span style="color: #333333;">,</span> <span style="color: #008800; font-weight: bold;">null</span><span style="color: #333333;">);</span>
cursor<span style="color: #333333;">.</span><span style="color: #0000cc;">moveToFirst</span><span style="color: #333333;">();</span>
<span style="color: #333399; font-weight: bold;">int</span> columnIndex <span style="color: #333333;">=</span> cursor<span style="color: #333333;">.</span><span style="color: #0000cc;">getColumnIndex</span><span style="color: #333333;">(</span>filePathColumn<span style="color: #333333;">[</span><span style="color: #0000dd; font-weight: bold;">0</span><span style="color: #333333;">]);</span>
String picturePath <span style="color: #333333;">=</span> cursor<span style="color: #333333;">.</span><span style="color: #0000cc;">getString</span><span style="color: #333333;">(</span>columnIndex<span style="color: #333333;">);</span>
cursor<span style="color: #333333;">.</span><span style="color: #0000cc;">close</span><span style="color: #333333;">();</span>
imageFilePath <span style="color: #333333;">=</span> picturePath<span style="color: #333333;">;</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>imageFilePath<span style="color: #333333;">.</span><span style="color: #0000cc;">length</span><span style="color: #333333;">()</span> <span style="color: #333333;">!=</span> <span style="color: #0000dd; font-weight: bold;">0</span><span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #888888;">// set ImageView with File Path</span>
setImage<span style="color: #333333;">(</span>MainActivity<span style="color: #333333;">.</span><span style="color: #0000cc;">this</span><span style="color: #333333;">,</span> imageFilePath<span style="color: #333333;">,</span> img_photo<span style="color: #333333;">);</span>
Toast<span style="color: #333333;">.</span><span style="color: #0000cc;">makeText</span><span style="color: #333333;">(</span>MainActivity<span style="color: #333333;">.</span><span style="color: #0000cc;">this</span><span style="color: #333333;">,</span> <span style="background-color: #fff0f0;">"Image Saved : "</span> <span style="color: #333333;">+</span> imageFilePath<span style="color: #333333;">,</span> Toast<span style="color: #333333;">.</span><span style="color: #0000cc;">LENGTH_SHORT</span><span style="color: #333333;">).</span><span style="color: #0000cc;">show</span><span style="color: #333333;">();</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">else</span> <span style="color: #333333;">{</span>
Toast<span style="color: #333333;">.</span><span style="color: #0000cc;">makeText</span><span style="color: #333333;">(</span>MainActivity<span style="color: #333333;">.</span><span style="color: #0000cc;">this</span><span style="color: #333333;">,</span> <span style="background-color: #fff0f0;">"Image not selected.Please try again"</span><span style="color: #333333;">,</span> Toast<span style="color: #333333;">.</span><span style="color: #0000cc;">LENGTH_SHORT</span><span style="color: #333333;">).</span><span style="color: #0000cc;">show</span><span style="color: #333333;">();</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">catch</span> <span style="color: #333333;">(</span>Exception e<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">else</span> <span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>requestCode <span style="color: #333333;">==</span> NEW_IMAGE <span style="color: #333333;">&&</span> resultCode <span style="color: #333333;">==</span> RESULT_OK<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>imageFilePath<span style="color: #333333;">.</span><span style="color: #0000cc;">length</span><span style="color: #333333;">()</span> <span style="color: #333333;">!=</span> <span style="color: #0000dd; font-weight: bold;">0</span><span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #888888;">// set ImageView with File Path</span>
setImage<span style="color: #333333;">(</span>MainActivity<span style="color: #333333;">.</span><span style="color: #0000cc;">this</span><span style="color: #333333;">,</span> imageFilePath<span style="color: #333333;">,</span> img_photo<span style="color: #333333;">);</span>
Toast<span style="color: #333333;">.</span><span style="color: #0000cc;">makeText</span><span style="color: #333333;">(</span>MainActivity<span style="color: #333333;">.</span><span style="color: #0000cc;">this</span><span style="color: #333333;">,</span> <span style="background-color: #fff0f0;">"Image Saved : "</span> <span style="color: #333333;">+</span> imageFilePath<span style="color: #333333;">,</span> Toast<span style="color: #333333;">.</span><span style="color: #0000cc;">LENGTH_SHORT</span><span style="color: #333333;">).</span><span style="color: #0000cc;">show</span><span style="color: #333333;">();</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">else</span> <span style="color: #333333;">{</span>
Toast<span style="color: #333333;">.</span><span style="color: #0000cc;">makeText</span><span style="color: #333333;">(</span>MainActivity<span style="color: #333333;">.</span><span style="color: #0000cc;">this</span><span style="color: #333333;">,</span> <span style="background-color: #fff0f0;">"Image not selected.Please try again"</span><span style="color: #333333;">,</span> Toast<span style="color: #333333;">.</span><span style="color: #0000cc;">LENGTH_SHORT</span><span style="color: #333333;">).</span><span style="color: #0000cc;">show</span><span style="color: #333333;">();</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span>
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #333399; font-weight: bold;">void</span> <span style="color: #0066bb; font-weight: bold;">setImage</span><span style="color: #333333;">(</span>Context ctx<span style="color: #333333;">,</span> String filePath<span style="color: #333333;">,</span> ImageView imgView<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
File actualImage <span style="color: #333333;">=</span> <span style="color: #008800; font-weight: bold;">new</span> File<span style="color: #333333;">(</span>filePath<span style="color: #333333;">);</span>
<span style="color: #008800; font-weight: bold;">if</span> <span style="color: #333333;">(</span>actualImage<span style="color: #333333;">.</span><span style="color: #0000cc;">exists</span><span style="color: #333333;">())</span> <span style="color: #333333;">{</span>
Glide<span style="color: #333333;">.</span><span style="color: #0000cc;">with</span><span style="color: #333333;">(</span>ctx<span style="color: #333333;">)</span>
<span style="color: #333333;">.</span><span style="color: #0000cc;">load</span><span style="color: #333333;">(</span>actualImage<span style="color: #333333;">)</span>
<span style="color: #333333;">.</span><span style="color: #0000cc;">centerCrop</span><span style="color: #333333;">()</span>
<span style="color: #333333;">.</span><span style="color: #0000cc;">into</span><span style="color: #333333;">(</span>imgView<span style="color: #333333;">);</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">else</span> <span style="color: #333333;">{</span>
Toast<span style="color: #333333;">.</span><span style="color: #0000cc;">makeText</span><span style="color: #333333;">(</span>ctx<span style="color: #333333;">,</span> <span style="background-color: #fff0f0;">"No File exists"</span><span style="color: #333333;">,</span> Toast<span style="color: #333333;">.</span><span style="color: #0000cc;">LENGTH_SHORT</span><span style="color: #333333;">).</span><span style="color: #0000cc;">show</span><span style="color: #333333;">();</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span>
<span style="color: #008800; font-weight: bold;">public</span> String <span style="color: #0066bb; font-weight: bold;">getFileExtension</span><span style="color: #333333;">(</span>File file<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
String name <span style="color: #333333;">=</span> file<span style="color: #333333;">.</span><span style="color: #0000cc;">getName</span><span style="color: #333333;">();</span>
<span style="color: #008800; font-weight: bold;">try</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">return</span> name<span style="color: #333333;">.</span><span style="color: #0000cc;">substring</span><span style="color: #333333;">(</span>name<span style="color: #333333;">.</span><span style="color: #0000cc;">lastIndexOf</span><span style="color: #333333;">(</span><span style="background-color: #fff0f0;">"."</span><span style="color: #333333;">)</span> <span style="color: #333333;">+</span> <span style="color: #0000dd; font-weight: bold;">1</span><span style="color: #333333;">);</span>
<span style="color: #333333;">}</span> <span style="color: #008800; font-weight: bold;">catch</span> <span style="color: #333333;">(</span>Exception e<span style="color: #333333;">)</span> <span style="color: #333333;">{</span>
<span style="color: #008800; font-weight: bold;">return</span> <span style="background-color: #fff0f0;">""</span><span style="color: #333333;">;</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span>
<span style="color: #333333;">}</span>
</pre></div><br />
<br />
XML Layout for the Activity<br />
<br />
<b>activity_main.xml</b><br />
==============<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0;"><span style="color: #557799;"><?xml version="1.0" encoding="utf-8"?></span>
<span style="color: #007700;"><LinearLayout</span> <span style="color: #0000cc;">xmlns:android=</span><span style="background-color: #fff0f0;">"http://schemas.android.com/apk/res/android"</span>
<span style="color: #0000cc;">xmlns:tools=</span><span style="background-color: #fff0f0;">"http://schemas.android.com/tools"</span>
<span style="color: #0000cc;">android:layout_width=</span><span style="background-color: #fff0f0;">"match_parent"</span>
<span style="color: #0000cc;">android:layout_height=</span><span style="background-color: #fff0f0;">"match_parent"</span>
<span style="color: #0000cc;">android:gravity=</span><span style="background-color: #fff0f0;">"center"</span>
<span style="color: #0000cc;">android:orientation=</span><span style="background-color: #fff0f0;">"vertical"</span>
<span style="color: #0000cc;">tools:context=</span><span style="background-color: #fff0f0;">"org.pratap.cameraexample.MainActivity"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><ImageView</span>
<span style="color: #0000cc;">android:id=</span><span style="background-color: #fff0f0;">"@+id/img_photo"</span>
<span style="color: #0000cc;">android:layout_width=</span><span style="background-color: #fff0f0;">"250dp"</span>
<span style="color: #0000cc;">android:layout_height=</span><span style="background-color: #fff0f0;">"250dp"</span>
<span style="color: #0000cc;">android:background=</span><span style="background-color: #fff0f0;">"#c9c9c9"</span>
<span style="color: #0000cc;">android:scaleType=</span><span style="background-color: #fff0f0;">"centerCrop"</span> <span style="color: #007700;">/></span>
<span style="color: #007700;"><LinearLayout</span>
<span style="color: #0000cc;">android:layout_width=</span><span style="background-color: #fff0f0;">"match_parent"</span>
<span style="color: #0000cc;">android:layout_height=</span><span style="background-color: #fff0f0;">"wrap_content"</span>
<span style="color: #0000cc;">android:layout_margin=</span><span style="background-color: #fff0f0;">"24dp"</span>
<span style="color: #0000cc;">android:orientation=</span><span style="background-color: #fff0f0;">"horizontal"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><Button</span>
<span style="color: #0000cc;">android:id=</span><span style="background-color: #fff0f0;">"@+id/btn_capture_image"</span>
<span style="color: #0000cc;">android:layout_width=</span><span style="background-color: #fff0f0;">"0dp"</span>
<span style="color: #0000cc;">android:layout_height=</span><span style="background-color: #fff0f0;">"wrap_content"</span>
<span style="color: #0000cc;">android:layout_weight=</span><span style="background-color: #fff0f0;">"1"</span>
<span style="color: #0000cc;">android:text=</span><span style="background-color: #fff0f0;">"Capture Image"</span> <span style="color: #007700;">/></span>
<span style="color: #007700;"><Button</span>
<span style="color: #0000cc;">android:id=</span><span style="background-color: #fff0f0;">"@+id/btn_galley_image"</span>
<span style="color: #0000cc;">android:layout_width=</span><span style="background-color: #fff0f0;">"0dp"</span>
<span style="color: #0000cc;">android:layout_height=</span><span style="background-color: #fff0f0;">"wrap_content"</span>
<span style="color: #0000cc;">android:layout_weight=</span><span style="background-color: #fff0f0;">"1"</span>
<span style="color: #0000cc;">android:text=</span><span style="background-color: #fff0f0;">"Galley Image"</span> <span style="color: #007700;">/></span>
<span style="color: #007700;"></LinearLayout></span>
<span style="color: #007700;"></LinearLayout></span>
</pre></div><br />
<br />
<br />
<b>ScreenShot for Preview:</b><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQngtYLbfPuCfVJ0l0wcbtbGQlPEJ56qYmaNaQt3f2dNfNZ6P5UaT6yNVDKAXi3AZPH5fk6UDABPmf8iTlw_iczZ3vGs1guYV5zQXJS19i8mDg1vWbpkrd2OPKKPVmJ4aq3izRR0Tanwxz/s1600/Screenshot_2018-02-22-16-09-21.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="720" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQngtYLbfPuCfVJ0l0wcbtbGQlPEJ56qYmaNaQt3f2dNfNZ6P5UaT6yNVDKAXi3AZPH5fk6UDABPmf8iTlw_iczZ3vGs1guYV5zQXJS19i8mDg1vWbpkrd2OPKKPVmJ4aq3izRR0Tanwxz/s320/Screenshot_2018-02-22-16-09-21.png" width="180" /></a></div> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtbFRV2r18OJ9V7M-UWV4ehJPcUj65FsubfkhfAVN5DzuRORpYdmnemN6M9CbPu__J7c7TNe_KiHhCtsDVIjZvoL6VmtcbBGiVJ01TqOrqIi88V7DciSbD_AcONtjSZNsblUgvEZ1EKZjo/s1600/Screenshot_2018-02-22-16-10-01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="1280" data-original-width="720" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtbFRV2r18OJ9V7M-UWV4ehJPcUj65FsubfkhfAVN5DzuRORpYdmnemN6M9CbPu__J7c7TNe_KiHhCtsDVIjZvoL6VmtcbBGiVJ01TqOrqIi88V7DciSbD_AcONtjSZNsblUgvEZ1EKZjo/s320/Screenshot_2018-02-22-16-10-01.png" width="180" /></a><br />
<br />
<br />
<br />
<b>Step 2:</b><br />
=========<br />
<br />
Add the following code in AndroidManifest.xml<br />
<br />
<br />
<provider<br />
android:name="android.support.v4.content.FileProvider"<br />
android:authorities="${applicationId}.provider"<br />
android:exported="false"<br />
android:grantUriPermissions="true"><br />
<meta-data<br />
android:name="android.support.FILE_PROVIDER_PATHS"<br />
android:resource="@xml/provider_paths" /><br />
</provider><br />
<br />
<br />
like below<br />
<br />
<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0;"><span style="color: #557799;"><?xml version="1.0" encoding="utf-8"?></span>
<span style="color: #007700;"><manifest</span> <span style="color: #0000cc;">xmlns:android=</span><span style="background-color: #fff0f0;">"http://schemas.android.com/apk/res/android"</span>
<span style="color: #0000cc;">package=</span><span style="background-color: #fff0f0;">"org.pratap.cameraexample"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><uses-permission</span> <span style="color: #0000cc;">android:name=</span><span style="background-color: #fff0f0;">"android.permission.WRITE_EXTERNAL_STORAGE"</span> <span style="color: #007700;">/></span>
<span style="color: #007700;"><uses-permission</span> <span style="color: #0000cc;">android:name=</span><span style="background-color: #fff0f0;">"android.permission.READ_EXTERNAL_STORAGE"</span> <span style="color: #007700;">/></span>
<span style="color: #007700;"><application</span>
<span style="color: #0000cc;">android:allowBackup=</span><span style="background-color: #fff0f0;">"true"</span>
<span style="color: #0000cc;">android:icon=</span><span style="background-color: #fff0f0;">"@mipmap/ic_launcher"</span>
<span style="color: #0000cc;">android:label=</span><span style="background-color: #fff0f0;">"@string/app_name"</span>
<span style="color: #0000cc;">android:roundIcon=</span><span style="background-color: #fff0f0;">"@mipmap/ic_launcher_round"</span>
<span style="color: #0000cc;">android:supportsRtl=</span><span style="background-color: #fff0f0;">"true"</span>
<span style="color: #0000cc;">android:theme=</span><span style="background-color: #fff0f0;">"@style/AppTheme"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><activity</span> <span style="color: #0000cc;">android:name=</span><span style="background-color: #fff0f0;">".MainActivity"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><intent-filter></span>
<span style="color: #007700;"><action</span> <span style="color: #0000cc;">android:name=</span><span style="background-color: #fff0f0;">"android.intent.action.MAIN"</span> <span style="color: #007700;">/></span>
<span style="color: #007700;"><category</span> <span style="color: #0000cc;">android:name=</span><span style="background-color: #fff0f0;">"android.intent.category.LAUNCHER"</span> <span style="color: #007700;">/></span>
<span style="color: #007700;"></intent-filter></span>
<span style="color: #007700;"></activity></span>
<span style="color: #007700;"><provider</span>
<span style="color: #0000cc;">android:name=</span><span style="background-color: #fff0f0;">"android.support.v4.content.FileProvider"</span>
<span style="color: #0000cc;">android:authorities=</span><span style="background-color: #fff0f0;">"${applicationId}.provider"</span>
<span style="color: #0000cc;">android:exported=</span><span style="background-color: #fff0f0;">"false"</span>
<span style="color: #0000cc;">android:grantUriPermissions=</span><span style="background-color: #fff0f0;">"true"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><meta-data</span>
<span style="color: #0000cc;">android:name=</span><span style="background-color: #fff0f0;">"android.support.FILE_PROVIDER_PATHS"</span>
<span style="color: #0000cc;">android:resource=</span><span style="background-color: #fff0f0;">"@xml/provider_paths"</span> <span style="color: #007700;">/></span>
<span style="color: #007700;"></provider></span>
<span style="color: #007700;"></application></span>
<span style="color: #007700;"></manifest></span>
</pre></div><br />
<br />
<b><br />
</b> <b>Step 3:</b><br />
=====<br />
<br />
create provider_paths xml file under xml folder <br />
<br />
path should be like this<br />
<br />
res/xml/provider_path.xml<br />
<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0;"><span style="color: #557799;"><?xml version="1.0" encoding="utf-8"?></span>
<span style="color: #007700;"><paths</span> <span style="color: #0000cc;">xmlns:android=</span><span style="background-color: #fff0f0;">"http://schemas.android.com/apk/res/android"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><external-path</span> <span style="color: #0000cc;">name=</span><span style="background-color: #fff0f0;">"external_files"</span> <span style="color: #0000cc;">path=</span><span style="background-color: #fff0f0;">"."</span><span style="color: #007700;">/></span>
<span style="color: #007700;"></paths></span>
</pre></div><br />
<br />
<br />
<br />
Some useful methods to convert Files to ByteArray or Base64 Encoded String <br />
<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #008800; font-weight: bold">public</span> <span style="color: #008800; font-weight: bold">static</span> String <span style="color: #0066BB; font-weight: bold">getEncodedString</span><span style="color: #333333">(</span>String filePath<span style="color: #333333">)</span> <span style="color: #008800; font-weight: bold">throws</span> FileNotFoundException<span style="color: #333333">,</span> IOException <span style="color: #333333">{</span>
String encodedDocument <span style="color: #333333">=</span> <span style="background-color: #fff0f0">""</span><span style="color: #333333">;</span>
File file <span style="color: #333333">=</span> <span style="color: #008800; font-weight: bold">new</span> File<span style="color: #333333">(</span>filePath<span style="color: #333333">);</span>
<span style="color: #333399; font-weight: bold">byte</span><span style="color: #333333">[]</span> binaryFile <span style="color: #333333">=</span> <span style="color: #008800; font-weight: bold">new</span> <span style="color: #333399; font-weight: bold">byte</span><span style="color: #333333">[(</span><span style="color: #333399; font-weight: bold">int</span><span style="color: #333333">)</span> file<span style="color: #333333">.</span><span style="color: #0000CC">length</span><span style="color: #333333">()];</span>
InputStream fis <span style="color: #333333">=</span> <span style="color: #008800; font-weight: bold">new</span> FileInputStream<span style="color: #333333">(</span>file<span style="color: #333333">);</span>
fis<span style="color: #333333">.</span><span style="color: #0000CC">read</span><span style="color: #333333">(</span>binaryFile<span style="color: #333333">);</span>
fis<span style="color: #333333">.</span><span style="color: #0000CC">close</span><span style="color: #333333">();</span>
encodedDocument <span style="color: #333333">=</span> Base64<span style="color: #333333">.</span><span style="color: #0000CC">encodeToString</span><span style="color: #333333">(</span>binaryFile<span style="color: #333333">,</span>
Base64<span style="color: #333333">.</span><span style="color: #0000CC">DEFAULT</span><span style="color: #333333">);</span>
<span style="color: #008800; font-weight: bold">return</span> encodedDocument<span style="color: #333333">;</span>
<span style="color: #333333">}</span>
<span style="color: #008800; font-weight: bold">public</span> <span style="color: #008800; font-weight: bold">static</span> <span style="color: #333399; font-weight: bold">byte</span><span style="color: #333333">[]</span> <span style="color: #0066BB; font-weight: bold">getFileByteArray</span><span style="color: #333333">(</span>String filePath<span style="color: #333333">)</span> <span style="color: #008800; font-weight: bold">throws</span> FileNotFoundException<span style="color: #333333">,</span> IOException <span style="color: #333333">{</span>
File file <span style="color: #333333">=</span> <span style="color: #008800; font-weight: bold">new</span> File<span style="color: #333333">(</span>filePath<span style="color: #333333">);</span>
FileInputStream fis <span style="color: #333333">=</span> <span style="color: #008800; font-weight: bold">new</span> FileInputStream<span style="color: #333333">(</span>file<span style="color: #333333">);</span>
ByteArrayOutputStream bos <span style="color: #333333">=</span> <span style="color: #008800; font-weight: bold">new</span> ByteArrayOutputStream<span style="color: #333333">();</span>
<span style="color: #333399; font-weight: bold">byte</span><span style="color: #333333">[]</span> buf <span style="color: #333333">=</span> <span style="color: #008800; font-weight: bold">new</span> <span style="color: #333399; font-weight: bold">byte</span><span style="color: #333333">[(</span><span style="color: #333399; font-weight: bold">int</span><span style="color: #333333">)</span> file<span style="color: #333333">.</span><span style="color: #0000CC">length</span><span style="color: #333333">()];</span>
<span style="color: #008800; font-weight: bold">try</span> <span style="color: #333333">{</span>
<span style="color: #008800; font-weight: bold">for</span> <span style="color: #333333">(</span><span style="color: #333399; font-weight: bold">int</span> readNum<span style="color: #333333">;</span> <span style="color: #333333">(</span>readNum <span style="color: #333333">=</span> fis<span style="color: #333333">.</span><span style="color: #0000CC">read</span><span style="color: #333333">(</span>buf<span style="color: #333333">))</span> <span style="color: #333333">!=</span> <span style="color: #333333">-</span><span style="color: #0000DD; font-weight: bold">1</span><span style="color: #333333">;</span> <span style="color: #333333">)</span> <span style="color: #333333">{</span>
bos<span style="color: #333333">.</span><span style="color: #0000CC">write</span><span style="color: #333333">(</span>buf<span style="color: #333333">,</span> <span style="color: #0000DD; font-weight: bold">0</span><span style="color: #333333">,</span> readNum<span style="color: #333333">);</span>
<span style="color: #333333">}</span>
<span style="color: #333333">}</span> <span style="color: #008800; font-weight: bold">catch</span> <span style="color: #333333">(</span>IOException ex<span style="color: #333333">)</span> <span style="color: #333333">{</span>
Log<span style="color: #333333">.</span><span style="color: #0000CC">d</span><span style="color: #333333">(</span><span style="background-color: #fff0f0">"error"</span><span style="color: #333333">,</span> <span style="background-color: #fff0f0">"error"</span><span style="color: #333333">);</span>
<span style="color: #333333">}</span>
<span style="color: #333399; font-weight: bold">byte</span><span style="color: #333333">[]</span> imagebytes <span style="color: #333333">=</span> bos<span style="color: #333333">.</span><span style="color: #0000CC">toByteArray</span><span style="color: #333333">();</span>
<span style="color: #008800; font-weight: bold">return</span> imagebytes<span style="color: #333333">;</span>
<span style="color: #333333">}</span>
</pre></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com0tag:blogger.com,1999:blog-1368316095367596493.post-58894670975093540072018-02-22T14:56:00.003+05:302018-02-22T14:57:25.375+05:30Android Runtime Permission Example<div dir="ltr" style="text-align: left;" trbidi="on"><br />
In Android OS (Marshmallow on wards) , google introduced run time permissions to access Storage, Camera, Location etc..<br />
<br />
Let see an example how to ask single permission in android<br />
<br />
Here is the Link for <a href="https://developer.android.com/guide/topics/permissions/overview.html#permission-groups">Dangerous permissions and permission groups.</a><br />
<br />
<br />
<br />
<br />
<b>Step 1 : </b><br />
<br />
AndroidManifest.xml<br />
<br />
let us add storage and location permission in manifest file<br />
<br />
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;"><pre style="line-height: 125%; margin: 0;"><span style="color: #557799;"><?xml version="1.0" encoding="utf-8"?></span>
<span style="color: #007700;"><manifest</span> <span style="color: #0000cc;">xmlns:android=</span><span style="background-color: #fff0f0;">"http://schemas.android.com/apk/res/android"</span>
<span style="color: #0000cc;">package=</span><span style="background-color: #fff0f0;">"org.pratap.runtimepermissions"</span><span style="color: #007700;">></span>
<span style="color: #888888;"><!-- Permission for writing and reading SD Card --></span>
<span style="color: #007700;"><uses-permission</span> <span style="color: #0000cc;">android:name=</span><span style="background-color: #fff0f0;">"android.permission.WRITE_EXTERNAL_STORAGE"</span> <span style="color: #007700;">/></span>
<span style="color: #007700;"><uses-permission</span> <span style="color: #0000cc;">android:name=</span><span style="background-color: #fff0f0;">"android.permission.READ_EXTERNAL_STORAGE"</span> <span style="color: #007700;">/></span>
<span style="color: #888888;"><!-- Permission for accessing user's current location --></span>
<span style="color: #007700;"><uses-permission</span> <span style="color: #0000cc;">android:name=</span><span style="background-color: #fff0f0;">"android.permission.ACCESS_FINE_LOCATION"</span> <span style="color: #007700;">/></span>
<span style="color: #007700;"><uses-permission</span> <span style="color: #0000cc;">android:name=</span><span style="background-color: #fff0f0;">"android.permission.ACCESS_COARSE_LOCATION"</span> <span style="color: #007700;">/></span>
<span style="color: #007700;"><application</span>
<span style="color: #0000cc;">android:allowBackup=</span><span style="background-color: #fff0f0;">"true"</span>
<span style="color: #0000cc;">android:icon=</span><span style="background-color: #fff0f0;">"@mipmap/ic_launcher"</span>
<span style="color: #0000cc;">android:label=</span><span style="background-color: #fff0f0;">"@string/app_name"</span>
<span style="color: #0000cc;">android:roundIcon=</span><span style="background-color: #fff0f0;">"@mipmap/ic_launcher_round"</span>
<span style="color: #0000cc;">android:supportsRtl=</span><span style="background-color: #fff0f0;">"true"</span>
<span style="color: #0000cc;">android:theme=</span><span style="background-color: #fff0f0;">"@style/AppTheme"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><activity</span> <span style="color: #0000cc;">android:name=</span><span style="background-color: #fff0f0;">".MainActivity"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><intent-filter></span>
<span style="color: #007700;"><action</span> <span style="color: #0000cc;">android:name=</span><span style="background-color: #fff0f0;">"android.intent.action.MAIN"</span> <span style="color: #007700;">/></span>
<span style="color: #007700;"><category</span> <span style="color: #0000cc;">android:name=</span><span style="background-color: #fff0f0;">"android.intent.category.LAUNCHER"</span> <span style="color: #007700;">/></span>
<span style="color: #007700;"></intent-filter></span>
<span style="color: #007700;"></activity></span>
<span style="color: #007700;"></application></span>
<span style="color: #007700;"></manifest></span>
</pre></div><br />
<br />
<br />
<br />
<b>Step 2:</b><br />
===========<br />
MainActivity.java<br />
<br />
In this activity we check for single permission.<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #008800; font-weight: bold">package</span> org<span style="color: #333333">.</span><span style="color: #0000CC">pratap</span><span style="color: #333333">.</span><span style="color: #0000CC">runtimepermissions</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">android.Manifest</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">android.content.pm.PackageManager</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">android.os.Bundle</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">android.os.Handler</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">android.os.Message</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">android.support.v4.app.ActivityCompat</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">android.support.v4.content.ContextCompat</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">android.support.v7.app.AppCompatActivity</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">android.widget.TextView</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">public</span> <span style="color: #008800; font-weight: bold">class</span> <span style="color: #BB0066; font-weight: bold">MainActivity</span> <span style="color: #008800; font-weight: bold">extends</span> AppCompatActivity <span style="color: #333333">{</span>
<span style="color: #008800; font-weight: bold">final</span> <span style="color: #333399; font-weight: bold">int</span> REQUEST_PERMISSIONS <span style="color: #333333">=</span> <span style="color: #0000DD; font-weight: bold">1</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">final</span> <span style="color: #333399; font-weight: bold">int</span> DELAY_TIME <span style="color: #333333">=</span> <span style="color: #0000DD; font-weight: bold">1000</span><span style="color: #333333">;</span>
TextView txt_permission<span style="color: #333333">;</span>
<span style="color: #555555; font-weight: bold">@Override</span>
<span style="color: #008800; font-weight: bold">protected</span> <span style="color: #333399; font-weight: bold">void</span> <span style="color: #0066BB; font-weight: bold">onCreate</span><span style="color: #333333">(</span>Bundle savedInstanceState<span style="color: #333333">)</span> <span style="color: #333333">{</span>
<span style="color: #008800; font-weight: bold">super</span><span style="color: #333333">.</span><span style="color: #0000CC">onCreate</span><span style="color: #333333">(</span>savedInstanceState<span style="color: #333333">);</span>
setContentView<span style="color: #333333">(</span>R<span style="color: #333333">.</span><span style="color: #0000CC">layout</span><span style="color: #333333">.</span><span style="color: #0000CC">activity_main</span><span style="color: #333333">);</span>
txt_permission <span style="color: #333333">=</span> findViewById<span style="color: #333333">(</span>R<span style="color: #333333">.</span><span style="color: #0000CC">id</span><span style="color: #333333">.</span><span style="color: #0000CC">txt_permission</span><span style="color: #333333">);</span>
checkSinglePermissions<span style="color: #333333">();</span>
<span style="color: #333333">}</span>
<span style="color: #008800; font-weight: bold">private</span> <span style="color: #333399; font-weight: bold">void</span> <span style="color: #0066BB; font-weight: bold">checkSinglePermissions</span><span style="color: #333333">()</span> <span style="color: #333333">{</span>
<span style="color: #008800; font-weight: bold">if</span> <span style="color: #333333">(</span>ContextCompat<span style="color: #333333">.</span><span style="color: #0000CC">checkSelfPermission</span><span style="color: #333333">(</span><span style="color: #008800; font-weight: bold">this</span><span style="color: #333333">,</span> Manifest<span style="color: #333333">.</span><span style="color: #0000CC">permission</span><span style="color: #333333">.</span><span style="color: #0000CC">WRITE_EXTERNAL_STORAGE</span><span style="color: #333333">)</span> <span style="color: #333333">==</span> PackageManager<span style="color: #333333">.</span><span style="color: #0000CC">PERMISSION_GRANTED</span><span style="color: #333333">)</span> <span style="color: #333333">{</span>
mHandler<span style="color: #333333">.</span><span style="color: #0000CC">sendEmptyMessageDelayed</span><span style="color: #333333">(</span><span style="color: #0000DD; font-weight: bold">1</span><span style="color: #333333">,</span> DELAY_TIME<span style="color: #333333">);</span>
<span style="color: #333333">}</span> <span style="color: #008800; font-weight: bold">else</span> <span style="color: #333333">{</span>
ActivityCompat<span style="color: #333333">.</span><span style="color: #0000CC">requestPermissions</span><span style="color: #333333">(</span><span style="color: #008800; font-weight: bold">this</span><span style="color: #333333">,</span> <span style="color: #008800; font-weight: bold">new</span> String<span style="color: #333333">[]{</span>Manifest<span style="color: #333333">.</span><span style="color: #0000CC">permission</span><span style="color: #333333">.</span><span style="color: #0000CC">WRITE_EXTERNAL_STORAGE</span><span style="color: #333333">},</span> REQUEST_PERMISSIONS<span style="color: #333333">);</span>
<span style="color: #333333">}</span>
<span style="color: #333333">}</span>
<span style="color: #555555; font-weight: bold">@Override</span>
<span style="color: #008800; font-weight: bold">public</span> <span style="color: #333399; font-weight: bold">void</span> <span style="color: #0066BB; font-weight: bold">onRequestPermissionsResult</span><span style="color: #333333">(</span><span style="color: #333399; font-weight: bold">int</span> requestCode<span style="color: #333333">,</span> String<span style="color: #333333">[]</span> permissions<span style="color: #333333">,</span> <span style="color: #333399; font-weight: bold">int</span><span style="color: #333333">[]</span> grantResults<span style="color: #333333">)</span> <span style="color: #333333">{</span>
<span style="color: #008800; font-weight: bold">super</span><span style="color: #333333">.</span><span style="color: #0000CC">onRequestPermissionsResult</span><span style="color: #333333">(</span>requestCode<span style="color: #333333">,</span> permissions<span style="color: #333333">,</span> grantResults<span style="color: #333333">);</span>
<span style="color: #008800; font-weight: bold">if</span> <span style="color: #333333">(</span>requestCode <span style="color: #333333">==</span> REQUEST_PERMISSIONS<span style="color: #333333">)</span> <span style="color: #333333">{</span>
<span style="color: #008800; font-weight: bold">if</span> <span style="color: #333333">(</span>grantResults<span style="color: #333333">.</span><span style="color: #0000CC">length</span> <span style="color: #333333">></span> <span style="color: #0000DD; font-weight: bold">0</span> <span style="color: #333333">&&</span> grantResults<span style="color: #333333">[</span><span style="color: #0000DD; font-weight: bold">0</span><span style="color: #333333">]</span> <span style="color: #333333">==</span> PackageManager<span style="color: #333333">.</span><span style="color: #0000CC">PERMISSION_GRANTED</span><span style="color: #333333">)</span> <span style="color: #333333">{</span>
<span style="color: #888888">// permission was granted</span>
mHandler<span style="color: #333333">.</span><span style="color: #0000CC">sendEmptyMessageDelayed</span><span style="color: #333333">(</span><span style="color: #0000DD; font-weight: bold">1</span><span style="color: #333333">,</span> DELAY_TIME<span style="color: #333333">);</span>
<span style="color: #333333">}</span> <span style="color: #008800; font-weight: bold">else</span> <span style="color: #333333">{</span>
<span style="color: #888888">// permission denied, boo!</span>
<span style="color: #333333">}</span>
<span style="color: #333333">}</span>
<span style="color: #333333">}</span>
<span style="color: #008800; font-weight: bold">private</span> Handler mHandler <span style="color: #333333">=</span> <span style="color: #008800; font-weight: bold">new</span> Handler<span style="color: #333333">()</span> <span style="color: #333333">{</span>
<span style="color: #555555; font-weight: bold">@Override</span>
<span style="color: #008800; font-weight: bold">public</span> <span style="color: #333399; font-weight: bold">void</span> <span style="color: #0066BB; font-weight: bold">handleMessage</span><span style="color: #333333">(</span>Message msg<span style="color: #333333">)</span> <span style="color: #333333">{</span>
<span style="color: #008800; font-weight: bold">if</span> <span style="color: #333333">(</span>msg<span style="color: #333333">.</span><span style="color: #0000CC">what</span> <span style="color: #333333">==</span> <span style="color: #0000DD; font-weight: bold">1</span><span style="color: #333333">)</span> <span style="color: #333333">{</span>
txt_permission<span style="color: #333333">.</span><span style="color: #0000CC">setText</span><span style="color: #333333">(</span><span style="background-color: #fff0f0">"SD Card Permission granted"</span><span style="color: #333333">);</span>
<span style="color: #888888">// code goes here after getting permission</span>
<span style="color: #333333">}</span>
<span style="color: #333333">}</span>
<span style="color: #333333">};</span>
<span style="color: #333333">}</span>
</pre></div><br />
<br />
<br />
<br />
<br />
<b>Step 2 :</b><br />
MultiplePermissionActivity.java<br />
===============================<br />
<br />
If you require more than one permission at a time here is the code<br />
<br />
<br />
<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #008800; font-weight: bold">package</span> org<span style="color: #333333">.</span><span style="color: #0000CC">pratap</span><span style="color: #333333">.</span><span style="color: #0000CC">runtimepermissions</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">android.Manifest</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">android.content.pm.PackageManager</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">android.os.Bundle</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">android.os.Handler</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">android.os.Message</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">android.support.v4.app.ActivityCompat</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">android.support.v4.content.ContextCompat</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">android.support.v7.app.AppCompatActivity</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">android.widget.TextView</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">public</span> <span style="color: #008800; font-weight: bold">class</span> <span style="color: #BB0066; font-weight: bold">MutliplePermissionActivity</span> <span style="color: #008800; font-weight: bold">extends</span> AppCompatActivity <span style="color: #333333">{</span>
<span style="color: #008800; font-weight: bold">final</span> <span style="color: #333399; font-weight: bold">int</span> REQUEST_PERMISSIONS <span style="color: #333333">=</span> <span style="color: #0000DD; font-weight: bold">1</span><span style="color: #333333">;</span>
<span style="color: #008800; font-weight: bold">final</span> <span style="color: #333399; font-weight: bold">int</span> DELAY_TIME <span style="color: #333333">=</span> <span style="color: #0000DD; font-weight: bold">4000</span><span style="color: #333333">;</span>
TextView txt_permission<span style="color: #333333">;</span>
<span style="color: #555555; font-weight: bold">@Override</span>
<span style="color: #008800; font-weight: bold">protected</span> <span style="color: #333399; font-weight: bold">void</span> <span style="color: #0066BB; font-weight: bold">onCreate</span><span style="color: #333333">(</span>Bundle savedInstanceState<span style="color: #333333">)</span> <span style="color: #333333">{</span>
<span style="color: #008800; font-weight: bold">super</span><span style="color: #333333">.</span><span style="color: #0000CC">onCreate</span><span style="color: #333333">(</span>savedInstanceState<span style="color: #333333">);</span>
setContentView<span style="color: #333333">(</span>R<span style="color: #333333">.</span><span style="color: #0000CC">layout</span><span style="color: #333333">.</span><span style="color: #0000CC">activity_main</span><span style="color: #333333">);</span>
txt_permission <span style="color: #333333">=</span> findViewById<span style="color: #333333">(</span>R<span style="color: #333333">.</span><span style="color: #0000CC">id</span><span style="color: #333333">.</span><span style="color: #0000CC">txt_permission</span><span style="color: #333333">);</span>
checkMultiplePermissions<span style="color: #333333">();</span>
<span style="color: #333333">}</span>
<span style="color: #008800; font-weight: bold">private</span> Handler mHandler <span style="color: #333333">=</span> <span style="color: #008800; font-weight: bold">new</span> Handler<span style="color: #333333">()</span> <span style="color: #333333">{</span>
<span style="color: #555555; font-weight: bold">@Override</span>
<span style="color: #008800; font-weight: bold">public</span> <span style="color: #333399; font-weight: bold">void</span> <span style="color: #0066BB; font-weight: bold">handleMessage</span><span style="color: #333333">(</span>Message msg<span style="color: #333333">)</span> <span style="color: #333333">{</span>
<span style="color: #008800; font-weight: bold">if</span> <span style="color: #333333">(</span>msg<span style="color: #333333">.</span><span style="color: #0000CC">what</span> <span style="color: #333333">==</span> <span style="color: #0000DD; font-weight: bold">1</span><span style="color: #333333">)</span> <span style="color: #333333">{</span>
txt_permission<span style="color: #333333">.</span><span style="color: #0000CC">setText</span><span style="color: #333333">(</span><span style="background-color: #fff0f0">"SD Card & Location Permission granted"</span><span style="color: #333333">);</span>
<span style="color: #333333">}</span>
<span style="color: #333333">}</span>
<span style="color: #333333">};</span>
<span style="color: #888888">// reqeust Multiple permissions code</span>
<span style="color: #008800; font-weight: bold">private</span> <span style="color: #333399; font-weight: bold">void</span> <span style="color: #0066BB; font-weight: bold">checkMultiplePermissions</span><span style="color: #333333">()</span> <span style="color: #333333">{</span>
<span style="color: #008800; font-weight: bold">if</span> <span style="color: #333333">(</span>ContextCompat<span style="color: #333333">.</span><span style="color: #0000CC">checkSelfPermission</span><span style="color: #333333">(</span><span style="color: #008800; font-weight: bold">this</span><span style="color: #333333">,</span> Manifest<span style="color: #333333">.</span><span style="color: #0000CC">permission</span><span style="color: #333333">.</span><span style="color: #0000CC">WRITE_EXTERNAL_STORAGE</span><span style="color: #333333">)</span> <span style="color: #333333">==</span> PackageManager<span style="color: #333333">.</span><span style="color: #0000CC">PERMISSION_GRANTED</span>
<span style="color: #333333">&&</span> ContextCompat<span style="color: #333333">.</span><span style="color: #0000CC">checkSelfPermission</span><span style="color: #333333">(</span><span style="color: #008800; font-weight: bold">this</span><span style="color: #333333">,</span> Manifest<span style="color: #333333">.</span><span style="color: #0000CC">permission</span><span style="color: #333333">.</span><span style="color: #0000CC">ACCESS_FINE_LOCATION</span><span style="color: #333333">)</span> <span style="color: #333333">==</span> PackageManager<span style="color: #333333">.</span><span style="color: #0000CC">PERMISSION_GRANTED</span><span style="color: #333333">)</span> <span style="color: #333333">{</span>
mHandler<span style="color: #333333">.</span><span style="color: #0000CC">sendEmptyMessageDelayed</span><span style="color: #333333">(</span><span style="color: #0000DD; font-weight: bold">1</span><span style="color: #333333">,</span> DELAY_TIME<span style="color: #333333">);</span>
<span style="color: #333333">}</span> <span style="color: #008800; font-weight: bold">else</span> <span style="color: #333333">{</span>
ActivityCompat<span style="color: #333333">.</span><span style="color: #0000CC">requestPermissions</span><span style="color: #333333">(</span><span style="color: #008800; font-weight: bold">this</span><span style="color: #333333">,</span> <span style="color: #008800; font-weight: bold">new</span> String<span style="color: #333333">[]{</span>Manifest<span style="color: #333333">.</span><span style="color: #0000CC">permission</span><span style="color: #333333">.</span><span style="color: #0000CC">WRITE_EXTERNAL_STORAGE</span><span style="color: #333333">,</span> Manifest<span style="color: #333333">.</span><span style="color: #0000CC">permission</span><span style="color: #333333">.</span><span style="color: #0000CC">READ_PHONE_STATE</span><span style="color: #333333">},</span> REQUEST_PERMISSIONS<span style="color: #333333">);</span>
<span style="color: #333333">}</span>
<span style="color: #333333">}</span>
<span style="color: #555555; font-weight: bold">@Override</span>
<span style="color: #008800; font-weight: bold">public</span> <span style="color: #333399; font-weight: bold">void</span> <span style="color: #0066BB; font-weight: bold">onRequestPermissionsResult</span><span style="color: #333333">(</span><span style="color: #333399; font-weight: bold">int</span> requestCode<span style="color: #333333">,</span> String<span style="color: #333333">[]</span> permissions<span style="color: #333333">,</span> <span style="color: #333399; font-weight: bold">int</span><span style="color: #333333">[]</span> grantResults<span style="color: #333333">)</span> <span style="color: #333333">{</span>
<span style="color: #008800; font-weight: bold">super</span><span style="color: #333333">.</span><span style="color: #0000CC">onRequestPermissionsResult</span><span style="color: #333333">(</span>requestCode<span style="color: #333333">,</span> permissions<span style="color: #333333">,</span> grantResults<span style="color: #333333">);</span>
<span style="color: #008800; font-weight: bold">if</span> <span style="color: #333333">(</span>requestCode <span style="color: #333333">==</span> REQUEST_PERMISSIONS<span style="color: #333333">)</span> <span style="color: #333333">{</span>
<span style="color: #008800; font-weight: bold">if</span> <span style="color: #333333">(</span>grantResults<span style="color: #333333">.</span><span style="color: #0000CC">length</span> <span style="color: #333333">></span> <span style="color: #0000DD; font-weight: bold">0</span> <span style="color: #333333">&&</span> grantResults<span style="color: #333333">[</span><span style="color: #0000DD; font-weight: bold">0</span><span style="color: #333333">]</span> <span style="color: #333333">==</span> PackageManager<span style="color: #333333">.</span><span style="color: #0000CC">PERMISSION_GRANTED</span> <span style="color: #333333">&&</span> grantResults<span style="color: #333333">[</span><span style="color: #0000DD; font-weight: bold">1</span><span style="color: #333333">]</span> <span style="color: #333333">==</span> PackageManager<span style="color: #333333">.</span><span style="color: #0000CC">PERMISSION_GRANTED</span><span style="color: #333333">)</span> <span style="color: #333333">{</span>
<span style="color: #888888">// permission was granted</span>
mHandler<span style="color: #333333">.</span><span style="color: #0000CC">sendEmptyMessageDelayed</span><span style="color: #333333">(</span><span style="color: #0000DD; font-weight: bold">1</span><span style="color: #333333">,</span> DELAY_TIME<span style="color: #333333">);</span>
<span style="color: #333333">}</span> <span style="color: #008800; font-weight: bold">else</span> <span style="color: #333333">{</span>
<span style="color: #888888">// permission denied, boo!</span>
<span style="color: #333333">}</span>
<span style="color: #333333">}</span>
<span style="color: #333333">}</span>
<span style="color: #333333">}</span>
</pre></div><br />
<br />
<br />
<br />
<br />
<br />
</div>Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com0tag:blogger.com,1999:blog-1368316095367596493.post-68174481576032955092017-11-27T17:28:00.000+05:302018-03-07T15:28:21.907+05:30RecyclerView using Kotlin<div dir="ltr" style="text-align: left;" trbidi="on">
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">A Simple example to create a RecyclerView using Kotlin Language.</pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"><b>build.gradle</b>[under app folder]</pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">============</pre>
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;">apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'
android {
compileSdkVersion 26
defaultConfig {
applicationId "com.pratap.kotlinrecyclerview"
minSdkVersion 15
targetSdkVersion 26
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(include: ['*.jar'], dir: 'libs')
implementation "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"
implementation 'com.android.support:design:26.1.0'
implementation 'com.android.support:appcompat-v7:26.1.0'
implementation 'com.android.support:recyclerview-v7:26.1.0'
implementation 'com.android.support:cardview-v7:26.1.0'
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.1'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
}
</pre>
</div>
<b><br />
</b> <b><br />
</b> <br />
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"><b>Student.kt</b></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">===========</pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">create model class in kotlin like below</pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<!-- HTML generated using hilite.me --><br />
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">package</span> <span style="color: #0e84b5; font-weight: bold;">com.pratap.kotlinrecyclerview.models</span>
<span style="color: #888888;">/**</span>
<span style="color: #888888;"> * Created by pratap.kesaboyina on 27-11-2017.</span>
<span style="color: #888888;"> */</span>
data <span style="color: #008800; font-weight: bold;">class</span> <span style="color: #0066bb; font-weight: bold;">Student</span>(<span style="color: #008800; font-weight: bold;">val</span> name: String, <span style="color: #008800; font-weight: bold;">val</span> email: String)
</pre>
</div>
<br />
<br />
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">MainActivity.kt</pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">===============</pre>
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">package</span> <span style="color: #0e84b5; font-weight: bold;">com.pratap.kotlinrecyclerview</span>
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.support.v7.widget.LinearLayoutManager
import android.support.v7.widget.RecyclerView
import android.widget.LinearLayout
import com.pratap.kotlinrecyclerview.adapters.StudentsAdapter
import com.pratap.kotlinrecyclerview.models.Student
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #bb0066; font-weight: bold;">MainActivity</span> : AppCompatActivity() {
<span style="color: #008800; font-weight: bold;">override</span> <span style="color: #008800; font-weight: bold;">fun</span> <span style="color: #0066bb; font-weight: bold;">onCreate</span>(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
<span style="color: #008800; font-weight: bold;">val</span> recyclerView: RecyclerView = findViewById(R.id.recyclerView)
<span style="color: #888888;">//adding a layoutmanager</span>
recyclerView.layoutManager = LinearLayoutManager(<span style="color: #008800; font-weight: bold;">this</span>, LinearLayout.VERTICAL, <span style="color: #008800; font-weight: bold;">false</span>)
<span style="color: #888888;">//crating an arraylist to store users using the data class user</span>
<span style="color: #008800; font-weight: bold;">val</span> users = ArrayList<Student>()
<span style="color: #888888;">//adding some dummy data to the list</span>
<span style="color: #008800; font-weight: bold;">for</span> (i <span style="color: #008800; font-weight: bold;">in</span> <span style="color: #6600ee; font-weight: bold;">1.</span>.<span style="color: #6600ee; font-weight: bold;">10</span>) {
users.add(Student(<span style="background-color: #fff0f0;">"Student "</span> + i, <span style="background-color: #fff0f0;">"Student"</span> + i + <span style="background-color: #fff0f0;">"@gmail.com"</span>))
}
<span style="color: #888888;">//creating our adapter</span>
<span style="color: #008800; font-weight: bold;">val</span> adapter = StudentsAdapter(users)
<span style="color: #888888;">//now adding the adapter to recyclerview</span>
recyclerView.adapter = adapter
}
}
</pre>
</div>
<br />
<b><br />
</b> <br />
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"><b>activity_main.xml</b></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"><b>==================</b></pre>
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><?xml version=<span style="background-color: #fff0f0;">"1.0"</span> encoding=<span style="background-color: #fff0f0;">"utf-8"</span>?>
<LinearLayout xmlns:android=<span style="background-color: #fff0f0;">"http://schemas.android.com/apk/res/android"</span>
android:layout_width=<span style="background-color: #fff0f0;">"match_parent"</span>
android:layout_height=<span style="background-color: #fff0f0;">"match_parent"</span>>
<android.support.v7.widget.RecyclerView
android:id=<span style="background-color: #fff0f0;">"@+id/recyclerView"</span>
android:layout_width=<span style="background-color: #fff0f0;">"match_parent"</span>
android:layout_height=<span style="background-color: #fff0f0;">"match_parent"</span>
/>
</LinearLayout>
</pre>
</div>
<br />
<br />
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"><b>list_row.xml</b></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">==================</pre>
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><?xml version=<span style="background-color: #fff0f0;">"1.0"</span> encoding=<span style="background-color: #fff0f0;">"utf-8"</span>?>
<LinearLayout xmlns:android=<span style="background-color: #fff0f0;">"http://schemas.android.com/apk/res/android"</span>
android:layout_width=<span style="background-color: #fff0f0;">"match_parent"</span>
android:layout_height=<span style="background-color: #fff0f0;">"wrap_content"</span>
android:orientation=<span style="background-color: #fff0f0;">"vertical"</span>>
<android.support.v7.widget.CardView
android:layout_width=<span style="background-color: #fff0f0;">"match_parent"</span>
android:layout_height=<span style="background-color: #fff0f0;">"wrap_content"</span>
android:layout_margin=<span style="background-color: #fff0f0;">"5dp"</span>
android:foreground=<span style="background-color: #fff0f0;">"?android:attr/selectableItemBackground"</span>
>
<LinearLayout
android:layout_width=<span style="background-color: #fff0f0;">"match_parent"</span>
android:layout_height=<span style="background-color: #fff0f0;">"wrap_content"</span>
android:orientation=<span style="background-color: #fff0f0;">"vertical"</span>>
<TextView
android:id=<span style="background-color: #fff0f0;">"@+id/txt_name"</span>
android:layout_width=<span style="background-color: #fff0f0;">"match_parent"</span>
android:layout_height=<span style="background-color: #fff0f0;">"wrap_content"</span>
android:padding=<span style="background-color: #fff0f0;">"5dp"</span>
android:text=<span style="background-color: #fff0f0;">""</span>
android:textAppearance=<span style="background-color: #fff0f0;">"@style/Base.TextAppearance.AppCompat.Medium"</span> />
<TextView
android:id=<span style="background-color: #fff0f0;">"@+id/txt_email_id"</span>
android:layout_width=<span style="background-color: #fff0f0;">"match_parent"</span>
android:layout_height=<span style="background-color: #fff0f0;">"wrap_content"</span>
android:padding=<span style="background-color: #fff0f0;">"5dp"</span>
android:text=<span style="background-color: #fff0f0;">""</span>
android:textAppearance=<span style="background-color: #fff0f0;">"@style/Base.TextAppearance.AppCompat.Small"</span> />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</pre>
</div>
<br />
<br />
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">StudentsAdapter.kt</pre>
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;">==================</pre>
<div style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="line-height: 125%; margin: 0;"><span style="color: #008800; font-weight: bold;">package</span> <span style="color: #0e84b5; font-weight: bold;">com.pratap.kotlinrecyclerview.adapters</span>
<span style="color: #888888;">/**</span>
<span style="color: #888888;"> * Created by pratap.kesaboyina on 27-11-2017.</span>
<span style="color: #888888;"> */</span>
import android.support.v7.widget.RecyclerView
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import android.widget.Toast
import com.pratap.kotlinrecyclerview.R
import com.pratap.kotlinrecyclerview.models.Student
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #0066bb; font-weight: bold;">StudentsAdapter</span>(<span style="color: #008800; font-weight: bold;">val</span> studentList: ArrayList<Student>) : RecyclerView.Adapter<StudentsAdapter.ViewHolder>() {
<span style="color: #888888;">//this method is returning the view for each item in the list</span>
<span style="color: #008800; font-weight: bold;">override</span> <span style="color: #008800; font-weight: bold;">fun</span> <span style="color: #0066bb; font-weight: bold;">onCreateViewHolder</span>(parent: ViewGroup, viewType: Int): StudentsAdapter.ViewHolder {
<span style="color: #008800; font-weight: bold;">val</span> v = LayoutInflater.from(parent.context).inflate(R.layout.list_row, parent, <span style="color: #008800; font-weight: bold;">false</span>)
<span style="color: #008800; font-weight: bold;">return</span> <span style="color: #0066bb; font-weight: bold;">ViewHolder</span>(v)
}
<span style="color: #888888;">//this method is binding the data on the list</span>
<span style="color: #008800; font-weight: bold;">override</span> <span style="color: #008800; font-weight: bold;">fun</span> <span style="color: #0066bb; font-weight: bold;">onBindViewHolder</span>(holder: StudentsAdapter.ViewHolder, position: Int) {
holder.bindItems(studentList[position])
}
<span style="color: #888888;">//this method is giving the size of the list</span>
<span style="color: #008800; font-weight: bold;">override</span> <span style="color: #008800; font-weight: bold;">fun</span> <span style="color: #0066bb; font-weight: bold;">getItemCount</span>(): Int {
<span style="color: #008800; font-weight: bold;">return</span> studentList.size
}
<span style="color: #008800; font-weight: bold;">class</span> <span style="color: #0066bb; font-weight: bold;">ViewHolder</span>(itemView: View) : RecyclerView.ViewHolder(itemView) {
<span style="color: #008800; font-weight: bold;">fun</span> <span style="color: #0066bb; font-weight: bold;">bindItems</span>(student: Student) {
<span style="color: #008800; font-weight: bold;">val</span> txt_name: TextView = itemView.findViewById(R.id.txt_name)
<span style="color: #008800; font-weight: bold;">val</span> txt_email_id: TextView = itemView.findViewById(R.id.txt_email_id)
txt_name.text = student.name
txt_email_id.text = student.email
<span style="color: #888888;">//set the onclick listener for the list item</span>
itemView.setOnClickListener({
Toast.makeText(itemView.context, student.name + <span style="background-color: #fff0f0;">"\n"</span> + student.email, Toast.LENGTH_LONG).show();
})
}
}
}
</pre>
</div>
<br />
<br />
<b>Screenshot:</b><br />
<b>=========</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzdtNfVC21aIvBlAa9rixZb8UobIwF11WPyOOMK1DYnp2pRRNg3TymzJq4vBfGDTxM3T2kyktvlocpYhmpmUkIBDsFBRtK48pXoGsHS8oyA_66Y8F7kDFxDh-CJgMkF1tdEbqWsKk-eW2q/s1600/Screenshot_2017-11-27-17-20-14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="720" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzdtNfVC21aIvBlAa9rixZb8UobIwF11WPyOOMK1DYnp2pRRNg3TymzJq4vBfGDTxM3T2kyktvlocpYhmpmUkIBDsFBRtK48pXoGsHS8oyA_66Y8F7kDFxDh-CJgMkF1tdEbqWsKk-eW2q/s400/Screenshot_2017-11-27-17-20-14.png" width="225" /></a></div>
<b><br />
</b> <br />
<br />
<pre style="background-color: white; font-family: "Courier New"; font-size: 9pt;"></pre>
</div>
Pratap Kumarhttp://www.blogger.com/profile/11550597883880012582noreply@blogger.com0