How to use implement calendar in flutter - flutter

Question

I'm new to flutter and struggling to follow the use of external packages. An example is implementing the calendar from https://flutterawesome.com/flutter-rounded-date-picker
My code is shown below:
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_rounded_date_picker/rounded_picker.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
const Locale('en', 'US'), // English
],
title: 'Calendar Tester',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text("Timesheet"),
backgroundColor: Colors.blueGrey[900],
centerTitle: true,
),
body: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
children: [
Container(
child: Text('JX',
style: TextStyle(color: Colors.white),),
margin: EdgeInsets.fromLTRB(15,15,15,5),
padding:EdgeInsets.all(10),
decoration: BoxDecoration(
shape:BoxShape.circle,
color: Colors.black,
),
),
Text('John X',
style: TextStyle(color: Colors.black),
),
],
),
Column(
children: [
Container(
margin:EdgeInsets.fromLTRB(70,25,15,5) ,
child: Text("MONDAY, 11 JULY 2020",
style: TextStyle(color: Colors.blue),
),
),
Container(
margin: EdgeInsets.symmetric(horizontal: 16.0),
// child:
)
],
)
],
),
);
}
}
I simply want to include the calendar in the last container, using the child property that I have currently commented out. The docs for the library say I should just do this:
DateTime newDateTime = await showRoundedDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(DateTime.now().year - 1),
lastDate: DateTime(DateTime.now().year + 1),
borderRadius: 16,
),
Where exactly does this go and how do I get to show the calendar? Only interested in getting the calendar to show at the moment.

Answer 1

class MyHomePage extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
DateTime dateTime;
Duration duration;
#override
void initState() {
dateTime = DateTime.now();
duration = Duration(minutes: 10);
super.initState();
}
#override
Widget build(BuildContext context) {
Widget _buildBody() {
return Column(
children: <Widget>[
Container(
padding: const EdgeInsets.all(16),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
"Date Time selected",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
color: Colors.grey[600],
),
),
Text(
"$dateTime",
style: const TextStyle(fontSize: 20),
),
Text(
"Duration Selected",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20, color: Colors.grey[600]),
),
Text(
"$duration",
style: const TextStyle(fontSize: 20),
),
],
),
),
),
Expanded(
child: ListView(
padding: const EdgeInsets.only(bottom: 50),
children: <Widget>[
const SizedBox(height: 16),
FloatingActionButton.extended(
onPressed: () async {
DateTime newDateTime = await showRoundedDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime(DateTime.now().year - 1),
lastDate: DateTime(DateTime.now().year + 1),
borderRadius: 2,
);
if (newDateTime != null) {
setState(() => dateTime = newDateTime);
}
},
label: const Text("Material Calendar (Original)"),
),
],
),
),
],
);
}
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('Rounded Date Picker'),
),
body: Container(
padding: EdgeInsets.symmetric(horizontal: 32),
child: _buildBody(),
),
);
}
}