import 'package:floating_counter/constants.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:page_transition/page_transition.dart';

import 'main.dart';

class NewCounter extends StatefulWidget {
@override
_NewCounterState createState() => _NewCounterState();
}

class _NewCounterState extends State<NewCounter> {
bool _visible = true;
final FocusNode textNode = FocusNode();
final FocusNode numberNode = FocusNode();
Color mainColor = kMainColor;
TextStyle labelStyle;
TextStyle numberStyle;
final List<Color> colorsList = [
Color(0xFFF44236),
Color(0xFFEA1E63),
Color(0xFF9C28B1),
Color(0xFF673BB7),
Color(0xFF3F51B5),
Color(0xFF2196F3),
Color(0xFF03A9F5),
Color(0xFF00BCD5),
Color(0xFF009788),
Color(0xFF4CB050),
Color(0xFF8BC24A),
Color(0xFFCDDC39),
Color(0xFFFFEB3C),
Color(0xFFFEC107),
Color(0xFFFF9700),
Color(0xFFFE5722),
Color(0xFF795547),
Color(0xFF9E9E9E),
Color(0xFF607D8B),
Color(0xFF000000),
];

@override
void initState() {
super.initState();
textNode.addListener(onFocusChange);
}

void onFocusChange() {
setState(() {
labelStyle = textNode.hasFocus ? TextStyle(color: kMainColor) : null;
});
setState(() {
numberStyle = numberNode.hasFocus ? TextStyle(color: kMainColor) : null;
});
}

@override
void dispose() {
textNode.dispose();
numberNode.dispose();
textNode.removeListener(onFocusChange);
super.dispose();
}

Widget buildAnimatedItem(
BuildContext context,
int index,
Animation<double> animation,
) {
var color = colorsList[index];
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
backgroundColor: kMainColor,
leading: IconButton(
icon: Icon(
Icons.close,
color: Colors.black,
),
onPressed: () {
Navigator.push(
context,
PageTransition(
type: PageTransitionType.rightToLeft,
duration: Duration(milliseconds: 500),
child: CountNumbering(),
),
);
}),
title: Text(
'New Counter',
style: TextStyle(
color: Colors.black,
),
),
actions: [
IconButton(
icon: Image.asset(
'assets/images/floppy-disk.png',
width: 20.0,
height: 20.0,
),
onPressed: () {
setState(() {
Navigator.pop(context);
});
}),
],
),
body: Container(
child: Column(
children: [
Column(
children: [
Padding(
padding: const EdgeInsets.only(
left: 15.0, top: 15.0, right: 15.0, bottom: 0.0),
child: TextFormField(
focusNode: textNode,
cursorColor: kMainColor,
decoration: InputDecoration(
filled: true,
fillColor: Color(0xFFE0E0E0),
labelText: 'Name',
labelStyle: labelStyle,
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xFF5A5A5A),
),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: kMainColor,
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 15.0, top: 0.0, right: 15.0, bottom: 15.0),
child: TextFormField(
focusNode: numberNode,
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.digitsOnly
],
cursorColor: kMainColor,
decoration: InputDecoration(
filled: true,
fillColor: Color(0xFFE0E0E0),
labelText: 'Start value',
labelStyle: numberStyle,
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xFF5A5A5A),
),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: kMainColor,
),
),
),
),
),
],
),
SizedBox(
height: 10.0,
),
Row(
children: [
SizedBox(
width: 33.0,
),
Text(
'Select a Color',
style: TextStyle(
fontSize: 16.0,
),
),
SizedBox(
width: 10.0,
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.black,
boxShadow: [
BoxShadow(
color: Colors.black54,
spreadRadius: 2,
blurRadius: 2,
// changes position of shadow
),
],
),
child: RaisedButton(
child: Padding(
padding: EdgeInsets.all(40.0),
),
onPressed: () {
setState(() {
showDialog(
context: context,
builder: (BuildContext context) => Dialog(
child: Container(
child: GridView.builder(
padding: const EdgeInsets.all(5.0),
shrinkWrap: true,
itemCount: colorsList.length,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 1.0,
crossAxisSpacing: 5.0,
mainAxisSpacing: 5.0,
crossAxisCount: 5),
itemBuilder: (context, index) {
var color = colorsList[index];
return FadeTransition(
opacity: Tween<double>(
begin: 0,
end: 1,
).animate(animation),
child: SlideTransition(
position: Tween<Offset>(
begin: Offset(0, -0.1),
end: Offset.zero,
).animate(animation),
child: MaterialButton(
elevation: 0,
color: color,
shape: CircleBorder(),
onPressed: () {
Navigator.pop(context);
setState(
() {
mainColor = color;
},
);
},
),
),
);
},
),
),
),
);
});
},
shape: CircleBorder(),
color: mainColor,
),
),
],
),
],
),
),
),
);
}

noSuchMethod(Invocation invocation) => super.noSuchMethod(invocation);
}