Posted By
Bajarangi soft ,
Posted On 10-09-2020
Step 1
We cannot directly remove the time stamp from Upload Profile image but using the intl.dart package we can easily filter the date stamp from time stamp. So open your flutter project’s pubspec.yaml in code .
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
dev_dependencies:
flutter_test:
sdk: flutter
image_picker: ^0.6.7+7
http: ^0.12.2
firebase_storage: ^4.0.0
font_awesome_flutter: ^8.8.1
flutter pub get
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:image_picker/image_picker.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'dart:io';
import 'package:path/path.dart';
Builder(
builder: (context) => Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(height: 50.0,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Align(
alignment: Alignment.center,
child: CircleAvatar(
radius: 100,
backgroundColor: Colors.black,
child: ClipOval(
child: new SizedBox(
width: 200.0,
height: 260.0,
child: (_image!=null)?Image.file(
_image,
fit: BoxFit.fill,
):Image.network("https://images.unsplash.com/photo-1502164980785-f8aa41d53611?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
fit: BoxFit.fill,
),
),
),
),
),
Container(
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.only(top: 150.0),
child: IconButton(
icon: Icon(
FontAwesomeIcons.camera,
size: 25.0,
color: Colors.black38,
),
onPressed: () {
getImage();
},
),
),
),
)
],
),
SizedBox(height: 20.0,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Align(
alignment: Alignment.center,
child: Container(
child: Column(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Text('Username',
style: TextStyle(
color: Colors.blueGrey, fontSize: 15.0)),
),
Align(
alignment: Alignment.center,
child: Text('Jone', style: TextStyle(
color: Colors.black,
fontSize: 15.0,
fontWeight: FontWeight.bold)),
),
],
),
),
),
],
),
SizedBox(height: 20.0,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Align(
alignment: Alignment.center,
child: Container(
child: Column(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Text('Location',
style: TextStyle(
color: Colors.blueGrey, fontSize: 15.0)),
),
Align(
alignment: Alignment.center,
child: Text('India,Banaglore',
style: TextStyle(color: Colors.black,
fontSize: 15.0,
fontWeight: FontWeight.bold
)),
),
],
),
),
),
],
),
],
),
),
),
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:image_picker/image_picker.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'dart:io';
import 'package:path/path.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Image App Demo',
home: ProfileImageUPload(),
);
}
}
class ProfileImageUPload extends StatefulWidget {
@override
_ProfileImageUPloadState createState() => _ProfileImageUPloadState();
}
class _ProfileImageUPloadState extends State<ProfileImageUPload> {
File _image;
@override
Widget build(BuildContext context) {
Future getImage() async {
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image = image;
print('Image Path $_image');
});
}
Future uploadPic(BuildContext context) async{
String fileName = basename(_image.path);
StorageReference firebaseStorageRef = FirebaseStorage.instance.ref().child(fileName);
StorageUploadTask uploadTask = firebaseStorageRef.putFile(_image);
StorageTaskSnapshot taskSnapshot=await uploadTask.onComplete;
setState(() {
print("Profile Picture uploaded");
Scaffold.of(context).showSnackBar(SnackBar(content: Text('Profile Picture Uploaded')));
});
}
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(FontAwesomeIcons.arrowLeft),
onPressed: () {
Navigator.pop(context);
}),
centerTitle: true,
title: Text('Upload Profile Image'),
backgroundColor: Colors.black,
),
body: Builder(
builder: (context) => Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(height: 50.0,),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Align(
alignment: Alignment.center,
child: CircleAvatar(
radius: 100,
backgroundColor: Colors.black,
child: ClipOval(
child: new SizedBox(
width: 200.0,
height: 260.0,
child: (_image!=null)?Image.file(
_image,
fit: BoxFit.fill,
):Image.network("https://images.unsplash.com/photo-1502164980785-f8aa41d53611?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
fit: BoxFit.fill,
),
),
),
),
),
Container(
child: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.only(top: 150.0),
child: IconButton(
icon: Icon(
FontAwesomeIcons.camera,
size: 25.0,
color: Colors.black38,
),
onPressed: () {
getImage();
},
),
),
),
)
],
),
SizedBox(height: 20.0,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Align(
alignment: Alignment.center,
child: Container(
child: Column(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Text('Username',
style: TextStyle(
color: Colors.blueGrey, fontSize: 15.0)),
),
Align(
alignment: Alignment.center,
child: Text('Jone', style: TextStyle(
color: Colors.black,
fontSize: 15.0,
fontWeight: FontWeight.bold)),
),
],
),
),
),
],
),
SizedBox(height: 20.0,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Align(
alignment: Alignment.center,
child: Container(
child: Column(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Text('Location',
style: TextStyle(
color: Colors.blueGrey, fontSize: 15.0)),
),
Align(
alignment: Alignment.center,
child: Text('India,Banaglore',
style: TextStyle(color: Colors.black,
fontSize: 15.0,
fontWeight: FontWeight.bold
)),
),
],
),
),
),
],
),
],
),
),
),
);
}
}