Develop Reference

Flutter RawKeyboardListener Text Field Focus control

I am developing an android TV application using flutter. The remote control key which user is pressing, can be detected by RawKeyboardListener. But the focus is having an issue. Initially the focus will be in username field, then once editing complete it will move to password field, and then to the button. So OnTap mehthod will be triggered. After that the focus is only going to username button for up arrow key. No response for down arrow key. Also if the data entered again, even if the button is having focus, I am not able to enter it(onTap function is not working). Any idea??
import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/foundation.dart';
import 'package:google_fonts/google_fonts.dart';
class WelcomePage extends StatefulWidget {
#override
_WelcomePageState createState() => _WelcomePageState();
}
class _WelcomePageState extends State<WelcomePage> {
TextEditingController nameController = TextEditingController();
TextEditingController passwordController = TextEditingController();
var usermame, password = '';
late FocusNode _fs = FocusNode();
FocusNode? userNameFocusNode;
FocusNode? passwordFocusNode;
FocusNode? buttonFocusNode;
#override
void initState() {
super.initState();
_fs = FocusNode();
userNameFocusNode = FocusNode();
passwordFocusNode = FocusNode();
buttonFocusNode = FocusNode();
setFirstFocus();
}
setFirstFocus() {
if (userNameFocusNode == null) {
userNameFocusNode = FocusNode();
passwordFocusNode = FocusNode();
buttonFocusNode = FocusNode();
FocusScope.of(context).requestFocus(userNameFocusNode);
}
changeFocus(BuildContext context, FocusNode node) {
FocusScope.of(context).requestFocus(node);
}
}
#override
void dispose() {
super.dispose();
_fs.dispose();
userNameFocusNode?.dispose();
passwordFocusNode?.dispose();
buttonFocusNode?.dispose();
}
Widget _title() {
return RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: 'Login Page',
style: GoogleFonts.portLligatSans(
textStyle: Theme.of(context).textTheme.headline4,
fontSize: 50,
fontWeight: FontWeight.w700,
color: Colors.red,
),
);
}
Widget _usernameController() {
return Container(
width: MediaQuery.of(context).size.width / 2.5,
padding: const EdgeInsets.symmetric(vertical: 13),
alignment: Alignment.center,
child: TextFormField(
textInputAction: TextInputAction.done,
onEditingComplete: () {
userNameFocusNode!.unfocus();
FocusScope.of(context).requestFocus(passwordFocusNode);
},
textAlign: TextAlign.left,
focusNode: userNameFocusNode,
autofocus: true,
controller: nameController,
style:
const TextStyle(fontSize: 22.0, height: 1, color: Colors.white),
decoration: InputDecoration(
isDense: true,
prefixIcon: const Padding(
padding: EdgeInsets.only(left: 0),
child: Icon(
Icons.person,
size: 30,
color: Colors.white,
),
),
fillColor: Colors.white,
border: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.white, width: 5.00),
borderRadius: BorderRadius.circular(20.0),
),
labelText: ' Username',
labelStyle: const TextStyle(color: Colors.white, fontSize: 20),
)));
}
Widget _passwordController() {
return Container(
width: MediaQuery.of(context).size.width / 2.5,
padding: const EdgeInsets.symmetric(vertical: 13),
alignment: Alignment.center,
child: TextFormField(
textInputAction: TextInputAction.done,
onEditingComplete: () {
passwordFocusNode!.unfocus();
FocusScope.of(context).requestFocus(buttonFocusNode);
},
focusNode: passwordFocusNode,
obscureText: true,
textAlign: TextAlign.left,
autofocus: true,
controller: passwordController,
style:
const TextStyle(fontSize: 22.0, height: 1, color: Colors.white),
decoration: InputDecoration(
isDense: true,
prefixIcon: const Padding(
padding: EdgeInsets.only(left: 0),
child: Icon(
Icons.https,
size: 25,
color: Colors.white,
),
),
fillColor: Colors.white,
border: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.white, width: 5.00),
borderRadius: BorderRadius.circular(20.0),
),
labelText: ' Password',
labelStyle: const TextStyle(color: Colors.white, fontSize: 20),
)));
}
Widget _submitButton() {
return InkWell(
focusNode: buttonFocusNode,
onTap: () {
print('${nameController.text} + ${passwordController.text}');
},
child: Container(
width: MediaQuery.of(context).size.width / 2.5,
padding: const EdgeInsets.symmetric(vertical: 5),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(10)),
boxShadow: <BoxShadow>[
BoxShadow(
color: const Color(0xffdf8e33).withAlpha(100),
offset: const Offset(2, 4),
blurRadius: 8,
spreadRadius: 2)
],
color: Colors.white),
child: const Text(
'Login',
style: TextStyle(fontSize: 20, color: Colors.red),
),
),
);
}
void snackBardata(context, String actionMsg, var duration, Color snColour,
Color snDataColor) {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text(
actionMsg,
style: TextStyle(
color: snDataColor,
fontSize: 20,
),
textAlign: TextAlign.center,
),
duration: Duration(seconds: 2),
backgroundColor: snColour,
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
));
}
void _handleKeyPressed(context, event) {
if (event is RawKeyDownEvent) {
switch (event.data.logicalKey.keyLabel.toString()) {
case 'Select':
{
_fs.unfocus();
print('select key pressed');
FocusScope.of(context).requestFocus(buttonFocusNode);
}
break;
case 'Arrow Down':
{
print('arrow down');
FocusScope.of(context).requestFocus(userNameFocusNode);
}
break;
case 'Arrow Left':
{}
break;
case 'Arrow Up':
{
print('arrow up');
FocusScope.of(context).requestFocus(passwordFocusNode);
}
break;
case 'Arrow Right':
{}
break;
default:
{
print('unknown--------------------------------');
}
break;
}
}
}
#override
Widget build(BuildContext context) {
return Shortcuts(
shortcuts: {
LogicalKeySet(LogicalKeyboardKey.select): const ActivateIntent(),
},
child: Scaffold(
body: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 20),
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
image: DecorationImage(
image: const AssetImage('assets/asset1.jpg'),
fit: BoxFit.fill,
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.6), BlendMode.hardLight),
),
borderRadius: const BorderRadius.all(Radius.circular(0)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.shade200,
offset: const Offset(2, 4),
blurRadius: 5,
spreadRadius: 2)
],
gradient: const LinearGradient(
begin: Alignment.topCenter, end: Alignment.bottomCenter,
// colors: [Colors.yellow, Colors.teal])),
colors: [Color(0xfffbb448), Color(0xffe46b10)])),
child: RawKeyboardListener(
focusNode: _fs,
onKey: (event) {
_handleKeyPressed(context, event);
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_title(),
const SizedBox(
height: 20,
),
_usernameController(),
_passwordController(),
const SizedBox(
height: 20,
),
_submitButton(),
const SizedBox(
height: 20,
),
],
),
),
),
),
));
}
}

