Flutter UI - Profile Page

 // 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 "); }, ), ], ) ], )), ); } }

TCustomCurvedEdges.dart

========================

import 'package:flutter/material.dart'; class TCustomCurvedEdges extends CustomClipper<Path> { @override Path getClip(Size size) { var path = Path(); path.lineTo(0, size.height); final firstCurve = Offset(0, size.height - 20); final lastCurve = Offset(30, size.height - 20); path.quadraticBezierTo( firstCurve.dx, firstCurve.dy, lastCurve.dx, lastCurve.dy); final secondFirstCurve = Offset(0, size.height - 20); final secondLastCurve = Offset(size.width - 30, size.height - 20); path.quadraticBezierTo(secondFirstCurve.dx, secondFirstCurve.dy, secondLastCurve.dx, secondLastCurve.dy); final thirdFirstCurve = Offset(size.width, size.height - 20); final thirdLastCurve = Offset(size.width, size.height); path.quadraticBezierTo(thirdFirstCurve.dx, thirdFirstCurve.dy, thirdLastCurve.dx, thirdLastCurve.dy); path.lineTo(size.width, 0); path.close(); return path; } @override bool shouldReclip(covariant CustomClipper<Path> oldClipper) { return true; } }

Screenshot:

============

 

Flutter Bottom Navigation UI

CurvedBottomBarM3.dart

=======================

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 ), ], ), ); } }

SampleTestPage.dart

====================

import 'package:flutter/material.dart'; class SampleTestPage extends StatefulWidget { String pageTitle; SampleTestPage(this.pageTitle, {super.key}); @override State<SampleTestPage> createState() => _SampleTestPageState(); } class _SampleTestPageState extends State<SampleTestPage> { @override Widget build(BuildContext context) { return Scaffold( body: Container( child: Center( child: Text( widget.pageTitle, style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w300), )), ), ); } }

Customise bottom bar tab item selection based on requirement using this buildTabItem code

=============

Screenshots

=============

create pdf file in flutter

dependencies:
  pdf: ^1.9.0

CreatePdf.dart 

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image/image.dart';
import 'package:movements/Utils.dart';
import 'package:path_provider/path_provider.dart';
import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;


class CreatePdf extends StatefulWidget {
  @override  _CreatePdfState createState() => _CreatePdfState();
}

class _CreatePdfState extends State<CreatePdf> {
  @override  void initState() {
    // TODO: implement initState    super.initState();
  }

  @override  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Create PDF"),
        elevation: .1,
      ),
      body: Center(
        child: Container(
          child: FlatButton(
              onPressed: () {
                createPdf();
              },
              child: Text("Create PDF")),
        ),
      ),
    );
  }


  Future createPdf() async {
    final pdf = pw.Document();


    pdf.addPage(pw.Page(
        pageFormat: PdfPageFormat.a4,
        build: (pw.Context context) {
          return pw.Center(
            child: pw.Text("Hello World"),
          ); // Center        }));

    var number = Utils.getRandomNumber(4);
    final output =
        await getExternalStorageDirectory(); // use the [path_provider (https://pub.dartlang.org/packages/path_provider) library:    final file = File("${output.path}/example" + number.toString() + ".pdf");
    await file.writeAsBytes(pdf.save());
  }
}

Flutter GPS Location

In this tutorial , we try to fetch phone GPS Location.

I used this library in pubspec.yaml file under dependencies

dependencies:
  location: ^2.3.5

Android #

In order to use this plugin in Android, you have to add this permission in AndroidManifest.xml :
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />


Permission check for Android 6+ was added.

iOS #

And to use it in iOS, you have to add this permission in Info.plist :
NSLocationWhenInUseUsageDescription
NSLocationAlwaysUsageDescription


Warning: 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.

main.dart

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import 'package:flutter/material.dart'; import 'package:flutter_app_sample/GetLocationPage.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter GPS', theme: ThemeData( primarySwatch: Colors.blue, ), home: GetLocationPage(), ); } }

GetLocationPage.dart

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

import 'package:flutter/material.dart'; import 'package:location/location.dart'; class GetLocationPage extends StatefulWidget { @override _GetLocationPageState createState() => _GetLocationPageState(); } class _GetLocationPageState extends State<GetLocationPage> { LocationData _currentLocation; Location _locationService = new Location(); @override void initState() { // TODO: implement initState super.initState(); _getLocation().then((value) { setState(() { _currentLocation = value; }); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ _currentLocation == null ? CircularProgressIndicator() : Text("Location:" + _currentLocation.latitude.toString() + " " + _currentLocation.longitude.toString()), Padding( padding: const EdgeInsets.all(8.0), child: RaisedButton( onPressed: () { _getLocation().then((value) { setState(() { _currentLocation = value; }); }); }, color: Colors.blue, child: Text( "Get Location", style: TextStyle(color: Colors.white), ), ), ), ], ), ), ); } Future<LocationData> _getLocation() async { LocationData currentLocation; try { currentLocation = await _locationService.getLocation(); } catch (e) { currentLocation = null; } return currentLocation; } }