// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart'; import 'TCustomCurvedEdges.dart'; class ProfileScreen2 extends StatefulWidget { const ProfileScreen2({super.key}); @override State<ProfileScreen2> createState() => _ProfileScreen2State(); } class _ProfileScreen2State extends State<ProfileScreen2> { @override Widget build(BuildContext context) { return Scaffold( body: SingleChildScrollView( child: Column( children: [ ClipPath( clipper: TCustomCurvedEdges(), child: Container( // color: const Color.fromARGB(255, 75, 104, 255), color: Colors.red[300], padding: const EdgeInsets.all(0), child: SizedBox( height: 300, child: Stack( children: [ // 3 LEFT side curves Positioned( top: 0, left: -210, child: Container( width: 300, height: 300, decoration: BoxDecoration( borderRadius: BorderRadius.circular(300), color: Colors.white.withOpacity(0.1))), ), Positioned( top: 0, left: -240, child: Container( width: 300, height: 300, decoration: BoxDecoration( borderRadius: BorderRadius.circular(300), color: Colors.white.withOpacity(.1))), ), Positioned( top: 0, left: -270, child: Container( width: 300, height: 300, decoration: BoxDecoration( borderRadius: BorderRadius.circular(300), color: Colors.white.withOpacity(.1))), ), // 3 RIGHT side curves Positioned( top: 0, right: -210, child: Container( width: 300, height: 300, decoration: BoxDecoration( borderRadius: BorderRadius.circular(300), color: Colors.white.withOpacity(0.1))), ), Positioned( top: 0, right: -240, child: Container( width: 300, height: 300, decoration: BoxDecoration( borderRadius: BorderRadius.circular(300), color: Colors.white.withOpacity(.1))), ), Positioned( top: 0, right: -270, child: Container( width: 300, height: 300, decoration: BoxDecoration( borderRadius: BorderRadius.circular(300), color: Colors.white.withOpacity(.1))), ), // Bottom Curve - try with -10, -150 // Positioned( // bottom: -150, // child: Container( // width: MediaQuery.of(context).size.width, // height: 300, // decoration: BoxDecoration( // borderRadius: BorderRadius.circular(300), // color: Colors.white.withOpacity(.2))), // ), // Circle Avatar Container( width: double.infinity, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: const [ CircleAvatar( radius: 60, backgroundImage: NetworkImage( "https://randomuser.me/api/portraits/men/46.jpg")), SizedBox( height: 10, ), Text( "Pratap Kumar", style: TextStyle( color: Colors.white, fontWeight: FontWeight.w600, fontSize: 17), ) ], ), ), ], )), ), ), Column( children: [ ListTile( leading: Icon(Icons.person_4), title: Text("Profile"), trailing: Icon( Icons.arrow_forward_ios, size: 14, ), onTap: () { print("Profile"); }, ), ListTile( leading: Icon(Icons.security), title: Text("Change Password"), trailing: Icon( Icons.arrow_forward_ios, size: 14, ), onTap: () { print("Change Password"); }, ), ListTile( leading: Icon(Icons.lock), title: Text("Privacy Policy"), trailing: Icon( Icons.arrow_forward_ios, size: 14, ), onTap: () { print("Privacy "); }, ), ListTile( leading: Icon(Icons.help_center), title: Text("Help Center"), trailing: Icon( Icons.arrow_forward_ios, size: 14, ), onTap: () { print("Help Center "); }, ), ListTile( leading: Icon(Icons.star), title: Text("Rate Us"), trailing: Icon( Icons.arrow_forward_ios, size: 14, ), onTap: () { print("Help Center "); }, ), ListTile( leading: Icon(Icons.settings), title: Text("Settings"), trailing: Icon( Icons.arrow_forward_ios, size: 14, ), onTap: () { print("Settings "); }, ), ListTile( leading: Icon(Icons.logout), title: Text( "Logout", style: TextStyle( fontWeight: FontWeight.w500, color: Colors.red, ), ), trailing: Icon( Icons.arrow_forward_ios, size: 14, ), onTap: () { print("Logout "); }, ), ], ) ], )), ); } }Android App Development for Phones/Tablets
Its 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 Patterns
Thursday, 14 November 2024
Flutter UI - Profile Page
Tuesday, 12 November 2024
Flutter Bottom Navigation UI
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_ui_screens/screens/bottombar/SampleTestScreen.dart'; class CurvedBottomBarM3 extends StatefulWidget { @override _CurvedBottomBarM3State createState() => _CurvedBottomBarM3State(); } class _CurvedBottomBarM3State extends State<CurvedBottomBarM3> { int _selectedIndex = 0; void _onItemTapped(int index) { setState(() { _selectedIndex = index; }); } _getBody() { switch (_selectedIndex) { case 0: return SampleTestPage("Home"); case 1: return SampleTestPage("Search"); case 2: return SampleTestPage("Cart"); case 3: return SampleTestPage("Wishlist"); case 4: return SampleTestPage("Profile"); default: return Container(color: Colors.red); } } Widget buildTabItem( {required IconData icon, required String label, required int index}) { final isSelected = _selectedIndex == index; return Column( mainAxisSize: MainAxisSize.min, children: [ SizedBox( height: 30, width: 30, child: IconButton( padding: const EdgeInsets.all(0), icon: Icon(icon), onPressed: () => _onItemTapped(index), color: isSelected ? Colors.red : Colors.grey, ), ), Text( label, style: TextStyle( fontSize: 11, color: isSelected ? Colors.red : Colors.grey, ), ), Container(height: 3), Container( decoration: BoxDecoration( color: index == _selectedIndex ? Colors.red : Colors.transparent, shape: BoxShape.circle, ), height: 5, width: 5, ), ], ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( elevation: 2, title: const Text("Custom Bottom Navigation"), ), body: _getBody(), bottomNavigationBar: BottomAppBar( shape: const CircularNotchedRectangle(), color: Colors.white, notchMargin: 8, // Increased notch margin child: Padding( padding: const EdgeInsets.symmetric(horizontal: 15.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ buildTabItem(icon: CupertinoIcons.home, label: "Home", index: 0), buildTabItem( icon: CupertinoIcons.search, label: "Search", index: 1), SizedBox(width: 40), // Spacing for the floating button buildTabItem( icon: CupertinoIcons.heart, label: "Wishlist", index: 2), buildTabItem( icon: CupertinoIcons.settings, label: "Settings", index: 3), ], ), ), ), floatingActionButtonLocation: FloatingActionButtonLocation .centerDocked, // Changed from centerDocked to centerFloat floatingActionButton: Stack( alignment: Alignment.center, children: [ // Custom shadow using a Container Container( width: 60, height: 60, decoration: BoxDecoration( shape: BoxShape.circle, boxShadow: [ BoxShadow( color: Colors.red.withOpacity(0.3), // Shadow color spreadRadius: 8, blurRadius: 15, ), ], ), ), // FloatingActionButton on top FloatingActionButton( shape: CircleBorder(), onPressed: () { // Action for the FAB }, child: Icon( Icons.shopping_basket, color: Colors.white, ), backgroundColor: Colors.red, elevation: 0, // Set to 0 to avoid default shadow ), ], ), ); } }
Tuesday, 5 November 2024
React Native UI - Profile Page
import React, {Component} from 'react'; import { SectionList, SafeAreaView, Image, View, Text, TouchableOpacity, StyleSheet, } from 'react-native'; import AntDesign from 'react-native-vector-icons/AntDesign'; const DATA = [ { title: 'General', data: [ {name: 'Edit Profile', icon: 'form', color: '#333'}, {name: 'Notifications', icon: 'notification', color: '#333'}, {name: 'Wishlist', icon: 'hearto', color: '#333'}, ], }, { title: 'Legal', data: [ {name: 'Terms of Use', icon: 'filetext1', color: '#333'}, {name: 'Privacy Policy', icon: 'copy1', color: '#333'}, ], }, { title: 'Personal', data: [ {name: 'CopyRights', icon: 'copyright', color: '#333'}, {name: 'Logout', icon: 'logout', color: '#FF6665'}, ], }, ]; // create a component const ProfilePage = ({navigation}) => { return ( <SafeAreaView style={styles.safeArea}> <View style={styles.mainContainer}> <View style={{ height: 50, flexDirection: 'row', paddingHorizontal: '16', marginBottom: '5', alignItems: 'center', justifyContent: 'space-between', }}> <TouchableOpacity onPress={() => { navigation.goBack(); }}> <AntDesign color="#333" name="left" size={24}></AntDesign> </TouchableOpacity> <Text>My Profile</Text> <TouchableOpacity> <AntDesign color="#333" name="wechat" size={24}></AntDesign> </TouchableOpacity> </View> <View style={styles.topHeader}> <View style={{flexDirection: 'row', alignItems: 'center'}}> <Image source={{ uri: 'https://randomuser.me/api/portraits/men/1.jpg', }} style={{width: 75, height: 75, borderRadius: 40}} /> <View style={{marginLeft: 10}}> <Text style={{ marginLeft: 8, letterSpacing: '1.0', fontSize: '17', fontWeight: '300', }}> Pratap Kumar </Text> <Text style={{ marginTop: 5, marginLeft: 8, fontWeight: '300', fontSize: '13', }}> Hyderabad </Text> </View> </View> </View> <View style={{ height: 2, backgroundColor: '#E6E6E6', marginTop: 10, marginBottom: 10, }}></View> <SectionList sections={DATA} keyExtractor={(item, index) => item + index} renderItem={({item}) => ( <TouchableOpacity style={styles.button} onPress={() => { if (item.name == 'Logout') { navigation.goBack(); } }}> <View style={styles.sectionItem}> <AntDesign color={item.color} name={item.icon} size={24}></AntDesign> <Text style={styles.title}>{item.name}</Text> </View> <View style={{ width: '100%', height: 1, backgroundColor: '#E6E6E6', }}></View> </TouchableOpacity> )} renderSectionHeader={({section: {title}}) => ( <Text style={styles.sectionHeader}>{title}</Text> )} /> </View> </SafeAreaView> ); }; // define your styles const styles = StyleSheet.create({ safeArea: { flex: 1, }, mainContainer: { flex: 1, }, topHeader: { justifyContent: 'center', marginLeft: '16', }, sectionItem: { flexDirection: 'row', alignItems: 'center', marginLeft: 16, }, title: { fontSize: 16, margin: 20, color: '#333', }, sectionHeader: { fontSize: 14, marginLeft: 16, marginBottom: 16, marginTop: 16, color: '#7f7f7f', }, }); //make this component available to the app export default ProfilePage;
Screenshot
==============