Skip to content

Commit 40a5f11

Browse files
afgprogrammerafgprogrammer
committed
Add select file functionality
1 parent 25dce5a commit 40a5f11

File tree

2 files changed

+267
-0
lines changed

2 files changed

+267
-0
lines changed

‎lib/main.dart

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
import 'dart:io';
2+
3+
import 'package:dio/dio.dart';
4+
import 'package:dotted_border/dotted_border.dart';
5+
import 'package:file_picker/file_picker.dart';
6+
import 'package:flutter/material.dart';
7+
import 'package:iconsax/iconsax.dart';
8+
9+
void main() {
10+
runApp(const MaterialApp(
11+
home: HomePage(),
12+
debugShowCheckedModeBanner: false,
13+
));
14+
}
15+
16+
class HomePage extends StatefulWidget {
17+
const HomePage({ Key? key }) : super(key: key);
18+
19+
@override
20+
_HomePageState createState() => _HomePageState();
21+
}
22+
23+
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
24+
String _image = 'https://ouch-cdn2.icons8.com/84zU-uvFboh65geJMR5XIHCaNkx-BZ2TahEpE9TpVJM/rs:fit:784:784/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvODU5/L2E1MDk1MmUyLTg1/ZTMtNGU3OC1hYzlh/LWU2NDVmMWRiMjY0/OS5wbmc.png';
25+
late AnimationController loadingController;
26+
27+
File? _file;
28+
PlatformFile? _platformFile;
29+
30+
selectFile() async {
31+
final file = await FilePicker.platform.pickFiles(
32+
type: FileType.custom,
33+
allowedExtensions: ['png', 'jpg', 'jpeg']
34+
);
35+
36+
if (file != null) {
37+
_file = File(file.files.single.path!);
38+
_platformFile = file.files.first;
39+
}
40+
41+
loadingController.forward();
42+
}
43+
44+
@override
45+
void initState() {
46+
loadingController = AnimationController(
47+
vsync: this,
48+
duration: const Duration(seconds: 10),
49+
)..addListener(() { setState(() {}); });
50+
51+
super.initState();
52+
}
53+
54+
@override
55+
Widget build(BuildContext context) {
56+
return Scaffold(
57+
body: SingleChildScrollView(
58+
child: Column(
59+
children: <Widget>[
60+
SizedBox(height: 100,),
61+
Image.network(_image, width: 300,),
62+
SizedBox(height: 50,),
63+
// Upload your file
64+
Text('Upload your file', style: TextStyle(fontSize: 25, color: Colors.grey.shade800, fontWeight: FontWeight.bold),),
65+
SizedBox(height: 10,),
66+
Text('File should be jpg, png', style: TextStyle(fontSize: 15, color: Colors.grey.shade500),),
67+
SizedBox(height: 20,),
68+
GestureDetector(
69+
onTap: selectFile,
70+
child: Padding(
71+
padding: EdgeInsets.symmetric(horizontal: 40.0, vertical: 20.0),
72+
child: DottedBorder(
73+
borderType: BorderType.RRect,
74+
radius: Radius.circular(10),
75+
dashPattern: [10, 4],
76+
strokeCap: StrokeCap.round,
77+
color: Colors.blue.shade400,
78+
child: Container(
79+
width: double.infinity,
80+
height: 150,
81+
decoration: BoxDecoration(
82+
color: Colors.blue.shade50.withOpacity(.3),
83+
borderRadius: BorderRadius.circular(10)
84+
),
85+
child: Column(
86+
mainAxisAlignment: MainAxisAlignment.center,
87+
children: [
88+
Icon(Iconsax.folder_open, color: Colors.blue, size: 40,),
89+
SizedBox(height: 15,),
90+
Text('Select your file', style: TextStyle(fontSize: 15, color: Colors.grey.shade400),),
91+
],
92+
),
93+
),
94+
)
95+
),
96+
),
97+
_platformFile != null
98+
? Container(
99+
padding: EdgeInsets.all(20),
100+
child: Column(
101+
crossAxisAlignment: CrossAxisAlignment.start,
102+
children: [
103+
Text('Selected File',
104+
style: TextStyle(color: Colors.grey.shade400, fontSize: 15, ),),
105+
SizedBox(height: 10,),
106+
Container(
107+
padding: EdgeInsets.all(8),
108+
decoration: BoxDecoration(
109+
borderRadius: BorderRadius.circular(10),
110+
color: Colors.white,
111+
boxShadow: [
112+
BoxShadow(
113+
color: Colors.grey.shade200,
114+
offset: Offset(0, 1),
115+
blurRadius: 3,
116+
spreadRadius: 2,
117+
)
118+
]
119+
),
120+
child: Row(
121+
children: [
122+
ClipRRect(
123+
borderRadius: BorderRadius.circular(8),
124+
child: Image.file(_file!, width: 70,)
125+
),
126+
SizedBox(width: 10,),
127+
Expanded(
128+
child: Column(
129+
crossAxisAlignment: CrossAxisAlignment.start,
130+
children: [
131+
Text(_platformFile!.name,
132+
style: TextStyle(fontSize: 13, color: Colors.black),),
133+
SizedBox(height: 5,),
134+
Text('${(_platformFile!.size / 1024).ceil()} KB',
135+
style: TextStyle(fontSize: 13, color: Colors.grey.shade500),
136+
),
137+
SizedBox(height: 5,),
138+
Container(
139+
height: 5,
140+
clipBehavior: Clip.hardEdge,
141+
decoration: BoxDecoration(
142+
borderRadius: BorderRadius.circular(5),
143+
color: Colors.blue.shade50,
144+
),
145+
child: LinearProgressIndicator(
146+
value: loadingController.value,
147+
)
148+
),
149+
],
150+
),
151+
),
152+
SizedBox(width: 10,),
153+
],
154+
)
155+
),
156+
SizedBox(height: 20,),
157+
// MaterialButton(
158+
// minWidth: double.infinity,
159+
// height: 45,
160+
// onPressed: () {},
161+
// color: Colors.black,
162+
// child: Text('Upload', style: TextStyle(color: Colors.white),),
163+
// )
164+
],
165+
))
166+
: Container(),
167+
SizedBox(height: 150,),
168+
],
169+
),
170+
),
171+
);
172+
}
173+
}

