build method
- BuildContext context
override
Builds the UI for the send screen.
Returns a Scaffold widget that contains a Column with two children:
- A Center widget that contains a Stack with a GestureDetector that handles file picking and dragging.
- An ElevatedButton that triggers the transfer when pressed.
Implementation
@override
Widget build(BuildContext context) {
return Scaffold(
// Set the background color of the scaffold.
backgroundColor: Constants.backColor,
// Build the body of the scaffold.
body: Column(
// Align the children vertically to the center.
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Build the file picking and dragging UI.
Center(
child: Stack(
children: [
// Build the gesture detector.
GestureDetector(
// Handle file picking when the user taps.
onTap: openFilePicker,
// Handle file dragging.
child: DropTarget(
// Add the selected files to the list when the user drops files.
onDragDone: (detail) {
setState(() {
_list.addAll(detail.files);
});
},
// Show the add icon when the user drags files over the drop area.
onDragEntered: (detail) {
setState(() {
_dragging = true;
});
},
// Hide the add icon when the user stops dragging files.
onDragExited: (detail) {
setState(() {
_dragging = false;
});
},
// Build the drop area UI.
child: Column(
children: [
// Build the circular container for the drop area.
Container(
height: 200,
width: 200,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Constants.textColor),
// Show the add icon when the user is dragging files.
child: _dragging
? const Center(
child: Icon(
Icons.add_rounded,
color: Constants.highlightColor,
size: 200,
),
)
// Show the upload icon when the user is not dragging files.
: const Center(
child: Icon(
Icons.upload_rounded,
color: Constants.highlightColor,
size: 200,
),
),
),
// Add some spacing between the drop area and the send button.
const SizedBox(height: 16),
],
),
),
),
],
),
),
// Build the send button.
ElevatedButton(
style: ElevatedButton.styleFrom(
// Set the background color of the button.
backgroundColor: Constants.textColor,
// Set the text color of the button.
foregroundColor: Constants.backColor,
// Set the shape of the button.
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
),
// Trigger the transfer when the user presses the button.
onPressed: () {
_startTransfer();
},
// Set the text of the button.
child: const Text("Send"),
),
],
),
);
}