The parameter 'size' can't have a value of 'null' because of its type in Dart

I am new to flutter and dart , I have a problem where the parameter size cant have null value. I tried to search in the google the same problem that people had been facing and the solution is to add 'required'. i had tried that but the problem is in my body
Below here is my CustomCard().
import 'package:flutter/material.dart';
import '../../constants.dart';
class CustomCard extends StatefulWidget {
final Size size;
final Icon icon;
final String title, statusOn, statusOff;
const CustomCard(
{ required Key key,
required this.size,
required this.icon,
required this.title,
required this.statusOn,
required this.statusOff})
: super(key: key);
#override
_CustomCardState createState() => _CustomCardState();
}
class _CustomCardState extends State<CustomCard>
with SingleTickerProviderStateMixin {
late AnimationController _animationController;
late Animation<Alignment> _animation;
bool isChecked = true;
void initState() {
_animationController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 350),
);
_animation = Tween<Alignment>(
begin: Alignment.bottomCenter, end: Alignment.topCenter)
.animate(
CurvedAnimation(
parent: _animationController,
curve: Curves.linear,
reverseCurve: Curves.easeInBack,
),
);
super.initState();
}
#override
Widget build(BuildContext context) {
return Container(
height: 140,
width: widget.size.width * 0.35,
decoration: BoxDecoration(
color: kBgColor,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 8,
offset: Offset(3, 3),
),
BoxShadow(
color: Colors.white,
blurRadius: 8,
offset: Offset(-3, -3),
),
],
),
child: Padding(
padding: EdgeInsets.all(15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
widget.icon,
AnimatedBuilder(
animation: _animationController,
builder: (animation, child) {
return GestureDetector(
onTap: () {
setState(() {
if (_animationController.isCompleted) {
_animationController.animateTo(20);
} else {
_animationController.animateTo(0);
}
isChecked = !isChecked;
});
},
child: Container(
height: 40,
width: 25,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey.shade50,
boxShadow: [
BoxShadow(
color: Colors.grey.shade200,
blurRadius: 0,
offset: Offset(3, 3),
),
BoxShadow(
color: Colors.black12,
blurRadius: 5,
offset: Offset(-3, -3),
),
],
),
child: Align(
alignment: _animation.value,
child: Container(
height: 15,
width: 15,
margin: EdgeInsets.symmetric(
vertical: 2, horizontal: 1),
decoration: BoxDecoration(
color: isChecked
? Colors.grey.shade300
: kGreenColor,
shape: BoxShape.circle,
),
),
),
),
);
},
),
],
),
SizedBox(height: 10),
Text(
widget.title,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: kBlueColor,
),
),
Text(
isChecked ? widget.statusOff : widget.statusOn,
style: TextStyle(
fontWeight: FontWeight.bold,
color: kGreenColor,
),
),
],
)),
);
}
}
And below here is my Body.dart
import 'package:flutter/material.dart';
import 'package:neew/constants.dart';
import 'package:neew/MainScreen/custom_card.dart';
class MainScreenBody extends StatefulWidget {
#override
_MainScreenBodyState createState() => _MainScreenBodyState();
}
class _MainScreenBodyState extends State<MainScreenBody> {
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Padding(
padding: EdgeInsets.all(8.0),
child: Column(
children: [
SizedBox(height: size.height * 0.1),
Center(
child: Text(
"My Home",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 25,
),
),
),
SizedBox(height: size.height * 0.05),
CustomCard(
size: size,
icon: Icon(
Icons.home_outlined,
size: 55,
color: Colors.grey.shade400,
),
title: 'Entry',
statusOn: 'OPEN',
statusOff: 'LOCKED',
)
],
),
);
}
}
The error that i detect in body dart is in CustomCard().
Please help me, I will really appreciate it.

