This is my code, it keeps showing up as "Dead Code." and it wont show anything in my AVD, can anyone help me with this?
import 'package:flutter/material.dart';
class SignInScreen extends StatelessWidget {
const SignInScreen({Key? key}) : super(key: key);
static String routeName = "/sign_in";
#override
Widget build(BuildContext context) {
return Scaffold();
AppBar();
}
}
Firstly AppBar() should be inside the Scaffold widget.
The code should be something like this:
import 'package:flutter/material.dart';
class SignInScreen extends StatelessWidget {
const SignInScreen({Key? key}) : super(key: key);
static String routeName = "/sign_in";
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar();
);
}
}
Secondly when you use return the code below the return statement doesn't execute, that is the reason your ide shows as a "dead code"
AppBar should be inside scaffold widget something like this.
try this:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Your Navigationbar title"),
),
body: Container(),
);
}
}
Also after return statement code never execute so. Your ide showing you dead code.
Related
The code was working well till when I tried Extract CupertinoNavigationBar to a widget.
May Anyone please give some information why this issue happening?
It gives me this error:
Error: The argument type 'HomePageAppBar' can't be assigned to the parameter type 'ObstructingPreferredSizeWidget?'.
package:flutter_todo_app/main.dart:27
'HomePageAppBar' is from 'package:flutter_todo_app/main.dart' ('lib/main.dart').
package:flutter_todo_app/main.dart:1
'ObstructingPreferredSizeWidget' is from 'package:flutter/src/cupertino/page_scaffold.dart' ('../../development/flutter/packages/flutter/lib/src/cupertino/page_scaffold.dart').
package:flutter/…/cupertino/page_scaffold.dart:1
navigationBar: HomePageAppBar(),
^
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'widgets/body.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return CupertinoApp(
debugShowCheckedModeBanner: false,
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: HomePageAppBar(),
child: HomePageBody(),
);
}
}
class HomePageAppBar extends StatelessWidget {
const HomePageAppBar({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return CupertinoNavigationBar(
middle: const Text('app bar'),
);
}
}
wrap your HomePageAppBar() with CupertinoNavigationBar() like this :
CupertinoNavigationBar(
child: HomePageAppBar(),
)
Observe that CupertinoPageScaffold navigationBar accepts ObstructingPreferredSizeWidget but you are providing a Stateless Widget that's what the error says. Try implementing HomePageAppBar with ObstructingPreferredSizeWidget (refer to the below code). I ran your code on my machine it solved the error.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'widgets/body.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return CupertinoApp(
debugShowCheckedModeBanner: false,
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: HomePageAppBar(),
child: HomePageBody(),
);
}
}
// <<<<<<<------ CHANGES ------>>>>>>
class HomePageAppBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
const HomePageAppBar({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return const CupertinoNavigationBar(
middle: Text('app bar'),
);
}
#override
Size get preferredSize => const Size(double.infinity, 55);
#override
bool shouldFullyObstruct(BuildContext context) {
return false;
}
}
Let's say I have this HomePage widget:
class HomePage extends StatelessWidget {
const HomePage({super.key});
#override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(),
);
}
}
I am able to use a const constructor at the root (MaterialApp widget) because all children do have const constructors too.
If I add the AppBar widget, I will have to remove the const constructor from the root, because AppBar does not have a const constructor.
class HomePage extends StatelessWidget {
const HomePage({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp( // no const anymore
home: Scaffold(
appBar: AppBar(...),
),
);
}
}
But why am I able to use the HomePage widget with a const constructor ? See code below:
class App extends StatelessWidget {
const App({super.key});
#override
Widget build(BuildContext context) {
return const HomePage(); // using a const constructor
}
}
I thought it would be impossible because of the AppBar child widget.
Because the HomePage class is immutable. The build function implementation doesn't affect it.
The const keyword can be used when the object is immutable. A Compiler allocates the same portion of memory for all objects.
For more info, reference the Using constructors: Dart doc
I am creating reusable stateless widget for troubleshooting and maintenance. MyApp1 is a statelesswidget and am calling this widget MyApp1(title: 'title',) from a statefull widget.In order to segregate many lines of code and make troubleshooting simpler, another widgets firstone and Secondone are created. Here am passing a title data. I made two widgets firstone (widget function) and SecondOne (Statelesswidget). Although I am showing a text in both, the outcome differs.
class MyApp1 extends StatelessWidget {
final String title;
const MyApp1({super.key,required this.title});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Column(
children: [
Text(title,style: Theme.of(context).textTheme.titleLarge),
firstone(context),
SecondOne(title: 'title'),
],
),
),
);
}
Widget firstone(context){
return Text(title,style: Theme.of(context).textTheme.titleLarge);
}
}
class SecondOne extends StatelessWidget {
final String title;
const SecondOne({Key? key,required this.title}) : super(key: key);
#override
Widget build(BuildContext context) {
return Text(title,style: Theme.of(context).textTheme.titleLarge);
}
}
Although the text styles are identical in both, my output is different. I don't have to supply the title data twice when using firstone (the widget function). Which is preferable: Stateless widgets or widget functions? If I use a stateless widget, I transmit data from a stateful widget to Myapp1 stateless widget and then to a second widget. Is this correct
My Output:
Classes should be preferred over functions that return widgets.
It's different because you're manually passing a BuildContext which is provided above the scope of where the default ThemeData can be accessed from (is provided by MaterialApp).
class MyApp1 extends StatelessWidget {
final String title;
const MyApp1({super.key,required this.title});
#override
Widget build(BuildContext context) { // <- this BuildContext is being used
return MaterialApp( // <- this widget provides the `ThemeData`, which isn't accessible from the above context
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Column(
children: [
Text(title,style: Theme.of(context).textTheme.titleLarge), // <- refers to the `context` provided by build above
firstone(context), // <- refers to the `context` provided by build above
SecondOne(title: 'title'),
],
),
),
);
}
Widget firstone(context){
return Text(title,style: Theme.of(context).textTheme.titleLarge);
}
class SecondOne extends StatelessWidget {
final String title;
const SecondOne({Key? key,required this.title}) : super(key: key);
#override
Widget build(BuildContext context) {
// This uses the correct context, inherited from `MaterialApp` properly.
return Text(title,style: Theme.of(context).textTheme.titleLarge);
}
}
Please do not return MaterialApp .
Direct return column in myapp1 class.
It will solve your issue
I am using english-words package and I try to get random word and display it in Text but I got error. What I am doing wrong?
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final wordPair = WordPair.random();
return MaterialApp(
theme: ThemeData(primaryColor: Colors.purple[900]),
home: Scaffold(
appBar: AppBar(title: const Text('WordPair Generator')),
body: const Center(child: Text(wordPair.asPascalCase))
));
}
}
I get error at Text(wordPair.asPascalCase):
Evaluation of this constant expression throws an exception.dart(const_eval_throws_exception)
Remove the const keyword before the Center widget. you cant use a const widget if that widget has a none-constant data/variable at the build time.
Edit: More on const
I want to make a minute/second stopwatch that isn't very complex interms of code. I tried using the Stopwatch class that returns it's current value when it's function is called, is there any way i can use the stopwatch class that will automatically update my text widget every second. I am using getx as a state manager.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
const title = 'Grid List';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: const Text(title),
),
body: MyTimer(),
),
);
}
}
class MyTimer extends StatefulWidget {
const MyTimer({Key? key}) : super(key: key);
#override
_MyTimerState createState() => _MyTimerState();
}
class _MyTimerState extends State<MyTimer> {
final stopWatchClass = Stopwatch();
#override
void initState() {
stopWatchClass.start();
super.initState();
}
#override
Widget build(BuildContext context) {
return Text(stopWatchClass.elapsedMilliseconds.toString());
}
}
0 is written on the Text widget, but if u start the stopwatch a bit earlier, it shows the correct time elapsed. The problem is that i want the text widget to automatically update everytime a second has elapsed, somewhat like listening to the stopWatchClass.