Embedded Files
Cross Platform Applications with Interactive Components
Cross Platform Applications with Interactive Components
Favorite icon ♥️
Favorite icon ♥️
Row(
children: [
Expanded(
child: Column(
children: [
Card(
elevation: 0.0,
margin: EdgeInsets.all(10),
child: SizedBox(
width: 200,
child: Image(image: AssetImage('images/Salalah2.jpg')),
),
),
Align(alignment: Alignment.bottomRight, child: fav())
], //children
), // Column
), //Expanded
Expanded(
child: Column(
children: [
Card(
elevation: 0.0,
margin: EdgeInsets.all(10),
child: SizedBox(
width: 200,
child: Image(image: AssetImage('images/Salalah3.jpg')),
),
),
Align(alignment: Alignment.bottomRight, child: fav())
],
),
),
],
),
Text Widget
Text Widget
Container(
alignment: Alignment.center,
width: double.infinity,
color: Colors.amber,
child: Text(
'Popular Places',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
Row(
children: [
Container(
margin: EdgeInsets.only(left: 10),
child: Text('Haffa Beach / OMR 20')),
Spacer(),
Align(alignment: Alignment.bottomRight, child: fav()),
],
),
Container(
width: double.infinity,
color: Colors.amber[900],
height: 5,
),
Stateful Widget Class
Stateful Widget Class
class fav extends StatefulWidget {
const fav({super.key});
@override
State<fav> createState() => _favState();
}
class _favState extends State<fav> {
bool liked = false; // declare variable liked and set to false
@override
Widget build(BuildContext context) {
return IconButton(
onPressed: () {
setState(() => liked = !liked);
},
icon: liked
? (Icon(
Icons.favorite,
color: Colors.red,
))
: (Icon(Icons.favorite)),
);
}
}
TextFormFields, OutlinedButton, TextButton
TextFormFields, OutlinedButton, TextButton
class _CurrencyState extends State<Currency> {
TextEditingController _curr = TextEditingController();
double curr_rate = 0;
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextFormField(
controller: _curr,
decoration: InputDecoration(
labelText: 'Currency in OMR',
prefixIcon: Icon(Icons.money),
border: OutlineInputBorder(),
),
),
SizedBox(
height: 20,
),
OutlinedButton(
onPressed: () {
setState(() {
curr_rate = (double.parse(_curr.text)) * 2.60;
});
},
style: OutlinedButton.styleFrom(maximumSize: Size(100, 50)),
child: Text(
'Convert',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
SizedBox(
height: 20,
),
Text(
'OMR TO USD : ' + curr_rate.toString(),
style: TextStyle(
fontSize: 20,
color: Colors.blueGrey,
fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
],
),
);
}
}
Make Column Scrollable
Make Column Scrollable
body: SingleChildScrollView(
child: Column(
children: [
Container(
color: Colors.green[800],
margin: EdgeInsets.zero,
padding: EdgeInsets.all(20),
height: 300.0,
width: 500.0,
child: Image(
image: AssetImage('images/Salalah1.jpg'),
),
),
RadioListTile
RadioListTile
class Discount extends StatefulWidget {
const Discount({super.key});
@override
State<Discount> createState() => _DiscountState();
}
class _DiscountState extends State<Discount> {
String mtype = "mc";
final TextEditingController _tourRate = TextEditingController();
double discount = 0.0;
double netRate = 0.0;
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
width: double.infinity,
color: Colors.amber[900],
height: 5,
),
Container(
width: double.infinity,
color: Colors.grey,
child: Text('Tour Discount',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
color: Colors.white)),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
TextFormField(
controller: _tourRate,
onChanged: (value) {
setState(() {
if (_tourRate.text.isNotEmpty &&
double.parse(_tourRate.text) != 0) {
discount = double.parse(_tourRate.text) * 0.8;
netRate = double.parse(_tourRate.text) - discount;
} else {
discount = 0.0;
netRate = 0.0;
}
});
},
decoration: InputDecoration(
labelText: 'Tour Rate',
prefixIcon: Icon(Icons.money),
border: OutlineInputBorder(),
),
),
RadioListTile(
title: Text("Member Customer"),
value: "mc",
groupValue: mtype,
onChanged: (value) {
setState(() {
mtype = value.toString();
if (_tourRate.text.isNotEmpty &&
double.parse(_tourRate.text) != 0) {
discount = double.parse(_tourRate.text) * 0.8;
netRate = double.parse(_tourRate.text) - discount;
}
});
},
),
RadioListTile(
title: Text("Guest Customer"),
value: "gc",
groupValue: mtype,
onChanged: (value) {
setState(() {
mtype = value.toString();
if (_tourRate.text.isNotEmpty &&
double.parse(_tourRate.text) != 0) {
discount = double.parse(_tourRate.text) * 0.5;
netRate = double.parse(_tourRate.text) - discount;
}
});
}),
Text('Tour Estimated Rate'),
Text('Discount: $discount'),
Text('Net Rate: $netRate'),
SizedBox(
height: 50.0,
)
],
),
),
Tours()
],
);
}
}
CheckboxListTile
CheckboxListTile
class Tours extends StatefulWidget {
const Tours({super.key});
@override
State<Tours> createState() => _ToursState();
}
class _ToursState extends State<Tours> {
bool ta = false;
bool tb = false;
bool tc = false;
bool td = false;
double tourPrice = 0;
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
width: double.infinity,
color: Colors.grey,
alignment: Alignment.center,
child: Text(
'Tours',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
CheckboxListTile(
title: Image(image: AssetImage('images/Salalah1.jpg')),
value: ta,
onChanged: (value) {
setState(() {
ta = value!;
if (ta) {
tourPrice += 150;
} else {
tourPrice -= 150;
}
});
},
),
CheckboxListTile(
title: Image(image: AssetImage('images/Salalah2.jpg')),
value: tb,
onChanged: (value) {
setState(() {
tb = value!;
if (tb) {
tourPrice += 50;
} else {
tourPrice -= 50;
}
});
},
),
CheckboxListTile(
title: Image(image: AssetImage('images/Salalah3.jpg')),
value: tc,
onChanged: (value) {
setState(() {
tc = value!;
if (tc) {
tourPrice += 70;
} else {
tourPrice -= 70;
}
});
},
),
CheckboxListTile(
title: Image(image: AssetImage('images/Salalah4.jpg')),
value: td,
onChanged: (value) {
setState(() {
td = value!;
if (td) {
tourPrice += 70;
} else {
tourPrice -= 70;
}
});
},
),
Container(
width: double.infinity,
alignment: Alignment.center,
color: Colors.grey,
child: Text(
'Total Tour Price: $tourPrice',
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
),
),
SizedBox(
height: 100.0,
)
],
);
}
}
TableCalendar
TableCalendar
Install Table Calendar package from the terminal
flutter pub add table_calendar
Add import to flutter
import 'package:table_calendar/table_calendar.dart';
Create statefulWidget MyTableCaledar
class MyTableCalendar extends StatefulWidget {
const MyTableCalendar({super.key});
@override
State<MyTableCalendar> createState() => _MyTableCalendarState();
}
class _MyTableCalendarState extends State<MyTableCalendar> {
DateTime selectedDay = DateTime.now();
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
color: Colors.grey,
width: double.infinity,
alignment: Alignment.center,
child: Text(
'Select Tour Date',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.bold),
),
),
TableCalendar(
rowHeight: 40,
headerStyle: HeaderStyle(
formatButtonVisible: false,
titleCentered: true,
),
firstDay: DateTime.utc(2020, 1, 1),
lastDay: DateTime.utc(2030, 12, 31),
focusedDay: selectedDay,
calendarFormat: CalendarFormat.month,
startingDayOfWeek: StartingDayOfWeek.sunday,
daysOfWeekVisible: true,
onDaySelected: (selectedDay, focusedDay) {
setState(() {
this.selectedDay = selectedDay;
});
},
selectedDayPredicate: (day) => isSameDay(selectedDay, day),
),
],
);
}
}
Currency(),
Discount(),
Tours(),
MyTableCalendar(),
DropButton(),
ListView and Dropdown Button
ListView and Dropdown Button
Create a Stateful Widget, This has Listview Widget and DropdownButton Widget. Since we are using SingleChildScroll view it is important to set the height of the container with has the listview to make sure it will scroll within the page
class DropButton extends StatefulWidget {
const DropButton({super.key});
@override
State<DropButton> createState() => _DropButtonState();
}
class _DropButtonState extends State<DropButton> {
String selectedval = 'Sightseeing';
List tours = ['Sightseeing', 'Adventure', 'Relaxation'];
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: 200.0,
child: ListView(
children: [
Container(
width: double.infinity,
color: Colors.grey,
child: Text('Tour Type',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.amber)),
),
Text(
'Select Tour Type',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
DropdownButton(
icon: Icon(Icons.arrow_drop_down),
items: tours.map((e) {
return DropdownMenuItem(
value: e,
child: Text(e),
);
}).toList(),
value: selectedval,
onChanged: (value) {
setState(() {
selectedval = value.toString();
});
},
),
SizedBox(
height: 20,
),
],
),
);
}
}
Source Code Available on GitHub
Page updated
Google Sites
Report abuse