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?
Related
Thank you for checking :)
I don't know why the bottomnavigationbar's area filled half on screen. The bottomnavigationbar's area is filled black. I want the bottomnavigationbar to show for navigation only bottom area.
If I delete Expanded, the renderflex error is showing me..
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int visit = 0;
double height = 30;
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
bottomNavigationBar: BottomBarFloating(
iconSize: 25,
items: items,
backgroundColor: Colors.white,
color: Colors.black,
colorSelected: PRIMARY_COLOR,
indexSelected: visit,
paddingVertical: 30,
onTap: (int index) => setState(() {
visit = index;
}),
),
);
}
}
class SearchOffScreen extends StatelessWidget {
const SearchOffScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return DefaultLayout(
child: SafeArea(
top: true,
bottom: false,
child: Column(
children: [
const SizedBox(height: 250.0,),
_SearchBox(),
Expanded(child: MyHomePage(title: '')),
],
),
),
);
}
}
class DefaultLayout extends StatelessWidget {
final Widget child;
final String? title;
const DefaultLayout({
required this.child,
this.title,
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xffffffff),
body: child,
);
}
If I delete Expanded, the renderflex error is showing me..
How can I fix it?
Try this instead, use only one scaffold in a page
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int visit = 0;
double height = 30;
#override
Widget build(BuildContext context) {
return Container(
child: //your code here
);
}
}
class SearchOffScreen extends StatelessWidget {
const SearchOffScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return DefaultLayout(
child: SafeArea(
top: true,
bottom: false,
child: Column(
children: [
const SizedBox(height: 250.0,),
_SearchBox(),
Expanded(child: MyHomePage(title: '')),
],
),
),
);
}
}
class DefaultLayout extends StatelessWidget {
final Widget child;
final String? title;
const DefaultLayout({
required this.child,
this.title,
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xffffffff),
body: child,
bottomNavigationBar: BottomBarFloating(
iconSize: 25,
items: items,
backgroundColor: Colors.white,
color: Colors.black,
colorSelected: PRIMARY_COLOR,
indexSelected: visit,
paddingVertical: 30,
onTap: (int index) => setState(() {
visit = index;
}),
),
);
}
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,
)
],
),
);
}
}
Say I've created a file info_card.dart that I want to use to get the name of a user with the following code:-
import 'package:flutter/material.dart';
class InfoCard extends StatefulWidget {
const InfoCard({ Key? key }) : super(key: key);
#override
State<InfoCard> createState() => _InfoCardState();
}
class _InfoCardState extends State<InfoCard> {
final _nameController = TextEditingController();
#override
void dispose() {
_nameController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return TextField(
controller: _nameController
);
}
}
And then I create a completely different file, home_page.dart for example:-
import 'package:flutter/material.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: InfoCard(),
);
}
}
How would I access the text controller within the InfoCard() widget, and say store it in a variable so that I could write it to a database? I'm really struggling with this as simply trying to use InfoCard()._nameController doesn't seem to work.
You could create the controller in the home page instead and pass it to the infocard. for example:
class HomePage extends StatefulWidget {
const HomePage({ Key? key }) : super(key: key);
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final _nameController = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: InfoCard(controller: _nameController ),
);
}
#override
void dispose() {
_nameController.dispose();
super.dispose();
}
}
and
class InfoCard extends StatefulWidget {
final TextEditingController controller;
const InfoCard({ Key? key, required this.controller}) : super(key: key);
#override
State<InfoCard> createState() => _InfoCardState();
}
class _InfoCardState extends State<InfoCard> {
#override
Widget build(BuildContext context) {
return TextField(
controller: widget.controller
);
}
}
There are many ways to achieve that in Flutter, the simplest thing you can do:
Instead of creating the controller inside InfoCard, inject it to it by its constructor. So your file will look like this:
class InfoCard extends StatefulWidget {
const InfoCard( this._nameController , { Key? key,}) : super(key: key);
final TextEditingController _nameController;
#override
State<InfoCard> createState() => _InfoCardState();
}
class _InfoCardState extends State<InfoCard> {
#override
Widget build(BuildContext context) {
return TextField(
controller: widget._nameController,
);
}
}
Create a controller in HomePage and pass it to InfoCard, thus, you'll have a reference to that controller in HomePage. So your file will look like this:
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
TextEditingController _infoCardController = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
body: InfoCard(_infoCardController),
);
}
}
Now pass that controller reference _infoCardController wherever you need it, and use simply as
print(_infoCardController.text)
Here i Solve this problem you can follow these steps:
just click the button and check the controller result in the console window
HomePage Code:
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> {
TextEditingController textController = TextEditingController();
void getText(){
print("entered text "+ textController.text);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
InfoCard(textController),
ElevatedButton(onPressed: getText, child: Text("Press Here !")),
],
)),
);
}
}
InfoCard Page:
import 'package:flutter/material.dart';
class InfoCard extends StatefulWidget {
final TextEditingController textController ;
const InfoCard(#required this.textController);
#override
State<InfoCard> createState() => _InfoCardState();
}
class _InfoCardState extends State<InfoCard> {
// final _nameController = TextEditingController();
#override
void dispose() {
widget.textController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Container(
color: Colors.grey,
child: TextField(
controller: widget.textController
),
);
}
}
I have a problem in my Flutter app with implement my custom Widget LifeViewList(). When I try do it createState()_HomePageState need some arguments, when I do it then I get a worrnig “Don’t put any logic in createState” .
class HomePage extends StatefulWidget {
const HomePage(
{ Key? key,
required this.user,
}) : super(key: key);
final User user;
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
late ScrollController _scrollController;
double _scrollControllerOffset = 0.0;
_HomePageState(this.lifeView);
void _scrollListener() {
setState(() {
_scrollControllerOffset = _scrollController.offset;
});
}
#override
void initState() {
_scrollController = ScrollController();
_scrollController.addListener(_scrollListener);
super.initState();
}
final LifeView lifeView;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
CustomScrollView(
controller: _scrollController,
slivers: [
const LogoBanner(),
const Topic('How do you feel today?'),
const EmotionGrid(),
const SliverToBoxAdapter(
child: SizedBox(height: 20),
),
const Topic('A place to think about yourself.'),
LifeViewList(
LifeView(
title: lifeView.title,
image: lifeView.image,
id:lifeView.id,
),
),
const SingOutButton(),
],
),
FadeAppBar(scrollOffset: _scrollControllerOffset)
],
),
);
}
}
What I have to change ?
To access your widget variables in your state you can do widget.variable within your state class.
For example using user:
class HomePage extends StatefulWidget {
const HomePage({ Key? key, required this.user,}) : super(key: key);
final User user;
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Text(widget.user.username);
}
}
Is there a way I can listen to a button click in flutter? I want to know if the button is clicked in another class that creates a object of that button.
What i want to do is let MyButtonRow know when MyButton is clicked, since it involves changing variables in MyButtonRow.
The functionality i am looking for is similar to .setEventListener in JavaScript
So here's the code
class MyButtonRow extends StatefulWidget {
const MyButtonRow({Key? key}) : super(key: key);
#override
_MyButtonRowState createState() => _MyButtonRowState();
}
class _MyButtonRowState extends State<MyButtonRow> {
#override
Widget build(BuildContext context) {
return Container(width: MediaQuery.of(context).size.width,
child: Row(children: <Widget>[MyButtonTile()],));
}
}
class MyButtonTile extends StatefulWidget {
const MyButtonTile({Key? key}) : super(key: key);
#override
_MyButtonTileState createState() => _MyButtonTileState();
}
class _MyButtonTileState extends State<MyButtonTile> {
#override
Widget build(BuildContext context) {
return TextButton(onPressed: (){
//notify MyButtonRow about the click
}, child: Text("hello"));
}
}
Firstly you declare onTap function on your child widget and then just pass the onTap function from where you define the MyButtonTile
class MyButtonRow extends StatefulWidget {
const MyButtonRow({Key? key}) : super(key: key);
#override
_MyButtonRowState createState() => _MyButtonRowState();
}
class _MyButtonRowState extends State<MyButtonRow> {
#override
Widget build(BuildContext context) {
return Container(width: MediaQuery.of(context).size.width,
child: Row(children: <Widget>[MyButtonTile(onTap: (){
print("Notify me");
})],));
}
}
class MyButtonTile extends StatelessWidget {
final Function onTap;
MyButtonTile({this.onTap});
#override
Widget build(BuildContext context) {
return TextButton(onPressed:onTap,//notify MyButtonRow about the click
child: Text("hello"));
}
}