How to access context and setstate outside build method in Flutter - flutter

Question

How to access context and setstate outside build method in Flutter?
To make the app responsive I need context.
I get error "Undefined name 'context'.
Try correcting the name to one that is defined, or defining the name."
When I write context here:-
class Portfolio extends StatefulWidget {
final BuildContext context1;
const Portfolio({
required this.context1,
Key? key,
}) : super(key: key);
#override
State<Portfolio> createState() => _PortfolioState();
}
DragAndDropList buildList(CardsList list) => DragAndDropList(
header: Padding(
padding: EdgeInsets.only(
left: 15.0,
top: 10,
bottom: 10,
right: 15,
),
child: Row(
children: [
Text(
list.header,
style: TextStyle(
color: Color(0xFF100F32),
fontWeight: FontWeight.w700,
fontSize: responsiveWidth(14, context),
),
),
Spacer(),
Icon(
Icons.more_horiz,
color: Color(0xFF364766),
size: 20,
),
],
),
),
children: list.cards
.map(
(item) => DragAndDropItem(
child: Center(
child: Padding(
padding: EdgeInsets.only(top: 8.0),
child: Container(
width: 280,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
),
padding: EdgeInsets.all(10),
child: Text(item.text),
),
),
),
),
)
.toList(),
footer: Padding(
padding: EdgeInsets.only(left: 10.0, bottom: 10),
child: addCard == false
? OPopupTrigger(
triggerWidget: Row(
children: [
Icon(
Icons.add,
color: Color(0xFF80899D),
),
Text(
'Add a card',
style: TextStyle(
color: Color(0xFF80899D),
fontSize: 12,
),
),
],
),
barrierDismissible: true,
popupHeader: SizedBox(),
popupContent: Container(
height: 100,
width: 100,
color: Colors.red,
child: Row(
children: [
Text('Hehehe'),
Spacer(),
GestureDetector(
onTap: () {},
child: Icon(Icons.cancel),
),
],
),
),
)
: Column(
children: [
Container(
width: 280,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
),
padding: EdgeInsets.only(left: 10, top: 10, bottom: 25),
child: TextField(
onChanged: (newText) {
list.textField = newText;
},
maxLines: null,
decoration: InputDecoration(
isDense: true,
contentPadding: EdgeInsets.zero,
hintText: 'Enter a title for this card...',
hintStyle: TextStyle(
color: Color(0xFF838EA0),
fontSize: 12,
),
labelStyle: TextStyle(
color: Color(0xFF838EA0),
fontSize: 12,
),
border: OutlineInputBorder(
borderSide: BorderSide.none,
),
),
style: TextStyle(
color: Color(0xFF838EA0),
fontSize: 12,
),
),
),
SizedBox(
height: 20,
),
Row(
children: [
GestureDetector(
onTap: () {
list.cards.add(
Cards(text: list.textField, position: 1),
);
print(list.textField);
},
child: Container(
decoration: BoxDecoration(
color: Color(0xFF026AA7),
borderRadius: BorderRadius.circular(5),
),
height: 30,
width: 80,
child: Center(
child: Text(
'Add card',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w500,
),
),
),
),
),
GestureDetector(
onTap: () {
addCard = false;
},
child: Icon(
Icons.close,
color: Color(0xFF80899D),
size: 24,
),
),
],
),
],
),
),
);
class _PortfolioState extends State<Portfolio> {
#override
void initState() {
// TODO: implement initState
lists = widgets.map(buildList).toList();
}
late List<DragAndDropList> lists;
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Stack(
Full code file:-
import 'package:expandable_reorderable_list/expandable_reorderable_list.dart';
import 'package:flutter/material.dart';
import 'package:o_popup/o_popup.dart';
import 'package:project_submission/responsive.dart';
import 'drag_and_drop_list.dart';
void main() {
runApp(const MyApp());
}
class CardsList {
final String header;
final List<Cards> cards;
String textField;
CardsList({
required this.header,
required this.cards,
this.textField = '',
});
}
class Cards {
final String text;
final int position;
const Cards({
required this.text,
required this.position,
});
}
List<CardsList> widgets = [
CardsList(
header: 'To-do',
textField: '',
cards: [
Cards(
text:
'Trello Tip: Card labels! What do they mean? (Click for more info)',
position: 1),
Cards(text: 'Project "Teamwork Dream Work" Launch Timeline', position: 2),
Cards(text: 'Stakeholders', position: 3),
],
),
CardsList(
header: 'header2',
textField: '',
cards: [
Cards(
text:
'Trello Tip: Card labels! What do they mean? (Click for more info)',
position: 1),
Cards(text: 'Project "Teamwork Dream Work" Launch Timeline', position: 2),
Cards(text: 'Stakeholders', position: 3),
],
),
CardsList(
header: 'header3',
textField: '',
cards: [
Cards(
text:
'Trello Tip: Card labels! What do they mean? (Click for more info)',
position: 1),
Cards(text: 'Project "Teamwork Dream Work" Launch Timeline', position: 2),
Cards(text: 'Stakeholders', position: 3),
],
),
CardsList(
header: 'header4',
textField: '',
cards: [
Cards(text: 'Hello1', position: 1),
Cards(text: 'Hello2', position: 2),
Cards(text: 'Hello3', position: 3),
],
),
];
bool addCard = false;
bool greyArea = false;
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: Wait());
}
}
class Wait extends StatefulWidget {
const Wait({Key? key}) : super(key: key);
#override
State<Wait> createState() => _WaitState();
}
class _WaitState extends State<Wait> {
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Portfolio(
context1: context,
)));
},
child: Text('Wait'),
);
}
}
class Portfolio extends StatefulWidget {
final BuildContext context1;
const Portfolio({
required this.context1,
Key? key,
}) : super(key: key);
#override
State<Portfolio> createState() => _PortfolioState();
}
DragAndDropList buildList(CardsList list) => DragAndDropList(
header: Padding(
padding: EdgeInsets.only(
left: 15.0,
top: 10,
bottom: 10,
right: 15,
),
child: Row(
children: [
Text(
list.header,
style: TextStyle(
color: Color(0xFF100F32),
fontWeight: FontWeight.w700,
fontSize: responsiveWidth(14, context),
),
),
Spacer(),
Icon(
Icons.more_horiz,
color: Color(0xFF364766),
size: 20,
),
],
),
),
children: list.cards
.map(
(item) => DragAndDropItem(
child: Center(
child: Padding(
padding: EdgeInsets.only(top: 8.0),
child: Container(
width: 280,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
),
padding: EdgeInsets.all(10),
child: Text(item.text),
),
),
),
),
)
.toList(),
footer: Padding(
padding: EdgeInsets.only(left: 10.0, bottom: 10),
child: addCard == false
? OPopupTrigger(
triggerWidget: Row(
children: [
Icon(
Icons.add,
color: Color(0xFF80899D),
),
Text(
'Add a card',
style: TextStyle(
color: Color(0xFF80899D),
fontSize: 12,
),
),
],
),
barrierDismissible: true,
popupHeader: SizedBox(),
popupContent: Container(
height: 100,
width: 100,
color: Colors.red,
child: Row(
children: [
Text('Hehehe'),
Spacer(),
GestureDetector(
onTap: () {},
child: Icon(Icons.cancel),
),
],
),
),
)
: Column(
children: [
Container(
width: 280,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
),
padding: EdgeInsets.only(left: 10, top: 10, bottom: 25),
child: TextField(
onChanged: (newText) {
list.textField = newText;
},
maxLines: null,
decoration: InputDecoration(
isDense: true,
contentPadding: EdgeInsets.zero,
hintText: 'Enter a title for this card...',
hintStyle: TextStyle(
color: Color(0xFF838EA0),
fontSize: 12,
),
labelStyle: TextStyle(
color: Color(0xFF838EA0),
fontSize: 12,
),
border: OutlineInputBorder(
borderSide: BorderSide.none,
),
),
style: TextStyle(
color: Color(0xFF838EA0),
fontSize: 12,
),
),
),
SizedBox(
height: 20,
),
Row(
children: [
GestureDetector(
onTap: () {
list.cards.add(
Cards(text: list.textField, position: 1),
);
print(list.textField);
},
child: Container(
decoration: BoxDecoration(
color: Color(0xFF026AA7),
borderRadius: BorderRadius.circular(5),
),
height: 30,
width: 80,
child: Center(
child: Text(
'Add card',
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w500,
),
),
),
),
),
GestureDetector(
onTap: () {
addCard = false;
},
child: Icon(
Icons.close,
color: Color(0xFF80899D),
size: 24,
),
),
],
),
],
),
),
);
class _PortfolioState extends State<Portfolio> {
#override
void initState() {
// TODO: implement initState
lists = widgets.map(buildList).toList();
}
late List<DragAndDropList> lists;
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Stack(
children: [
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFF2B1B81),
Color(0xFFDD499D),
],
),
),
),
Text(
'Project Management',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: 20,
),
),
Padding(
padding: EdgeInsets.only(
left: 10,
top: 30,
),
child: DragAndDropLists(
listWidth: 300,
axis: Axis.horizontal,
listPadding: EdgeInsets.only(right: 10),
itemDragOnLongPress: false,
children: lists,
onItemReorder: onItemReorder,
onListReorder: onListReorder,
),
),
// Row(
// children: [
// DragTarget(
// onAccept: (data) {
// setState(() {
// widgets.add(data);
// widgets.remove(data);
// });
// },
// onWillAccept: (data) {
// setState(() {
// greyArea = true;
// });
// return true;
// },
// onLeave: (data) {
// setState(() {
// greyArea = false;
// widgets
// .sort((a, b) => a['position'].compareTo(b['price']));
// });
// },
// builder: (context, _, __) => SizedBox(
// height: MediaQuery.of(context).size.height,
// child: Column(
// children: [
// Padding(
// padding: EdgeInsets.only(left: 30.0, top: 30),
// child: Container(
// width: 300,
// decoration: BoxDecoration(
// color: Color(0xFFEBECF0),
// borderRadius: BorderRadius.circular(6),
// ),
// child: Column(
// children: [
// Text(
// 'Project Resources',
// style: TextStyle(
// color: Color(0xFF5D6C83),
// fontWeight: FontWeight.w600,
// fontSize: 12),
// ),
// for (var wid in widgets)
// Column(
// children: [
// Padding(
// padding: EdgeInsets.all(8.0),
// child: Draggable(
// child: Container(
// decoration: BoxDecoration(
// color: Colors.green,
// ),
// child: Text(wid['text']),
// height: 100,
// width: 100,
// ),
// data: wid,
// feedback: Container(
// color: Colors.red,
// height: 100,
// width: 100,
// ),
// childWhenDragging: SizedBox(),
// ),
// ),
// DragTarget(
// onAccept: (data) {
// setState(() {
// widgets.add({
// 'text': data['text'],
// 'position': 1
// });
// widgets.remove({
// 'text': data['text'],
// 'position': data['position']
// });
// });
// },
// onWillAccept: (data) {
// setState(() {
// greyArea = true;
// });
// return true;
// },
// onLeave: (data) {
// setState(() {
// greyArea = false;
// });
// },
// builder: (context, _, __) {
// print(_);
// return SizedBox();
// },
// ),
// ],
// ),
// greyArea == true
// ? Container(
// color: Colors.grey,
// height: 20,
// width: 100,
// )
// : SizedBox(),
// SizedBox(
// height: 8,
// ),
// ],
// ),
// ),
// ),
// ],
// ),
// ),
// ),
// ],
// ),
],
),
),
);
}
void onItemReorder(
int oldItemIndex,
int oldListIndex,
int newItemIndex,
int newListIndex,
) {
setState(() {
final oldListItems = lists[oldListIndex].children;
final newListItems = lists[newListIndex].children;
final movedItem = oldListItems.removeAt(oldItemIndex);
newListItems.insert(newItemIndex, movedItem);
});
print(lists);
}
void onListReorder(
int oldListIndex,
int newListIndex,
) {
setState(() {
final movedList = lists.removeAt(oldListIndex);
lists.insert(newListIndex, movedList);
});
}
}