This dart project it is showing an error that context is undefined and when i sent it as an argument it is showing error i am new to flutter and my mentor wrote the same(as i have seen)
i am facing this problem
import 'package:flutter/material.dart';
class Category_item extends StatelessWidget {
final String title;
final Color color;
Category_item(this.title, this.color);
void selectCategory() {
Navigator.of(context);
}
#override
Widget build(BuildContext context) {
return InkWell(
onTap: selectCategory,
splashColor: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(15), //wave ripple waves
child: Container(
padding: const EdgeInsets.all(15),
child: Text(
title,
style: Theme.of(context).textTheme.headline6,
),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
color.withOpacity(0.7),
color,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(15),
),
),
);
}
}
void selectCategory() {
Navigator.of(context);
}
this function is outside the build.
try this:
import 'package:flutter/material.dart';
class Category_item extends StatelessWidget {
final String title;
final Color color;
Category_item(this.title, this.color);
void selectCategory() {
Navigator.of(context);
}
#override
Widget build(BuildContext context) {
return InkWell(
onTap: selectCategory,
splashColor: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(15), //wave ripple waves
child: Container(
padding: const EdgeInsets.all(15),
child: Text(
title,
style: Theme.of(context).textTheme.headline6,
),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
color.withOpacity(0.7),
color,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(15),
),
),
);
}
}
Try this-
selectCategory(BuildContext context) {
Navigator.of(context);
}
The function needs to have an input for the context in order for it to know what the context is.
void selectCategory(BuildContext context) {
Navigator.of(context);
}
And then call it like this:
onTap: () => selectCategory(context),
Related
I already made it work on my note_cards.dart but i cant seem to make it display the Gradient background assigned to my card when i create/open the note_card. Any help is welcome. Thank you in advance!
This is my note_editor.dart:
import 'dart:math';
import 'package:BetterNotes/style/app_style.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
class NoteEditorScreen extends StatefulWidget {
const NoteEditorScreen({Key? key}) : super(key: key);
#override
State<NoteEditorScreen> createState() => _NoteEditorScreenState();
}
class _NoteEditorScreenState extends State<NoteEditorScreen> {
late int color_id;
final TextEditingController _titleController = TextEditingController();
final TextEditingController _mainController = TextEditingController();
#override
void initState() {
super.initState();
color_id = Random().nextInt(AppStyle.cardsColor.length);
}
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
iconTheme: const IconThemeData(color: Colors.black),
title: const Text(
"Add a new Note",
style: TextStyle(color: Colors.black),
),
),
body: FutureBuilder(
future: AppStyle.cardsColor['color_id'],
builder: (BuildContext context, AsyncSnapshot<List<Color>> snapshot) {
if (snapshot.hasData) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [snapshot.data![color_id], Colors.white],
),
),
child: Padding(
padding: const EdgeInsets.all(8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextField(
controller: _titleController,
decoration: const InputDecoration(
border: InputBorder.none, hintText: 'Note Title'),
style: AppStyle.mainTitle,
),
const SizedBox(
height: 8,
),
TextField(
controller: _mainController,
keyboardType: TextInputType.multiline,
maxLines: null,
decoration: const InputDecoration(
border: InputBorder.none, hintText: 'Note Content'),
style: AppStyle.mainContent,
),
],
),
),
);
} else {
return Container();
}
},
),
floatingActionButton: FloatingActionButton(
backgroundColor: AppStyle.accentColor,
onPressed: () async {
FirebaseFirestore.instance.collection('notes').add({
'note_title': _titleController.text,
'note_content': _mainController.text,
'color_id': color_id
}).then((value) {
print(value.id);
Navigator.pop(context);
}).catchError(
(error) => print('Failed to add new Note due to $error'));
},
child: const Icon(Icons.save),
),
);
}
}
and this is my app_style.dart:
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:google_fonts/google_fonts.dart';
class AppStyle {
static Color bgColor = const Color(0xffffffff);
static Color mainColor = const Color(0xff000000);
static Color accentColor = const Color(0xFF0065FF);
// Setting the Cards different Color
static List<LinearGradient> cardsColor = [
const LinearGradient(
begin: Alignment.topLeft,
end: Alignment.topRight,
colors: [Colors.white, Colors.white]),
LinearGradient(
begin: Alignment.topLeft,
end: Alignment.topRight,
colors: [Colors.red.shade100, Colors.red.shade200]),
LinearGradient(
begin: Alignment.topLeft,
end: Alignment.topRight,
colors: [Colors.pink.shade100, Colors.pink.shade200]),
LinearGradient(
begin: Alignment.topLeft,
end: Alignment.topRight,
colors: [Colors.orange.shade100, Colors.orange.shade200]),
LinearGradient(
begin: Alignment.topLeft,
end: Alignment.topRight,
colors: [Colors.yellow.shade100, Colors.yellow.shade200]),
LinearGradient(
begin: Alignment.topLeft,
end: Alignment.topRight,
colors: [Colors.green.shade100, Colors.green.shade900]),
LinearGradient(
begin: Alignment.topLeft,
end: Alignment.topRight,
colors: [Colors.blue.shade100, Colors.blue.shade200]),
LinearGradient(
begin: Alignment.topLeft,
end: Alignment.topRight,
colors: [Colors.blueGrey.shade100, Colors.blueGrey.shade200]),
];
// Setting the text style
static TextStyle mainTitle =
GoogleFonts.roboto(fontSize: 18, fontWeight: FontWeight.bold);
static TextStyle mainContent =
GoogleFonts.nunito(fontSize: 16, fontWeight: FontWeight.bold);
static TextStyle dateTitle =
GoogleFonts.nunito(fontSize: 16, fontWeight: FontWeight.w500);
}
I have tried to use late and final on the color_id, changed the body to FutureBuilder.
It is a pretty easy fix you have accidentally added List in your FutureBuilder instead of List which you are trying to pass in your future.
Instead of this:
FutureBuilder(
future: AppStyle.cardsColor['color_id'],
builder: (BuildContext context, AsyncSnapshot<List<Color>> snapshot) {
Try this:
FutureBuilder(
future: AppStyle.cardsColor['color_id'],
builder: (BuildContext context, AsyncSnapshot<List<LinearGradient>> snapshot) {
This is my first time using flutter and when I added background it worked fine with this:
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
const darkBlueColor = const Color(0xff131f40);
const lightBlueColor = const Color(0xff445c9e);
return Scaffold(
body: Center(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
darkBlueColor,
lightBlueColor,
],
stops: [0.5, 1],
begin: const FractionalOffset(0.5, 0.2),
end: const FractionalOffset(1, 1),
),
),
),
),
);
}
}
but when I added Column so i can have more child functions the background only showed on my added photo:
Here is my code using Column:
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
const darkBlueColor = const Color(0xff131f40);
const lightBlueColor = const Color(0xff445c9e);
return Scaffold(
body: Column(
children: [
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
darkBlueColor,
lightBlueColor,
],
stops: [0.5, 1],
begin: const FractionalOffset(0.5, 0.2),
end: const FractionalOffset(1, 1),
),
),
child: LppImage(),
),
],
),
);
}
}
So if anyone knows how to resolve this issue please help. Thank you :)
You'd better to use Stack instead Column if you want to place other ui elements above the background. To make background fill full screen use Positioned.fill inside Stack:
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
const darkBlueColor = const Color(0xff131f40);
const lightBlueColor = const Color(0xff445c9e);
return Scaffold(
body: Stack(
children: [
Positioned.fill(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
darkBlueColor,
lightBlueColor,
],
stops: [0.5, 1],
begin: const FractionalOffset(0.5, 0.2),
end: const FractionalOffset(1, 1),
),
),
child: LppImage(),
),
),
],
),
);
}
}
I have a container wrapped in Dismissible, both the container and dismissible background have their corners cut.
My problem is that even though the corner of the container on top is cut the space that would have been the corner is white instead of transparent.
Here's What I have vs What I want (made on paint)
I tried throwing Colors.transparent around but had no success.
Here is the full code:
import 'package:flutter/material.dart';
class Test extends StatefulWidget {
#override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> {
static const Radius _borderRadius = const Radius.circular(65.0);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Dismissible(
key: ValueKey("hmm"),
background: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 3),
borderRadius: BorderRadius.all(_borderRadius),
color: Colors.white,
),
),
secondaryBackground: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 3),
borderRadius: BorderRadius.all(_borderRadius),
color: Colors.white,
),
),
child: Container(
width: 300,
height: 200,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(_borderRadius),
gradient: LinearGradient(
colors: [Colors.blue, Colors.pink],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
)),
),
)),
);
}
}
Found here
The problem is the clipping behavior in dismissible.dart. I've managed to solve the problem by editing the Dismissible class itself. In lines 559 - 573, you will find an if-statement that looks like this:
if (background != null) {
content = Stack(children: <Widget>[
if (!_moveAnimation.isDismissed)
Positioned.fill(
child: ClipRect(
clipper: _DismissibleClipper(
axis: _directionIsXAxis ? Axis.horizontal : Axis.vertical,
moveAnimation: _moveAnimation,
),
child: background,
),
),
content,
]);
}
If you just comment out the clipper-property in ClipRect, the background will be transparent and you won't lose the collapsing animation.
You can fix this by using moving your background out of your Dismissible:
Full source code:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: HomePage(),
),
);
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Test(),
);
}
}
class Test extends StatefulWidget {
#override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> {
static const Radius _borderRadius = const Radius.circular(65.0);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Center(
child: Container(
width: 300,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 3),
borderRadius: BorderRadius.all(_borderRadius),
color: Colors.white,
),
),
),
Dismissible(
key: ValueKey("hmm"),
child: Center(
child: Container(
width: 300,
height: 200,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(_borderRadius),
gradient: LinearGradient(
colors: [Colors.blue, Colors.pink],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
),
),
),
],
),
);
}
}
i am new to flutter and building custom RisedButton
I have this button
import 'package:flutter/material.dart';
class EasyButton extends StatelessWidget {
final onPressed;
final text;
EasyButton(this.onPressed, this.text);
#override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: this.onPressed,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(60),
),
padding: EdgeInsets.all(0),
elevation: 2,
splashColor: Colors.blue[300],
child: Ink(
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(60),
gradient: new LinearGradient(
colors: [Colors.blue, Colors.blue[800]],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
padding: EdgeInsets.symmetric(horizontal: 30, vertical: 10),
child: new Text(this.text, style: TextStyle(color: Colors.white)),
),
);
}
}
But i when i am using it with Expanded widget i get this result
How can I make it 100% parent width expanded?
With double.infinity
With container
Wrap the RaisedButton inside ButtonTheme and specify minWidth.
ButtonTheme(
minWidth: double.infinty, //takes up all the width
child: RaisedButton(),
)
I would like to fade a LinearGradient into a different LinearGradient with different colors when I press a button, e.g. from
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomLeft,
end: Alignment.topRight,
stops: [0.1, 0.5, 0.7, 0.9],
colors: [
Colors.blue[700],
Colors.blue[600],
Colors.blue[500],
Colors.blue[300],
],
)),
),
to
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomLeft,
end: Alignment.topRight,
stops: [0.1, 0.5, 0.7, 0.9],
colors: [
Colors.red[700], // different color
Colors.red[600],
Colors.red[500],
Colors.red[300],
],
)),
),
How can I do this?
you can use AnimatedContainer to do so.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
List<Color> change = [Colors.blue[700],Colors.blue[600],Colors.blue[500],Colors.blue[300]];
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
),
backgroundColor: Colors.transparent,
body: InkWell(
onTap: (){
change[0] = Colors.red[700];
change[1] = Colors.red[600];
change[2] = Colors.red[500];
change[3] = Colors.red[300];
},
child: AnimatedContainer(
child: Center(child: new Text("hello")),
duration: Duration(seconds: 5),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomLeft,
end: Alignment.topRight,
stops: [0.1, 0.5, 0.7, 0.9],
colors: [
change[0],
change[1],
change[2],
change[3],
],
),
),
),
),
),
);
}
}
The simplest solution would be to assign some kind of state for the button, make the Container an AnimatedContainer and add a conditional to the decoration parameter. Something like the class I created for this question. In it I've made your stops and color lists constants, which allow your gradients to be constant as well. Then you pass a "text" argument and then you optionally have an onPressed callback that will tell you what its state is. I made this a class so to avoid letting the setState get called for the entire parent widget and the constants were given to exemplify good practices. Try to avoid placing these kinds of things in build methods.
const _stops = [0.1, 0.5, 0.7, 0.9];
const _redColors = [
Color(0xFFD32F2F), // different color
Color(0xFFE53935),
Color(0xFFF44336),
Color(0xFFE57373),
];
const _blueColors = [
Color(0xFF1976D2),
Color(0xFF1E88E5),
Color(0xFF2196F3),
Color(0xFF64B5F6),
];
const _red = const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomLeft,
end: Alignment.topRight,
stops: _stops,
colors: _redColors,
)
);
const _blue = const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomLeft,
end: Alignment.topRight,
stops: _stops,
colors: _blueColors,
)
);
class RedBlueButton extends StatefulWidget {
final Function(bool) onPressed;
final String text;
final String submittedText;
const RedBlueButton({Key key, this.onPressed, this.text, this.submittedText}) : super(key: key);
#override
_RedBlueButtonState createState() => _RedBlueButtonState();
}
class _RedBlueButtonState extends State<RedBlueButton> {
bool pressed = false;
#override
Widget build(BuildContext context) {
return InkWell(
onTap: (){
setState(() {
pressed = !pressed;
if(widget.onPressed != null)
widget.onPressed(pressed);
});
},
child: AnimatedContainer(
duration: kThemeChangeDuration,
decoration: pressed ? _red : _blue,
alignment: Alignment.center,
padding: EdgeInsets.symmetric(
horizontal: 10,
vertical: 5
),
child: Text(
pressed ? widget.text ?? 'submit' : widget.submittedText ?? 'sent',
style: TextStyle(
color: Colors.white
),
),
),
);
}
}