how can make this two circular containers selectable?

I am new to flutter
and a lot of things I'm ignorant about
my problem is how can i make these two circular containers looks selectable, which is means when click on (eg: Teacher) and press GO!, its functionally work and navigate to another screen but the problem it's doesn't shows that the container is selected!
and the another problem is when the user click on how they are
i want the color of the go button changes from light purple to dark purple !
although i have tried SelectableContainer but it didn't work as i want
this is how i want it !
this is how i want it
and this is how i apply it :
this is how i apply it
and this is my code !!!
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:blackboard/setting/colors.dart';
import 'package:blackboard/view/welcome1.dart';
import 'package:blackboard/setting/tapbar.dart';
class AreYou1 extends StatefulWidget {
const AreYou1({Key? key}) : super(key: key);
#override
_AreYou1State createState() => _AreYou1State();
}
class _AreYou1State extends State<AreYou1> {
int select = 0;
bool _select1 = false;
bool _select2 = false;
#override
void initState() {
// TODO: implement initState
super.initState();
select = 0;
}
#override
Widget build(BuildContext context) {
//Teacher Button
final TeacherButton = Material(
color: Colors.transparent,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: BBColors.circle4,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black54.withOpacity(0.3),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: MaterialButton(
minWidth: MediaQuery.of(context).size.width / 1.3,
onPressed: () {
setState(() {
select = 0;
});
},
child: Image.asset(
"assets/images/teacher.png",
fit: BoxFit.cover,
),
)),
);
//Student Button
final StudentButton = Material(
color: Colors.transparent,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: BBColors.circle4,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black54.withOpacity(0.3),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: MaterialButton(
padding: EdgeInsets.fromLTRB(20, 15, 20, 15),
minWidth: MediaQuery.of(context).size.width / 1.3,
onPressed: () {
setState(() {
select = 1;
});
},
child: Image.asset(
"assets/images/student.png",
fit: BoxFit.cover,
),
)));
return Scaffold(
backgroundColor: BBColors.bg4,
body: Stack(
alignment: Alignment.center,
fit: StackFit.expand,
overflow: Overflow.clip,
children: [
Positioned(
right: -160,
top: -160,
child: Container(
width: 400,
height: 400,
decoration: BoxDecoration(
color: Colors.transparent,
shape: BoxShape.circle,
border: Border.all(
color: BBColors.primary3,
),
),
)),
Positioned(
right: 20,
top: 30,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: BBColors.circle5,
),
)),
Positioned(
left: -160,
bottom: -160,
child: Container(
width: 400,
height: 400,
decoration: BoxDecoration(
color: Colors.transparent,
shape: BoxShape.circle,
border: Border.all(
color: BBColors.primary3,
),
),
)),
Positioned(
left: 20,
bottom: 30,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: BBColors.circle5,
),
)),
Positioned(
left: 120,
top: 250,
child: Text(
"Are You ? ",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 50,
color: Colors.black,
fontFamily: 'Ruda',
fontWeight: FontWeight.bold),
)),
Positioned(
top: 350,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
TeacherButton,
SizedBox(
width: 40,
),
StudentButton,
]),
),
Positioned(
top: 605,
left: 120,
child: Card(
color: Colors.white24,
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(60),
),
child: Container(
decoration: BoxDecoration(
color: BBColors.primary5,
borderRadius: BorderRadius.all(Radius.circular(60)),
),
child: MaterialButton(
padding: EdgeInsets.fromLTRB(20, 15, 20, 15),
minWidth: MediaQuery.of(context).size.width / 2.3,
onPressed: () {
if (select == 0) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Welcome1()));
} else {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TapBar()));
}
},
child: Text(
"GO !",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40,
color: BBColors.font1,
fontFamily: 'Ruda',
fontWeight: FontWeight.bold),
),
)))),
]));
}
}

