I have implemented a linear graph using the below code. I use charts flutter package.. the first image shows the graph I created. the second image shows what I need to be implemented I want to add another two lines for the same graph with different data values. how can I do this? appreciate your help on this. I use hardcoded values for the graph.
developer_series.dart
import 'package:charts_flutter/flutter.dart' as charts;
class DeveloperSeries {
final int day;
final int calories;
final charts.Color barColor;
DeveloperSeries(
{
required this.day,
required this.calories,
required this.barColor
}
);
}
developer_chart.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'developer_series.dart';
class DeveloperChart extends StatelessWidget {
final List<DeveloperSeries> data;
DeveloperChart({required this.data});
#override
Widget build(BuildContext context) {
List<charts.Series<DeveloperSeries,int>> series = [
charts.Series(
id: "calories",
data: data,
domainFn: (DeveloperSeries series, _) => series.day,
measureFn: (DeveloperSeries series, _) => series.calories,
colorFn: (DeveloperSeries series, _) => series.barColor
)
];
return Container(
height: 700,
// padding: EdgeInsets.all(25),
// decoration: BoxDecoration(
// borderRadius: BorderRadius.circular(40),
//
// ),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
color: Colors.grey.withOpacity(0.4),
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only( top: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
height: 30,
width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
gradient: LinearGradient(
colors: [
Color.fromRGBO(125, 158, 205, 1.0),
Color.fromRGBO(158, 125, 243, 0.7490196078431373),
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
),
child: TextButton(onPressed:() {},
child: const Text('Daily', style: TextStyle(color: Colors.white),),
),
),
Container(
height: 30,
width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
gradient: LinearGradient(
colors: [
Color.fromRGBO(125, 158, 205, 1.0),
Color.fromRGBO(158, 125, 243, 0.7490196078431373),
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
),
child: TextButton(onPressed:() {},
child: const Text('Week', style: TextStyle(color: Colors.white),),
),
),
Container(
height: 30,
width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
gradient: LinearGradient(
colors: [
Color.fromRGBO(125, 158, 205, 1.0),
Color.fromRGBO(158, 125, 243, 0.7490196078431373),
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
),
child: TextButton(
onPressed:() {},
child: const Text('Month', style: TextStyle(color: Colors.white),),
),
),
],
),
),
Expanded(
child: charts.LineChart(series,
animate: true,
domainAxis: const charts.NumericAxisSpec(
renderSpec: charts.GridlineRendererSpec(
labelStyle: charts.TextStyleSpec(
fontSize: 10,
color: charts.MaterialPalette.white,
),
lineStyle: charts.LineStyleSpec(
color: charts.MaterialPalette.transparent,
)),
tickProviderSpec:
charts.BasicNumericTickProviderSpec(zeroBound: false),
// viewport: charts.NumericExtents(2016.0, 2022.0),
),
primaryMeasureAxis: new charts.NumericAxisSpec(
renderSpec: charts.GridlineRendererSpec(
// labelOffsetFromAxisPx: -20,
// labelAnchor: charts.TickLabelAnchor.after,
lineStyle: charts.LineStyleSpec(
color: charts.MaterialPalette.white,
thickness: 1,
)
),
),
),
),
],
),
),
),
);
}
}
graph_calories.dart
import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'developer_chart.dart';
import 'developer_series.dart';
class GraphDisplayCalories extends StatefulWidget {
#override
State<GraphDisplayCalories> createState() => _GraphDisplayCaloriesState();
}
class _GraphDisplayCaloriesState extends State<GraphDisplayCalories> {
final List<DeveloperSeries> data = [
DeveloperSeries(
day: 2017,
calories: 40000,
barColor: charts.ColorUtil.fromDartColor(Colors.purple),
),
DeveloperSeries(
day: 2018,
calories: 10000,
barColor: charts.ColorUtil.fromDartColor(Colors.purple),
),
DeveloperSeries(
day:2019,
calories: 20000,
barColor: charts.ColorUtil.fromDartColor(Colors.purple),
),
DeveloperSeries(
day: 2020,
calories: 35000,
barColor: charts.ColorUtil.fromDartColor(Colors.purple),
),
DeveloperSeries(
day: 2021,
calories: 20000,
barColor: charts.ColorUtil.fromDartColor(Colors.purple),
),
];
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Center(
child: DeveloperChart(
data: data,
)
),
);
}
}
Related
I got the error: "LateInitializationError: Field '_splitScreenMode#963084504' has not been initialized", in my splash screen when I did try to make my second page(next page after splash, named: pageOne) responsive by importing flutter_screen_util package. I added .w and .h for width and height measurments. I am new in flutter, so I can't identify this error.
My splash screen code:
import 'package:flutter/material.dart';
import 'package:my_wallet/screens/categories.dart';
import 'package:my_wallet/screens/page_1.dart';
class ScreenSplash extends StatefulWidget {
const ScreenSplash({Key? key}) : super(key: key);
#override
State<ScreenSplash> createState() => _ScreenSplashState();
}
class _ScreenSplashState extends State<ScreenSplash> {
#override
void initState() {
checkUser(context);
super.initState();
}
#override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topRight,
colors: [
Color.fromARGB(255, 0, 27, 48),
Color.fromARGB(255, 17, 149, 186),
],
),
),
child: Scaffold(
backgroundColor: Colors.transparent,
body: Center(
child: Image.asset(
'lib/assets/coin-spin3.gif',
height: 180,
),
),
),
);
}
}
Future<void> checkUser(context) async {
await Future.delayed(
const Duration(seconds: 4),
);
Navigator.of(context).pushReplacement(
MaterialPageRoute(
// builder: (ctx) => const PageOne(),
builder: (ctx) => const PageOne(),
),
);
}
My pageOne (screen after splash) code:
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:my_wallet/screens/page_2.dart';
class PageOne extends StatelessWidget {
const PageOne({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
height: double.infinity,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomLeft,
end: Alignment.topRight,
colors: [
Color.fromARGB(255, 0, 27, 48),
Color.fromARGB(255, 17, 149, 186),
],
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
SizedBox(
height: 220.h,
child: const Image(
image: AssetImage(
'lib/assets/moneymanagement1.png',
),
),
),
const SizedBox(
height: 70,
),
const Text(
'Track Your Expense',
style: TextStyle(
color: Color.fromARGB(255, 255, 255, 255), fontSize: 25),
),
const SizedBox(
height: 100,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
const CircleAvatar(
backgroundColor: Color.fromARGB(255, 255, 255, 255),
radius: 4.5,
),
const SizedBox(
width: 10,
),
const CircleAvatar(
backgroundColor: Color.fromARGB(255, 104, 104, 104),
radius: 4.5,
),
const SizedBox(
width: 120,
),
IconButton(
onPressed: (() {
Navigator.of(context).pushReplacement(
MaterialPageRoute(
builder: (ctx1) => const PageTwo(),
),
);
}),
icon: const Icon(
Icons.arrow_forward_ios,
color: Colors.white,
),
),
const SizedBox(
width: 10,
),
],
),
const SizedBox(
height: 40,
),
],
),
),
),
);
}
}
Have you setup code in main.dart for "ScreenUtilInit"?
as mentioned in https://pub.dev/packages/flutter_screenutil readme section steps.
I have a Scaffold that takes API Data and displays it. I also have a page controller with five different pages. The page controller passes a variable to my .where to tell him to sort after that specific thing for the correct page. For this to work the page needs to refreshed to display the new thing. That does not work since my getApiData is a future. I dont know how to solve this without rewriting most of my code.
import 'dart:convert';
import 'package:css_app/pages/JsonToDart.dart';
import 'package:flutter/material.dart';
//import '../models/deinModel_model.dart';
import 'package:http/http.dart' as http;
class StundenplanZeiger extends StatefulWidget {
StundenplanZeiger(
{Key? key, required this.headline, required this.tagController})
: super(key: key);
String headline;
String tagController;
#override
State<StundenplanZeiger> createState() =>
StundenplanZeigerState(headline: headline, tagController: tagController);
}
class StundenplanZeigerState extends State<StundenplanZeiger> {
List<Unterrichtsplan>? klassennameListe;
List<Unterrichtsplan>? klassennameListeSortiert;
StundenplanZeigerState({required this.headline, required this.tagController});
String headline;
String tagController;
Future<void> getApiData() async {
String url = 'MyAPI';
var response = await http.get(Uri.parse(url));
klassennameListe = jsonDecode(response.body)
.map((item) => Unterrichtsplan.fromJson(item))
.toList()
.cast<Unterrichtsplan>();
if (this.mounted) {
setState(() {});
}
klassennameListeSortiert = klassennameListe!
.where(
(item) => (item.klasse == "5a" && item.tag == tagController),
)
.toList();
}
#override
void initState() {
super.initState();
getApiData();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Stundenplan'),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.all(1.00),
alignment: Alignment.center,
child: Text(headline, style: TextStyle(fontSize: 20)),
),
if (klassennameListeSortiert != null)
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView.builder(
itemCount: klassennameListeSortiert?.length,
itemBuilder: (BuildContext context, int index) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
alignment: Alignment.center,
padding: EdgeInsets.all(8.00),
margin: EdgeInsets.all(10),
constraints: BoxConstraints
.tightForFinite(), //Das hier könnte Fehler verursachen, sollte später die letzte Box bis unendlich lang sein, ist das hier wahrscheinlich schuld.
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 2.0,
style: BorderStyle.solid,
),
borderRadius:
BorderRadius.all(Radius.circular(20.00)),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 4.0,
spreadRadius: 1.0,
),
],
color: Colors.white,
/*gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.pink.shade100,
Colors.pink.shade50,
]),*/
),
child: Stack(
children: <Widget>[
Container(
child: Transform.translate(
offset: Offset(-10, -15),
child: Container(
alignment: Alignment.topLeft,
child: Container(
padding: EdgeInsets.all(6.00),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.grey[200],
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 4.0,
spreadRadius: 1.0,
),
]),
child: Text(
klassennameListe![index]
.stunde
.toString(),
),
),
),
),
),
Positioned(
child: Container(
alignment: Alignment.center,
child: Text(
klassennameListe![index].fach.toString(),
style: TextStyle(
fontSize: 70,
),
),
),
),
Positioned(
top: 0,
right: 0,
child: Container(
padding: EdgeInsets.all(6.00),
margin: EdgeInsets.all(6.00),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 1.5,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(
Radius.circular(20.00)),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 4.0,
spreadRadius: 1.0,
),
],
color: Colors.white,
/*gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.pink.shade100,
Colors.pink.shade50,
]),*/
),
child: Text(
klassennameListe![index].raum.toString(),
),
),
),
Positioned(
bottom: 0,
right: 0,
child: Container(
padding: EdgeInsets.all(6.00),
margin: EdgeInsets.all(6.00),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 1.5,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(
Radius.circular(20.00)),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 4.0,
spreadRadius: 1.0,
),
],
color: Colors.white,
/*gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.pink.shade100,
Colors.pink.shade50,
]),*/
),
child: Text(
klassennameListe![index]
.lehrer
.toString(),
),
),
),
Positioned(
bottom: 0,
left: 0,
child: Container(
padding: EdgeInsets.all(6.00),
margin: EdgeInsets.all(6.00),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 1.5,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(
Radius.circular(20.00)),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 4.0,
spreadRadius: 1.0,
),
],
color: Colors.white,
/*gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.pink.shade100,
Colors.pink.shade50,
]),*/
),
child: Text(
klassennameListe![index]
.klasse
.toString(),
),
),
),
],
),
),
],
);
}),
),
),
],
),
);
}
}
Here is the second code
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'StundenplanZeiger.dart';
late String stunde;
late int aktuellerTag = 1; //Muss noch abgeändert werden
class Stundenplan3 extends StatefulWidget {
const Stundenplan3({Key? key}) : super(key: key);
#override
_Stundenplan3State createState() => _Stundenplan3State();
}
class _Stundenplan3State extends State<Stundenplan3> {
final controller = PageController(initialPage: 1);
#override
void dispose() {
controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
onPageChanged: (value) => StundenplanZeigerState.getApiData(),
controller: controller,
children: [
StundenplanZeiger(headline: "Montag", tagController: "1"),
StundenplanZeiger(headline: "Dienstag", tagController: "2"),
StundenplanZeiger(headline: "Mittwoch", tagController: "3"),
StundenplanZeiger(headline: "Donnerstag", tagController: "4"),
StundenplanZeiger(headline: "Freitag", tagController: "5"),
],
),
);
}
}
class StundenplanBody extends StatefulWidget {
StundenplanBody(
{Key? key, required this.headline, required this.tagController})
: super(key: key);
String headline;
String tagController;
#override
_StundenplanBodyState createState() =>
_StundenplanBodyState(headline: headline, tagController: tagController);
}
class _StundenplanBodyState extends State<StundenplanBody> {
_StundenplanBodyState({required this.headline, required this.tagController});
String headline;
String tagController;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(headline),
),
body: ListView(
children: [
StundenElement(),
],
),
);
}
}
class StundenElement extends StatelessWidget {
const StundenElement({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Column(
children: [
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(20),
),
child: Container(
padding: EdgeInsets.all(20),
child: Text("Test"),
),
),
SizedBox(
height: 5,
),
],
);
}
}
Thank you for your help in advance!
Exception has occurred.
FlutterError setState() or markNeedsBuild() called during build.
This TextFormField widget cannot be marked as needing to build because the framework is already in the process of building widgets.
A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building.
This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase.
The widget on which setState() or markNeedsBuild() was called was:
TextFormField
The widget which was currently being built when the offending call was made was:
Builder)
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:project_1_money_management/Screens/Home/home_screen.dart';
import 'package:project_1_money_management/db/transaction_db.dart';
import 'package:project_1_money_management/models/category_model.dart';
import 'package:project_1_money_management/update/update_category.dart';
import '../Screens/Adding_items/Widgets/date_picker.dart';
import '../db/category_db.dart';
import '../models/transactions_model.dart';
final purposecontroller = TextEditingController();
final amountcontroller = TextEditingController();
class UpdateScreen extends StatefulWidget {
final TransactionModel value;
const UpdateScreen({Key? key, required this.value}) : super(key: key);
#override
State<UpdateScreen> createState() => _UpdateScreenState();
}
class _UpdateScreenState extends State<UpdateScreen> {
CategoryType? type;
DateTime? _date;
CategoryModel? cat;
#override
// ignore: must_call_super
void initState() {
CategoryDB().refreshUI();
TransactionDB.instance.refresh();
super.initState();
amountcontroller.text = widget.value.amount.toString();
purposecontroller.text = widget.value.purpose;
_date = widget.value.date;
cat = widget.value.category;
type = widget.value.type;
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color.fromARGB(255, 35, 32, 32),
body: SafeArea(
child: ListView(
children: [
Padding(
padding: const EdgeInsets.only(top: 40.0),
child: Text(
'Add Transactions',
style: GoogleFonts.inconsolata(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.white),
),
),
const SizedBox(
height: 40,
),
Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8),
child: Card(
color: const Color.fromARGB(48, 175, 171, 171),
elevation: 60,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
child: Padding(
padding: const EdgeInsets.only(top: 40.0, bottom: 40),
child: Column(
children: [
ElevatedButton.icon(
style: ElevatedButton.styleFrom(
primary: const Color.fromARGB(255, 255, 251,
253), //change background color of button
onPrimary: const Color.fromARGB(
255, 56, 120, 204), //change text color of button
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
elevation: 15.0,
),
onPressed: () {
selectDates(context);
},
icon: const Icon(Icons.calendar_month),
label: Text(
'${_date!.day}/${_date!.month}/${_date!.year}',
),
),
const SizedBox(
height: 10,
),
const SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10),
child: Row(
children: [
CateogryUpdate(cats: cat!, types: type!),
],
)),
Form(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
controller: amountcontroller,
decoration: InputDecoration(
fillColor: Colors.white,
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
controller: purposecontroller,
decoration: InputDecoration(
contentPadding: const EdgeInsets.symmetric(
vertical: 40.0, horizontal: 10.0),
fillColor: Colors.white,
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
),
],
)),
ClipRRect(
borderRadius: BorderRadius.circular(19),
child: Stack(
children: <Widget>[
Positioned.fill(
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Color.fromARGB(255, 81, 185, 67),
Color.fromARGB(255, 32, 188, 32),
Color.fromARGB(255, 52, 181, 32),
],
),
),
),
),
TextButton(
style: TextButton.styleFrom(
padding: const EdgeInsets.only(),
primary:
const Color.fromARGB(255, 247, 247, 247),
textStyle: GoogleFonts.inconsolata(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
onPressed: () async {
await update(
widget.value.id!,
amountcontroller.text,
);
},
child: const Text(' Update '),
),
],
),
),
const SizedBox(
height: 14,
),
],
),
),
),
),
],
),
),
);
}
selectDates(BuildContext context) async {
selected = await showDatePicker(
context: context,
initialDate: _date!,
firstDate: DateTime(2021),
lastDate: DateTime.now(),
);
if (selected != null && selected != _date!) {
setState(() {
_date = selected!;
});
}
}
update(String id, String amt) async {
final _update = TransactionModel(
amount: double.tryParse(amt)!,
purpose: purposecontroller.text,
category: cat!,
date: _date!,
type: type,
id: id,
);
await TransactionDB.instance.updateTransact(_update);
Navigator.of(context)
.push(MaterialPageRoute(builder: (route) => const ScreenHome()));
}
}
Try below code before seState();
WidgetsBinding.instance.addPostFrameCallback((_) {
if (selected != null && selected != _date!) {
setState(() {
_date = selected!;
});
}
});
So I'm currently trying to implement some searching functionality to my ListView and this does work great actually. When I type in some letters it automatically shows me the right things (-> See Screenshot_Listview_1.png and Screenshot_Listview_2.png).
There is only one problem. I want the different texts from my listview to be clickable, so when I click on them a new ModalBottomSheet should appear.
For example: I'm searching for "Apple" and when I click on the text "Apple" a ModalBottomSheet opens and I can read some facts about apples.
I tried the onTap method and it works so far but I only managed to open the same BottomSheet.. But I need different BottomSheets depending on what I have tapped on.
This is what I got so far. Can you please help me out? I really don't know how to solve this problem. Thank you so much!!
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
class GlossarScreen extends StatefulWidget {
#override
_GlossarScreenState createState() => _GlossarScreenState();
}
class _GlossarScreenState extends State<GlossarScreen> {
TextEditingController _textEditingController = TextEditingController();
List<String> glossarListOnSearch = [];
List<String> glossarList = [
'Apple',
'Orange',
'Banana',
'Grapefruit',
'Mango',
'Kiwi',
'Grapes',
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Glossar'),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xffFBD23E), Color(0xffF6BE03)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter),
),
),
bottom: PreferredSize(
preferredSize: Size(0, 60),
child: Padding(
padding: const EdgeInsets.fromLTRB(12, 0, 12, 10),
child: Container(
//height: 50,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.white60, Colors.white70],
begin: Alignment.topCenter,
end: Alignment.bottomCenter),
borderRadius: BorderRadius.circular(50),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 0, 0),
child: TextField(
textAlign: TextAlign.left,
onChanged: (value) {
setState(() {
glossarListOnSearch = glossarList
.where((element) => element
.toLowerCase()
.contains(value.toLowerCase()))
.toList();
});
},
controller: _textEditingController,
decoration: InputDecoration(
border: InputBorder.none,
errorBorder: InputBorder.none,
enabledBorder: InputBorder.none,
contentPadding: EdgeInsets.all(0),
hintText: 'Search'),
),
),
),
),
),
),
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xffFEFDFD), Color(0xffBDBDB2)],
begin: Alignment.topLeft,
end: Alignment.bottomRight),
),
child: _textEditingController.text.isNotEmpty &&
glossarListOnSearch.isEmpty
? Column(
children: [
Align(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 50, 0, 0),
child: Text(
'No results',
style: TextStyle(
fontFamily: 'Avenir',
fontSize: 22,
color: Color(0xff848484)),
),
),
)
],
)
: ListView.builder(
itemCount: _textEditingController.text.isNotEmpty
? glossarListOnSearch.length
: glossarList.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
_testFuction(context);
},
child: Padding(
padding: const EdgeInsets.fromLTRB(12, 15, 12, 15),
child: Text(
_textEditingController.text.isNotEmpty
? glossarListOnSearch[index]
: glossarList[index],
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontFamily: 'Avenir'),
),
),
);
},
),
),
);
}
}
void _testFuction(context) {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return Scaffold(
body: Text('This text should be dependent on what I have tapped on. If I tap on "Apple" a different ModalBottomSheep shall appear then when I press on "Banana".'),
);
},
);
}
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'package:stack_demo/models/FruitModel.dart';
class GlossarScreen extends StatefulWidget {
#override
_GlossarScreenState createState() => _GlossarScreenState();
}
class _GlossarScreenState extends State<GlossarScreen> {
TextEditingController _textEditingController = TextEditingController();
List<FruitModel> glossarListOnSearch = [];
List<FruitModel> glossarList = [];
#override
void initState() {
glossarList.add(FruitModel(id: 0, name: 'Apple', facts: 'Good for health'));
glossarList.add(
FruitModel(id: 1, name: 'Banana', facts: 'Banana is also for health'));
glossarList.add(
FruitModel(id: 2, name: 'Orange', facts: 'Orange good for health'));
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Glossar'),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xffFBD23E), Color(0xffF6BE03)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter),
),
),
bottom: PreferredSize(
preferredSize: Size(0, 60),
child: Padding(
padding: const EdgeInsets.fromLTRB(12, 0, 12, 10),
child: Container(
//height: 50,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.white60, Colors.white70],
begin: Alignment.topCenter,
end: Alignment.bottomCenter),
borderRadius: BorderRadius.circular(50),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 0, 0),
child: TextField(
textAlign: TextAlign.left,
onChanged: (value) {
setState(() {
glossarListOnSearch = glossarList
.where((element) => element.name!
.toLowerCase()
.contains(value.toLowerCase()))
.toList();
});
},
controller: _textEditingController,
decoration: InputDecoration(
border: InputBorder.none,
errorBorder: InputBorder.none,
enabledBorder: InputBorder.none,
contentPadding: EdgeInsets.all(0),
hintText: 'Search'),
),
),
),
),
),
),
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xffFEFDFD), Color(0xffBDBDB2)],
begin: Alignment.topLeft,
end: Alignment.bottomRight),
),
child: _textEditingController.text.isNotEmpty &&
glossarListOnSearch.isEmpty
? Column(
children: [
Align(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 50, 0, 0),
child: Text(
'No results',
style: TextStyle(
fontFamily: 'Avenir',
fontSize: 22,
color: Color(0xff848484)),
),
),
)
],
)
: ListView.builder(
itemCount: _textEditingController.text.isNotEmpty
? glossarListOnSearch.length
: glossarList.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
_textEditingController.text.isNotEmpty
? _testFuction(context, glossarListOnSearch[index])
: _testFuction(context, glossarList[index]);
},
child: Padding(
padding: const EdgeInsets.fromLTRB(12, 15, 12, 15),
child: Text(
_textEditingController.text.isNotEmpty
? glossarListOnSearch[index].name!
: glossarList[index].name!,
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontFamily: 'Avenir'),
),
),
);
},
),
),
);
}
}
void _testFuction(context, FruitModel model) {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return Scaffold(
body: Text('${model.facts}'),
);
},
);
}
You can wrap the your Padding with a GestureDetector and add actions into the onTap method.
return GestureDetector(
onTap: () {
// TODO: Add actions onTap
},
child: Padding(
padding: const EdgeInsets.fromLTRB(12, 15, 12, 15),
child: Text(
_textEditingController.text.isNotEmpty
? glossarListOnSearch[index] : glossarList[index],
style: TextStyle(
color: Colors.black, fontSize: 24, fontFamily: 'Avenir'),
),
);
);
You need give your _testFuction some content what depends on you tap to let the bottomsheet know what it should to show.Just likes:
return GestureDetector(
onTap:(){
_testFuction(context,glossarListOnSearch[index]);
}
...
)
void _testFuction(context, someContent) {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return Scaffold(
body: Text('This is $someContent bottomsheet'),
);
},
);
}
Here I have a form like this. i want to change the value of the blue button week below when i swipe left or right of Calendar Week. What should i do guys ?. It can only changed when I clicked on the number
Here is the code I'm using:
import 'package:flutter/material.dart';
import 'package:myhumgupdate/App/Config/palette.dart';
import 'package:myhumgupdate/Widgets/dialog_loading.dart';
import 'package:myhumgupdate/giangvien/Screens/XemTKB/TKBTheoTuan/tkbtuan_viewmodel.dart';
import 'package:myhumgupdate/Widgets/calender_week.dart';
import 'package:myhumgupdate/giangvien/models/meeting.dart';
import 'package:myhumgupdate/giangvien/models/meetingdata_source.dart';
import 'package:stacked/stacked.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';
class TKBTuan extends StatefulWidget {
#override
_TKBTuanState createState() => _TKBTuanState();
}
final String _customTimeLabelText = 'Tiết';
class _TKBTuanState extends State<TKBTuan> {
#override
Widget build(BuildContext context) {
return ViewModelBuilder<TKBTuanViewModel>.reactive(
onModelReady: (model) => Future.delayed(Duration.zero,
() => DialogLoading.show(context, model.getTkbTuan(model.timeNow))),
builder: (context, TKBTuanViewModel model, child) => Column(
children: [
Row(
children: [
Expanded(
child: Container(
margin: EdgeInsets.only(
top: 18,
),
child: CalendarWeek(
calendarController: model.calendarController,
press: (DateTime date, _, __) {
model.getTkbTuan(date);
},
),
),
),
Container(
width: 40,
height: 56,
margin: EdgeInsets.only(right: 3),
padding: EdgeInsets.symmetric(horizontal: 4, vertical: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Palette.kPrimaryColor,
),
child: Center(
child: Text(
"Week ${model.week}",
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
),
],
),
Expanded(
child: SfCalendar(
view: CalendarView.week,
firstDayOfWeek: 1,
maxDate: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day, 00, 45, 0),
minDate: DateTime(DateTime.now().year, DateTime.now().month,
DateTime.now().day, 00, 45, 0),
headerHeight: 0,
viewHeaderHeight: 0,
dataSource: MeetingDataSource(model.getDataSource),
appointmentTimeTextFormat: 'hh:mm:ss a',
appointmentBuilder: appointmentBuilder,
initialDisplayDate: DateTime(DateTime.now().year,
DateTime.now().month, DateTime.now().day, 00, 45, 0),
monthViewSettings: MonthViewSettings(showAgenda: true),
timeSlotViewSettings: TimeSlotViewSettings(
startHour: 0,
endHour: 16,
timeFormat: _customTimeLabelText + " H",
timeIntervalHeight: 70,
timeTextStyle: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
)),
// selectionDecoration: BoxDecoration(
// color: Colors.transparent,
// border: Border.all(color: Colors.red, width: 1),
// borderRadius: const BorderRadius.all(Radius.circular(4)),
// shape: BoxShape.rectangle,
// ),
),
),
],
),
viewModelBuilder: () => TKBTuanViewModel());
}
}
Widget appointmentBuilder(BuildContext context,
CalendarAppointmentDetails calendarAppointmentDetails) {
final Meeting appointment = calendarAppointmentDetails.appointments.first;
return Container(
width: calendarAppointmentDetails.bounds.width,
height: calendarAppointmentDetails.bounds.height,
// color: appointment.background,
decoration: BoxDecoration(
color: appointment.background,
border: Border.all(
color: Colors.grey,
width: 0.5,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(2.0, 0, 0, 5.0),
child: Text(
appointment.eventName,
// textAlign: TextAlign.center,
style: TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(2.0, 0, 0, 0),
child: Text(
"Phòng: ${appointment.subText}",
style: TextStyle(fontSize: 10, fontStyle: FontStyle.italic),
),
)
],
),
);
}
And if there is no way to change the value like that, what should I do and how can I change that?
In the Flutter Event Calendar, you can programmatically select the date using selectedDate property of the CalendarController.
Inside the state, initialize the calendar controller.
final CalendarController _calendarController= CalendarController();
Using onViewChanged callback of the Flutter event calendar, you can set the first date of visible dates as selected date.
child: SfCalendar(
view: CalendarView.month,
controller: _calendarController,
onViewChanged: viewChanged,
),
void viewChanged(ViewChangedDetails viewChangedDetails) {
SchedulerBinding.instance!.addPostFrameCallback((Duration duration) {
_calendarController.selectedDate = viewChangedDetails.visibleDates[0];
});
}
Wrap your Widget in GestureDetector and use onPanUpdate like this:
GestureDetector(onPanUpdate: (details) {
if (details.delta.dx > 0) {
// swiping in right direction
// update week number
}
});