Even with a simple app, when I switch from one page to another, the screen flickers. Initially, I was testing this on flutter 3.0.2 and then moved to 3.3.2. On both versions I observe the flickering. Searching on google I see that others have observed this with ad_mob, but in my case I don't have ad_mob.
Here is main.dart
import 'package:flutter/material.dart';
import 'package:navigate3/page_1.dart';
import 'package:navigate3/page_2.dart';
import 'package:navigate3/page_3.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Main app',
initialRoute: '/Page1',
routes: {
'/Page1': (context) => Page_1(),
'/Page2': (context) => Page_2(),
'/Page3': (context) => Page_3(),
},
);
}
}
And here is page_1.dart. page_2.dart and page_3.dart are similar to page_1.dart
import 'package:flutter/material.dart';
class Page_1 extends StatelessWidget {
const Page_1({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('Page 1'),
),
body: Center(
child: Column(
children: [
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/Page2');
},
child: const Text("Goto page 2"))
],
),
),
));
}
}
Related
I have created a flutter package (say weight_calculator) and using it from the parent flutter app.
Now I want to navigate from screen A to screen B in weight_calculator package, but I am not able to use the Named routes as this package doesn't have a Material App.
What will be the correct approach to do that?
Currently, I am creating a new MaterialApp inside the package.
This actually works if you use go_route.
Here is an example where u have a app showing a screen from a package, and that package screen is navigating to a screen from the main app.
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:home_page/home_page.dart';
void main() => runApp(const MyApp());
/// The route configuration.
final GoRouter _router = GoRouter(
routes: <RouteBase>[
GoRoute(
path: '/',
builder: (BuildContext context, GoRouterState state) {
return const HomeScreen();
},
routes: <RouteBase>[
GoRoute(
path: 'details',
builder: (BuildContext context, GoRouterState state) {
return const DetailsScreen();
},
),
],
),
],
);
/// The main app.
class MyApp extends StatelessWidget {
/// Constructs a [MyApp]
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp.router(
routerConfig: _router,
);
}
}
/// The details screen
class DetailsScreen extends StatelessWidget {
/// Constructs a [DetailsScreen]
const DetailsScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Details Screen')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <ElevatedButton>[
ElevatedButton(
onPressed: () => context.go('/'),
child: const Text('Go back to the Home screen'),
),
],
),
),
);
}
}
and you also just need to make a local package with the HomeScreen widget.
library home_page;
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
/// The home screen
class HomeScreen extends StatelessWidget {
/// Constructs a [HomeScreen]
const HomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Home Screen')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () => context.go('/details'),
child: const Text('Go to the Details screen'),
),
const Text("hello"),
],
),
),
);
}
}
Worked out of the box for me.
Also this can be improved by abstraction the routes, and injecting them in to the package from the main app.
I'm using go_router to build an application that
does "dummy" pushes of routes (a bit like Twitter). It is possible to start with a page /a ,push /b, then /c, ... and then push again /a.
When a page is pushed twice, an assert fails: assert(!keyReservation.contains(key)); which ensures a key is used only once in the Navigator.
Is there a way to be able to push twice the same page with go_router?
Here is a small code snippet:
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
void main() {
runApp(const MyApp());
}
final router = GoRouter(
initialLocation: '/a',
routes: [
GoRoute(
path: '/a',
builder: (_, __) => const MyWidget(path: '/a'),
),
GoRoute(
path: '/b',
builder: (_, __) => const MyWidget(path: '/b'),
),
],
);
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp.router(
routeInformationProvider: router.routeInformationProvider,
routeInformationParser: router.routeInformationParser,
routerDelegate: router.routerDelegate,
);
}
}
class MyWidget extends StatelessWidget {
const MyWidget({
required this.path,
Key? key,
}) : super(key: key);
final String path;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(path),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextButton(
onPressed: () {
context.push('/a');
},
child: const Text('/a'),
),
TextButton(
onPressed: () {
context.push('/b');
},
child: const Text('/b'),
),
],
)),
);
}
}
The issue can be triggered by clicking on the TextButton with "/a".
It was a bug in go_router (see this issue) which has been solved in the version 4.2.3.
So now you should be able to push the same page twice.
I am trying to move from one page to another via Navigator.push. Here is my code:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int count = 0;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepOrange,
title: const Text("Noice!"),
),
body: ElevatedButton(
child: const Text('About'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AboutScreen(),
),
);
},
),
class AboutScreen extends StatelessWidget {
const AboutScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: const Color.fromARGB(255, 0, 255, 8),
title: const Text("Flutter ballert")),
);
}
}
The code compiles and I can access the app, but clicking the button leads to an error:
Exception has occurred.
FlutterError (Navigator operation requested with a context that does not include a Navigator.
The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget.)
I know that in the offical docs the example for navigation is a tiny bit different. They dont return MaterialApp, instead they return Scaffold. Whats the difference between the two? Why should I return MaterialApp in the first place? And why doesnt it work with returning MaterialApp?
I dont know why this happens. I am new to flutter, so apologies if thats really trivial.
EDIT: Duplicate of:
Navigator operation requested with a context that does not include a Navigator
The problem is with the context. To fix this. Wrap your widget in a Builder() Class:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int count = 0;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Builder(builder: (context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepOrange,
title: const Text("Noice!"),
),
body: ElevatedButton(
child: const Text('About'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AboutScreen(),
));
},
),
);
}),
);
}
}
class AboutScreen extends StatelessWidget {
const AboutScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: const Color.fromARGB(255, 0, 255, 8),
title: const Text("Flutter ballert")),
);
}
}
Here is a YouTube video by the Google team explaining Builder
You need to pass the context:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int count = 0;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepOrange,
title: const Text("Noice!"),
),
body: ElevatedButton(
child: const Text('About'),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => AboutScreen(),
),
);
},
),
),
);
}
}
class AboutScreen extends StatelessWidget {
const AboutScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: const Color.fromARGB(255, 0, 255, 8),
title: const Text("Flutter ballert")),
);
}
}
Basically you did:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AboutScreen(),
),
);
But you need to do this:
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => AboutScreen(),
),
);
Here is my source code: https://github.com/liou-jia-hao/flutter_demo_app/tree/Cannot-refresh
I create a file which contains my counter model called "counter.dart", here is code:
import 'package:flutter/foundation.dart';
import 'package:nanoid/nanoid.dart';
class Counter {
String id;
int count;
void increment() {
count++;
}
void decrement() {
count--;
}
Counter(this.id, this.count);
}
class CountersModel with ChangeNotifier {
Map<String, Counter> countersMap = {};
void createCounter() {
var id = nanoid();
countersMap[id] = Counter(id, 0);
notifyListeners();
}
}
And here is my main.dart code:
// ignore_for_file: public_member_api_docs, lines_longer_than_80_chars
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'models/counter.dart';
/// This is a reimplementation of the default Flutter application using provider + [ChangeNotifier].
void main() {
runApp(
/// Providers are above [MyApp] instead of inside it, so that tests
/// can use [MyApp] while mocking the providers
MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => CountersModel()),
],
child: const MyApp(),
),
);
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
themeMode: ThemeMode.dark,
theme: ThemeData(brightness: Brightness.dark),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
var countersSet = context.select<CountersModel, Set<Counter>>(
(model) => model.countersMap.values.toSet());
var countersModel = context.read<CountersModel>();
return Scaffold(
appBar: AppBar(
title: const Text('Example'),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: countersSet.map((counter) => BlueButton(counter)).toList(),
),
),
floatingActionButton: FloatingActionButton(
key: const Key('increment_floatingActionButton'),
/// Calls `context.read` instead of `context.watch` so that it does not rebuild
/// when [Counter] changes.
onPressed: countersModel.createCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
class BlueButton extends StatelessWidget {
const BlueButton(this.counter, {Key? key}) : super(key: key);
final Counter counter;
#override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: counter.increment,
onLongPress: counter.decrement,
child: Column(
children: [Text(counter.id), Text('${counter.count}')],
),
);
}
}
I expected the number on the BlueButton can increase immediately.
But the number on the BlueButton can't increase immediately.
I believe that your counter needs context in order for the button to change.
Take a look at this answer.
I've tried everything I can think of to change the background color of my flutter app, but every time I run the app, the background is black.
This is main.dart
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'auth_controller.dart';
import 'themes/color.dart';
import 'index.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp().then((value) => Get.put(AuthController));
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
//ThemeData
title: 'Title',
theme: ThemeData(
brightness: Brightness.light,
),
home:const Index(),
debugShowCheckedModeBanner: false,
);
}
}
I don't think I'm even using themes/color.dart but I thought I'd leave it in anyway. Brightness should set it.
This is index.dart
import 'package:flutter/material.dart';
import 'themes/color.dart';
import 'signup.dart';
Future<void> main() async {
runApp(MyApp(
routes: <String, WidgetBuilder>{
'/signup': (BuildContext context) => const SignUp()
},
debugShowCheckedModeBanner: false,
));
}
class MyApp extends StatelessWidget {
const MyApp({Key? key, required Map<String, WidgetBuilder> routes, required bool debugShowCheckedModeBanner}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
backgroundColor: const Color(0xFFe3e4e4),
appBar: AppBar(
title: const Text('Flutter Screen Background Color Example'),
),
body: const Center(child: Index()),
),
);
}
}
class Index extends StatelessWidget {
const Index({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const SizedBox(height: 20,),
ElevatedButton(
child: const Text('WTF'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SignUp()),
);
}
),
]
)
);
}
}
It seems like the background should be a light grey,but it's black. I tried invalidating the caches and restarting too.