You can check below code I create new TeacherButton and StudentButton like you want.
bool isSelectTeacher = false;
New TeacherButton:
final TeacherButton = Material(
color: Colors.transparent,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: Colors.pink.shade400,
shape: BoxShape.circle,
border: Border.all(
width: isSelectTeacher ? 8 : 0,
color: Colors.purple,
),
boxShadow: [
BoxShadow(
color: Colors.black54.withOpacity(0.3),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: Stack(
children: [
MaterialButton(
minWidth: MediaQuery.of(context).size.width / 1.3,
onPressed: () {
setState(() {
isSelectTeacher = true;
});
},
child: Container(),
),
Container(
alignment: Alignment.bottomRight,
child: Icon(Icons.verified, size: (isSelectTeacher ? 30 : 0)),
),
],
),
),
);
New StudentButton:
final StudentButton = Material(
color: Colors.transparent,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: Colors.pink.shade400,
shape: BoxShape.circle,
border: Border.all(
width: isSelectTeacher ? 0 : 8,
color: Colors.purple,
),
boxShadow: [
BoxShadow(
color: Colors.black54.withOpacity(0.3),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: Stack(
children: [
MaterialButton(
padding: EdgeInsets.fromLTRB(20, 15, 20, 15),
minWidth: MediaQuery.of(context).size.width / 1.3,
onPressed: () {
setState(() {
isSelectTeacher = false;
});
},
child: Container(),
),
Container(
alignment: Alignment.bottomRight,
child: Icon(Icons.verified, size: (isSelectTeacher ? 0 : 30)),
),
],
),
),
);

Is it possible to implement widgets using list in flutter?

I am creating a Journal mobile application which would work as a medium to view magazines and daily news updates. This is my first flutter project and I am totally new to flutter. So kindly excuse me if I had said something wrong about something or didnt provide enough information.
I used a code from github for the main page of my application and made few changes to accommodate my needs. Now in my code, the home page consists of a side menu bar and this bar consists of 4 buttons, namely Home, My Profile, Premium and FAQ. The GlobalKeys for the side menu bar is called using a list by the name _keys which is of the type GlobalKey. I tried changing the data type of the list _keys to Widget and then called the corresponding Widgets of the classes. But then two errors popped out.
The getter 'currentContext' isn't defined for the class 'Widget'.
The argument type 'Widget' can't be assigned to the parameter type 'GlobalKey<State>'.
Now I would like the list _keys to be of the type Widget in order for me to call upon it's corresponding widgets of Home, My Profile, Premium and FAQ from each of it's classes in order for me to view the corresponding pages. Or if it is not possible, I would love to know an alternative for it to start working.
Following is the code of my application.
import 'dart:math' as math;
import 'package:flutter/scheduler.dart';
import 'package:google_signin_example/google%20sign%20in/logged_in_widget.dart';
import 'package:google_signin_example/main app/lib/ui_3/TravelBean.dart';
import 'package:google_signin_example/main app/lib/ui_3/magazine/screens/home_screen.dart';
import 'package:google_signin_example/main%20app/lib/ui_3/FAQ/faq.dart';
import 'package:google_signin_example/main%20app/lib/ui_3/Newspaper%20and%20Kiddos/lib_kiddos/main.dart';
import 'package:google_signin_example/main%20app/lib/ui_3/Newspaper%20and%20Kiddos/lib_news/main.dart';
import 'package:google_signin_example/main%20app/lib/ui_3/premium/premium.dart';
import 'package:google_signin_example/widget/sign_up_widget.dart';
import 'detail_page.dart';
class HomePage1 extends StatefulWidget {
#override
_HomePage1State createState() => _HomePage1State();
}
class _HomePage1State extends State<HomePage1> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Container(
child: Row(
children: <Widget>[
LeftWidget(),
Expanded(
child: RightWidget(),
)
],
),
),
);
}
}
class LeftWidget extends StatefulWidget {
#override
_LeftWidgetState createState() => _LeftWidgetState();
}
class _LeftWidgetState extends State<LeftWidget> with TickerProviderStateMixin {
List<String> _list = ["Home", "My profile", "Premium", "FAQ"];
List <Widget> _keys = [
HomePage1(), //These are the widgets from different classes.
LoggedInWidget(),
premium(),
faq(),
/*GlobalKey(), //This was available before I made the changes.
GlobalKey(),
GlobalKey(),
GlobalKey()*/
];
int checkIndex = 0;
Offset checkedPositionOffset = Offset(0, 0);
Offset lastCheckOffset = Offset(0, 0);
Offset animationOffset = Offset(0, 0);
Animation _animation;
AnimationController _animationController;
#override
void initState() {
checkIndex = _list.length - 1;
super.initState();
SchedulerBinding.instance.endOfFrame.then((value) {
calcuteCheckOffset();
addAnimation();
});
}
void calcuteCheckOffset() {
lastCheckOffset = checkedPositionOffset;
RenderBox renderBox = _keys[checkIndex].currentContext.findRenderObject(); //This is where the first error occurs.
Offset widgetOffset = renderBox.localToGlobal(Offset(0, 0));
Size widgetSise = renderBox.size;
checkedPositionOffset = Offset(widgetOffset.dx + widgetSise.width,
widgetOffset.dy + widgetSise.height);
}
#override
Widget build(BuildContext context) {
return Container(
child: Stack(
children: <Widget>[
Container(
width: 50,
decoration: BoxDecoration(
color: Color(0xff000000),
borderRadius: BorderRadius.circular(30),
),
child: Column(
children: _buildList(),
),
),
Positioned(
top: animationOffset.dy,
left: animationOffset.dx,
child: CustomPaint(
painter: CheckPointPainter(Offset(10, 0)),
),
)
],
),
);
}
List<Widget> _buildList() {
List<Widget> _widget_list = [];
_widget_list.add(Padding(
padding: EdgeInsets.only(
top: 50,
),
child: Icon(
Icons.settings,
color: Colors.white,
size: 30,
),
));
for (int i = 0; i < _list.length; i++) {
_widget_list.add(Expanded(
child: GestureDetector(
onTap: () {
indexChecked(i);
},
child: VerticalText(
_list[i],
_keys[i], //This is where the second error occurs.
checkIndex == i &&
(_animationController != null &&
_animationController.isCompleted))),
));
}
_widget_list.add(Padding(
padding: EdgeInsets.only(
top: 50,
bottom: 50,
),
child: Image(image: AssetImage('assets/images/Voix.png')),
));
return _widget_list;
}
void indexChecked(int i) {
if (checkIndex == i) return;
setState(() {
checkIndex = i;
calcuteCheckOffset();
addAnimation();
});
}
void addAnimation() {
_animationController =
AnimationController(duration: Duration(milliseconds: 300), vsync: this)
..addListener(() {
setState(() {
animationOffset =
Offset(checkedPositionOffset.dx, _animation.value);
});
});
_animation = Tween(begin: lastCheckOffset.dy, end: checkedPositionOffset.dy)
.animate(CurvedAnimation(
parent: _animationController, curve: Curves.easeInOutBack));
_animationController.forward();
}
}
class CheckPointPainter extends CustomPainter {
double pointRadius = 5;
double radius = 30;
Offset offset;
CheckPointPainter(this.offset);
#override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()..style = PaintingStyle.fill;
double startAngle = -math.pi / 2;
double sweepAngle = math.pi;
paint.color = Color(0xff000000);
canvas.drawArc(
Rect.fromCircle(center: Offset(offset.dx, offset.dy), radius: radius),
startAngle,
sweepAngle,
false,
paint);
paint.color = Color(0xffffffff);
canvas.drawCircle(
Offset(offset.dx - pointRadius / 2, offset.dy - pointRadius / 2),
pointRadius,
paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
class VerticalText extends StatelessWidget {
String name;
bool checked;
GlobalKey globalKey;
VerticalText(this.name, this.globalKey, this.checked);
#override
Widget build(BuildContext context) {
return RotatedBox(
key: globalKey,
quarterTurns: 3,
child: Text(
name,
style: TextStyle(
color: checked ? Color(0xffffffff) : Colors.grey,
fontSize: 16,
),
),
);
}
}
class RightWidget extends StatefulWidget {
#override
_RightWidgetState createState() => _RightWidgetState();
}
class _RightWidgetState extends State<RightWidget>
with TickerProviderStateMixin {
TabController _tabController;
#override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: 5);
}
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(
left: 15,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 50, left: 20),
child: Text(
"Voix Home",
style: TextStyle(
color: Colors.black,
fontSize: 25,
),
),
),
Padding(
padding: const EdgeInsets.only(top: 15, left: 10),
child: SizedBox(
height: 30,
child: TabBar(
isScrollable: true,
unselectedLabelColor: Colors.black,
labelColor: Color(0xffffffff),
controller: _tabController,
indicator: BoxDecoration(
color: Color(0xff9e9e9e),
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
bottomLeft: Radius.circular(20),
),
),
tabs: <Widget>[
Tab(
text: "Flash",
),
Tab(
text: "Magazine",
),
Tab(
text: "Newspaper",
),
Tab(
text: "Kiddos",
),
Tab(
text: "Editorial",
),
],
),
),
),
Expanded(
child: TabBarView(
controller: _tabController,
children: <Widget>[
TravelWidget(),
HomeScreen(),
News(),
Kiddos(),
RightBody(),
// RightBody(),
],
),
)
],
),
);
}
}
class RightBody extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(
left: 15,
),
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(
top: 20,
),
child: Text(
"Flash!",
style: TextStyle(
color: Colors.black,
fontSize: 20,
),
),
),
Expanded(
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 220,
margin: EdgeInsets.symmetric(
horizontal: 10,
vertical: 10,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
image: new DecorationImage(
image: new AssetImage('assets/images/bottom1.jpg'),
fit: BoxFit.cover,
),
boxShadow: [
BoxShadow(
spreadRadius: 5,
blurRadius: 5,
offset: Offset(1, 2),
color: Color(0x33757575),
),
],
),
),
Container(
width: 220,
margin: EdgeInsets.symmetric(
horizontal: 10,
vertical: 10,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
spreadRadius: 5,
blurRadius: 5,
offset: Offset(1, 2),
color: Color(0x33757575),
),
],
),
),
],
),
),
],
),
);
}
}
class TravelWidget extends StatelessWidget {
List<TravelBean> _list = TravelBean.generateTravelBean();
#override
Widget build(BuildContext context) {
return PageView.builder(
controller: PageController(viewportFraction: 0.9),
itemBuilder: (context, index) {
var bean = _list[index];
return GestureDetector(
onTap: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) {
return DetailPage(bean);
}));
},
child: Hero(
tag: bean.url,
child: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 30, right: 10),
child: ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Image.asset(
bean.url,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
),
),
Positioned(
bottom: 80,
left: 15,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Material(
color: Colors.transparent,
child: Text(
bean.location,
style: TextStyle(
color: Colors.black54,
fontSize: 15,
),
),
),
Material(
color: Colors.transparent,
child: Text(
bean.name,
style: TextStyle(
color: Colors.black,
fontSize: 20,
),
),
),
],
),
),
Positioned(
bottom: 0,
right: 30,
child: Container(
width: 60,
height: 60,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(30),
),
child: Icon(
Icons.arrow_forward,
color: Colors.white,
size: 30,
),
),
)
],
),
),
);
},
itemCount: _list.length,
);
}
}
At the beginning, when I leave the list _keys to be of the type GlobalKey and don't comment out the following 4 GlobalKeys I get the output but the side menu bar won't work.
This is my application with GlobalKeys in place of those Widgets
I want those corresponding pages to display when clicked on. But that render object just switches between the options and the same page is displayed.
So kindly help me out.
PS : As said earlier I'm new to flutter, so kindly don't mistake me if I had something wrong.

