I was trying to give my Container a Color but but it's saying, for example: red is not defined for the type 'Color'.
Does anyone know how to fix this?
import 'package:flutter/material.dart';
import 'package:color/color.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Container(
color: Color.red,
)
],
),
);
}
}
It's Colors, not Color.
You can look up the Color Class on the official documentation.
Container(
color: Colors.red,
)
import 'package:flutter/material.dart';
import 'package:color/color.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Container(
color: Colors.red,
)
],
),
);
}
}
Related
I created a method that named "Button". This method changes container's color and I want to use this method two times but I don't want "Button" method to not effect other methods. I don't know how to do it. Finally i want to create a method and use it several times but i don't want them to effect each others.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return const MaterialApp(
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
children: [
Button(color1!),
SizedBox(height: 20,),
Button(color1!),
],
),
),
);
}
Color? color1 = Colors.green;
FlatButton Button(Color color) {
return FlatButton(
onPressed: () {
setState(() {
color1 = Colors.blue;
});
},
child: Container(
height: 200,
width: 200,
color: color1,
),
);
}
}
I am watching a tutorial on youtube (https://youtu.be/Evu19gTKaFo) to build a menu for my mobile application. I followed the steps but I had a problem when I ran the application:
-how it's supposed to look: goodLook
-how it's actually looking:
badLook
import 'package:flutter/material.dart';
import 'package:flutter_zoom_drawer/config.dart';
import 'package:flutter_zoom_drawer/flutter_zoom_drawer.dart';
import 'main_screen.dart';
import 'menu_page.dart';
class Dashboard extends StatefulWidget {
const Dashboard({Key? key}) : super(key: key);
#override
State<Dashboard> createState() => _DashboardState();
}
class _DashboardState extends State<Dashboard> {
#override
Widget build(BuildContext context) {
return const ZoomDrawer(
style: DrawerStyle.style1,
mainScreen: MainScreen(),
menuScreen: MenuPage(),
);
}
}
import 'package:dashboard/menu_widget.dart';
import 'package:flutter/material.dart';
import 'package:authentication/authentication.dart';
import 'package:firebase_auth/firebase_auth.dart';
class MainScreen extends StatefulWidget {
const MainScreen({Key? key}) : super(key: key);
#override
State<MainScreen> createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: const Text('Main page'),
leading: const MenuWidget(),
),
body: ElevatedButton(
onPressed: _signOut,
child: const Text('Logout'),
),
);
}
Future<void> _signOut() async {
await FirebaseAuth.instance.signOut();
if (!mounted) {
return;
}
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(
builder: (context) => const Authentication()),
(route) => false);
}
}
import 'package:flutter/material.dart';
class MenuPage extends StatelessWidget {
const MenuPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) => const Scaffold(
backgroundColor: Colors.indigo,
);
}
import 'package:flutter/material.dart';
import 'package:flutter_zoom_drawer/flutter_zoom_drawer.dart';
class MenuWidget extends StatelessWidget {
const MenuWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return IconButton(
icon: const Icon(Icons.menu),
onPressed: () => ZoomDrawer.of(context)!.toggle(),
);
}
}
I've been searching for a solution but I couldn't find it. If you know how to solve this problem, please help me.
Thank you!
Problem solved:
ZoomDrawer(
controller: z,
borderRadius: 24,
style: DrawerStyle.defaultStyle,
openCurve: Curves.fastOutSlowIn,
slideWidth: MediaQuery.of(context).size.width * 0.65,
duration: const Duration(milliseconds: 500),
menuBackgroundColor: Colors.indigo,
mainScreen: MainScreen(),
menuScreen: MenuPage(),
)
https://github.com/medyas/flutter_zoom_drawer/issues/105
Whenever i dismiss the keyboard sometimes it is taking space at half of the screen whether in iOS or Android. Below is the screenshot why i'm facing this issue. This picture is when after i dismiss the keyboard.
TestPage.dart
class TestPage extends StatefulWidget {
const TestPage({Key? key}) : super(key: key);
#override
State<TestPage> createState() => _TestPageState();
}
class _TestPageState extends State<TestPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
SizedBox(height: 50.0,),
TextField(),
SizedBox(height: 50.0,),
TextField()
],
),
);
}
}
Hey did you try to set background color to your scaffold like below
class TestPage extends StatefulWidget {
const TestPage({Key? key}) : super(key: key);
#override
State<TestPage> createState() => _TestPageState();
}
class _TestPageState extends State<TestPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.teal,
body: ListView(
children: const [
SizedBox(height: 50.0,),
TextField(),
SizedBox(height: 50.0,),
TextField()
],
),
);
}
}
How can I use pageController.jumptopage(0) method on button in Page3.dart ? Is it possible? Full example code:
main.dart file
import 'package:flutter/material.dart';
import 'package:test_app/page1.dart';
import 'package:test_app/page2.dart';
import 'package:test_app/page3.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late PageController pageController;
int selectedPage = 0;
final List<Widget> pagesList = [const Page1(), const Page2(), const Page3()];
#override
void initState() {
super.initState();
pageController = PageController();
}
#override
void dispose() {
pageController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: PageView(
controller: pageController,
children: pagesList,
onPageChanged: (index) {
setState(() => selectedPage = index);
},
),
);
}
}
Page3.dart file
import 'package:flutter/material.dart';
class Page3 extends StatelessWidget {
const Page3({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
decoration: const BoxDecoration(
color: Colors.red,
),
child: ElevatedButton(
child: const Text('Button'),
onPressed: () {
// pageController.jumptopage(0); <<< use this
}),
);
}
}
I have this Flutter code sample.
class HomePage extends StatefulWidget {
final String title;
const HomePage({Key? key, required this.title}) : super(key: key);
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(flex: 1, child: SideActivityBar()),
// The wiget Text('Initial') does not show up!
Expanded(flex: 4, child: MainPanel(color: Colors.blue.shade100, page: Text('Initial'))),
],
);
}
}
class MainPanel extends StatefulWidget {
final Widget page;
final Color color;
const MainPanel({Key? key, required this.color, required this.page}) : super(key: key);
#override
State<MainPanel> createState() => _MainPanelState();
}
class _MainPanelState extends State<MainPanel> {
#override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
color: widget.color,
child: widget.page,
);
}
}
The widget Text('Initial') does not show up though I can see MainPanel showing up. What am I missing or doing wrong?