‎pubspec.yaml

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
name: day44
2+
description: A new Flutter project.
3+
4+
# The following line prevents the package from being accidentally published to
5+
# pub.dev using `flutter pub publish`. This is preferred for private packages.
6+
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
7+
8+
# The following defines the version and build number for your application.
9+
# A version number is three numbers separated by dots, like 1.2.43
10+
# followed by an optional build number separated by a +.
11+
# Both the version and the builder number may be overridden in flutter
12+
# build by specifying --build-name and --build-number, respectively.
13+
# In Android, build-name is used as versionName while build-number used as versionCode.
14+
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
15+
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
16+
# Read more about iOS versioning at
17+
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
18+
version: 1.0.0+1
19+
20+
environment:
21+
sdk: ">=2.12.0 <3.0.0"
22+
23+
# Dependencies specify other packages that your package needs in order to work.
24+
# To automatically upgrade your package dependencies to the latest versions
25+
# consider running `flutter pub upgrade --major-versions`. Alternatively,
26+
# dependencies can be manually updated by changing the version numbers below to
27+
# the latest version available on pub.dev. To see which dependencies have newer
28+
# versions available, run `flutter pub outdated`.
29+
dependencies:
30+
flutter:
31+
sdk: flutter
32+
33+
34+
# The following adds the Cupertino Icons font to your application.
35+
# Use with the CupertinoIcons class for iOS style icons.
36+
cupertino_icons: ^1.0.2
37+
loading_indicator: ^3.0.2
38+
dotted_border: ^2.0.0+1
39+
iconsax: ^0.0.8
40+
file_picker: ^4.1.6
41+
dio: ^4.0.0
42+
43+
dev_dependencies:
44+
flutter_test:
45+
sdk: flutter
46+
47+
# The "flutter_lints" package below contains a set of recommended lints to
48+
# encourage good coding practices. The lint set provided by the package is
49+
# activated in the `analysis_options.yaml` file located at the root of your
50+
# package. See that file for information about deactivating specific lint
51+
# rules and activating additional ones.
52+
flutter_lints: ^1.0.0
53+
54+
# For information on the generic Dart part of this file, see the
55+
# following page: https://dart.dev/tools/pub/pubspec
56+
57+
# The following section is specific to Flutter.
58+
flutter:
59+
60+
# The following line ensures that the Material Icons font is
61+
# included with your application, so that you can use the icons in
62+
# the material Icons class.
63+
uses-material-design: true
64+
65+
# To add assets to your application, add an assets section, like this:
66+
# assets:
67+
# - images/a_dot_burr.jpeg
68+
# - images/a_dot_ham.jpeg
69+
70+
# An image asset can refer to one or more resolution-specific "variants", see
71+
# https://flutter.dev/assets-and-images/#resolution-aware.
72+
73+
# For details regarding adding assets from package dependencies, see
74+
# https://flutter.dev/assets-and-images/#from-packages
75+
76+
# To add custom fonts to your application, add a fonts section here,
77+
# in this "flutter" section. Each entry in this list should have a
78+
# "family" key with the font family name, and a "fonts" key with a
79+
# list giving the asset and other descriptors for the font. For
80+
# example:
81+
# fonts:
82+
# - family: Schyler
83+
# fonts:
84+
# - asset: fonts/Schyler-Regular.ttf
85+
# - asset: fonts/Schyler-Italic.ttf
86+
# style: italic
87+
# - family: Trajan Pro
88+
# fonts:
89+
# - asset: fonts/TrajanPro.ttf
90+
# - asset: fonts/TrajanPro_Bold.ttf
91+
# weight: 700
92+
#
93+
# For details regarding fonts from package dependencies,
94+
# see https://flutter.dev/custom-fonts/#from-packages

0 commit comments

Comments
 (0)