I suggest you check about flutter state management, especially Mobx with Provider, it will be kind easier for you.

Flutter: Using Listview.builder for ImagePicker

Please, I am new to flutter. (I want To simplify the first code using the Listview.builder) i am trying to implement a Listview.builder for an image picker. I am using a youtube tutorial. Please, how do i map the 'File' class to the images. I have tried using ...Map<String, File>... but that does not work. I have posted the code below. Here is what i want to Simplify:
import 'package:image_picker/image_picker.dart';
import 'dart:io';
class ImageGallery extends StatefulWidget {
#override
_ImageGalleryState createState() => _ImageGalleryState();
}
class _ImageGalleryState extends State<ImageGallery> {
File _image1;
File _image2;
File _image3;
File _image4;
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(10),
height: MediaQuery.of(context).size.height / 5,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
width: MediaQuery.of(context).size.width / 8,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.orange),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5)),
boxShadow: [
BoxShadow(
offset: Offset(0, 15),
blurRadius: 27,
color: Colors.black12, // Black color with 12% opacity
)]),
child: Center(child: Text('Images')),
),
),
Expanded(
flex: 5,
child: Container(
decoration: BoxDecoration(
// color: Colors.white,
border: Border.all(color: Colors.orange),
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10)),
boxShadow: [BoxShadow(
offset: Offset(0, 15),
blurRadius: 27,
color: Colors.black12, // Black color with 12% opacity
)]),
child: Row(
children: <Widget>[
OutlineButton(
onPressed: () {
_selectImage(
ImagePicker.pickImage(source:ImageSource.gallery ), 1
);
},
color: Colors.white,
borderSide: BorderSide(
color: Colors.orange.withOpacity(0.1),
width: 2.5,
),
child: _displayChild1()
),
OutlineButton(
onPressed: () {
_selectImage(
ImagePicker.pickImage(source:ImageSource.gallery ), 2
);
},
color: Colors.white,
borderSide: BorderSide(
color: Colors.orange.withOpacity(0.1),
width: 2.5,
),
child: _displayChild2()
),
OutlineButton(
onPressed: () {
_selectImage(
ImagePicker.pickImage(source:ImageSource.gallery ), 3
);
},
color: Colors.white,
borderSide: BorderSide(
color: Colors.orange.withOpacity(0.1),
width: 2.5,
),
child: _displayChild3()
),
OutlineButton(
onPressed: () {
_selectImage(
ImagePicker.pickImage(source:ImageSource.gallery ), 4
);
},
color: Colors.white,
borderSide: BorderSide(
color: Colors.orange.withOpacity(0.1),
width: 2.5,
),
child: _displayChild4()
),
],
),
),
),
],
),
);
}
void _selectImage(Future<File> pickImage, int imageNumber) async {
File tempImg = await pickImage;
switch (imageNumber) {
case 1:
setState(() => _image1 = tempImg);
break;
case 2:
setState(() => _image2 = tempImg);
break;
case 3:
setState(() => _image3 = tempImg);
break;
case 4:
setState(() => _image4 = tempImg);
break;
}
}
Widget _displayChild1() {
if (_image1 == null) {
return Padding(
padding: const EdgeInsets.fromLTRB(14, 40, 14, 40),
child: Image.asset(
"assets/icons/plus.png",
height: 30,
width: 30,
),
);
} else {
return Image.file(
_image1,
fit: BoxFit.fill,
width: double.infinity,
);
}
}
Widget _displayChild2() {
if (_image2 == null) {
return Padding(
padding: const EdgeInsets.fromLTRB(14, 40, 14, 40),
child: Image.asset(
"assets/icons/plus.png",
height: 30,
width: 30,
),
);
} else {
return Image.file(
_image2,
fit: BoxFit.fill,
width: double.infinity,
);
}
}
Widget _displayChild3() {
if (_image3 == null) {
return Padding(
padding: const EdgeInsets.fromLTRB(14, 40, 14, 40),
child: Image.asset(
"assets/icons/plus.png",
height: 30,
width: 30,
),
);
} else {
return Image.file(
_image3,
fit: BoxFit.fill,
width: double.infinity,
);
}
}
Widget _displayChild4() {
if (_image4 == null) {
return Padding(
padding: const EdgeInsets.fromLTRB(14, 40, 14, 40),
child: Image.asset(
"assets/icons/plus.png",
height: 30,
width: 30,
),
);
} else {
return Image.file(
_image4,
fit: BoxFit.fill,
width: double.infinity,
);
}
}
}
to use the Listview.builder like this -
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
class ImageAdd extends StatefulWidget {
#override
_ImageAddState createState() => _ImageAddState();
}
class _ImageAddState extends State<ImageAdd> {
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(10),
height: MediaQuery.of(context).size.height / 5,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
width: MediaQuery.of(context).size.width / 8,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.orange),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5)),
boxShadow: [BoxShadow(
offset: Offset(0, 15),
blurRadius: 27,
color: Colors.black12, // Black color with 12% opacity
)]),
child: Center(child: Text('Images')),
),
),
Expanded(
flex: 5,
child: Container(
decoration: BoxDecoration(
// color: Colors.white,
border: Border.all(color: Colors.orange),
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10)),
boxShadow: [BoxShadow(
offset: Offset(0, 15),
blurRadius: 27,
color: Colors.black12, // Black color with 12% opacity
)]),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 4,
itemBuilder: (context, index) => OutlineButton(
onPressed: () {},
color: Colors.white,
borderSide: BorderSide(
color: Colors.orange.withOpacity(0.1),
width: 2.5,
),
child: Padding(
padding: const EdgeInsets.fromLTRB(14, 40, 14, 40),
child: Image.asset(
"assets/icons/plus.png",
height: 30,
width: 30,
),
),
),
),
),
),
],
),
);
}
}
I do not know how to use the Listview.builder to achieve the first code or rather to simplify the first code. Thank you.

You can copy paste run full code below
You can use Map<int, File> and put File to related index
code snippet
Map<int, File> files = {0: null, 1: null, 2: null, 3: null};
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: files.length,
itemBuilder: (context, index) => OutlineButton(
onPressed: () async {
files[index] = await ImagePicker.pickImage(
source: ImageSource.gallery);
setState(() {});
},
...
child: files[index] == null
? Padding(
...
: Image.file(
files[index],
fit: BoxFit.fill,
working demo
full code
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
Map<int, File> files = {0: null, 1: null, 2: null, 3: null};
class ImageAdd extends StatefulWidget {
#override
_ImageAddState createState() => _ImageAddState();
}
class _ImageAddState extends State<ImageAdd> {
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(10),
height: MediaQuery.of(context).size.height / 5,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
width: MediaQuery.of(context).size.width / 8,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.orange),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5)),
boxShadow: [
BoxShadow(
offset: Offset(0, 15),
blurRadius: 27,
color: Colors.black12, // Black color with 12% opacity
)
]),
child: Center(child: Text('Images')),
),
),
Expanded(
flex: 5,
child: Container(
decoration: BoxDecoration(
// color: Colors.white,
border: Border.all(color: Colors.orange),
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10)),
boxShadow: [
BoxShadow(
offset: Offset(0, 15),
blurRadius: 27,
color: Colors.black12, // Black color with 12% opacity
)
]),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: files.length,
itemBuilder: (context, index) => OutlineButton(
onPressed: () async {
files[index] = await ImagePicker.pickImage(
source: ImageSource.gallery);
setState(() {});
},
color: Colors.white,
borderSide: BorderSide(
color: Colors.orange.withOpacity(0.1),
width: 2.5,
),
child: files[index] == null
? Padding(
padding: const EdgeInsets.fromLTRB(14, 40, 14, 40),
child: Image.network(
"https://picsum.photos/250?image=9",
height: 30,
width: 30,
),
)
: Image.file(
files[index],
fit: BoxFit.fill,
//width: double.infinity,
)),
),
),
),
],
),
);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: ImageAdd(),
);
}
}