Setting theme data for flutter app seems broken - flutter

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.

Related

Is it possible to change ShowDurationPicker colors in flutter?

Trying to change duration pickers color theme but the package does not allow me to change.
In other timer pickers like showTimePickers the widget containes a builder where you can add a theme to it but in this one there is no builder.
I am currently using this package pub.dev link
I tried to wrap it with a theme but that didn't help.
If you put your ThemeData in MaterialApp like this, you can easily change colors in showDurationPicker:
import 'package:flutter/material.dart';
import 'package:duration_picker/duration_picker.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Duration Picker Demo',
theme: ThemeData(
colorScheme: const ColorScheme.light(
primary: Colors.red,
secondary: Colors.green,
),
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Test')),
body: Container(),
floatingActionButton: Builder(
builder: (BuildContext context) => FloatingActionButton(
onPressed: () async {
var resultingDuration = await showDurationPicker(
context: context,
initialTime: const Duration(minutes: 20),
);
if (!mounted) return;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Choose duration: $resultingDuration')));
},
tooltip: 'Popup Duration Picker',
child: const Icon(Icons.add),
),
),
);
}
}
Output:

Flutter screen flickers with flutter 3.3.2

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"))
],
),
),
));
}
}

Scaffoldmessenger widget ancestor problem

void main() async {
WidgetsFlutterBinding.ensureInitialized();
await SharedPrefs.init();
runApp(MultiProvider(
providers: [
ChangeNotifierProvider(create: (context) => UserProvider()),
Provider(
create: (context) => AuthService(),
),
],
child: Builder(builder: (context) {
return const MyApp();
})));
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
void initState() {
super.initState();
context.read<AuthService>().getUserData(context);
}
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Amazon Clone',
onGenerateRoute: (settings) => generateRoute(settings),
theme: ThemeData(
scaffoldBackgroundColor: GlobalVariables.backgroundColor,
colorScheme:
const ColorScheme.light(primary: GlobalVariables.secondaryColor),
appBarTheme: const AppBarTheme(
elevation: 0,
iconTheme: IconThemeData(color: Colors.black),
),
),
home: Builder(builder: (context) {
return context.watch<UserProvider>().user.token.isNotEmpty
? const HomeScreen()
: const AuthScreen();
}));
}
}
i am using snackbar from utils file i get no scaffoldmessenger widget found error.I tried to use builder scaffoldmessengerkey but didnt work.what can i do.i used try catch with snackbar.What is the solve of my problem
You need both MaterialApp and a Scaffold widget in the tree before using ScaffoldMessenger. For example:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp( // required MaterialApp
title: _title,
home: Scaffold( // required Scaffold
appBar: AppBar(title: const Text(_title)),
body: const Center(
child: MyStatelessWidget(),
),
),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return OutlinedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('A SnackBar has been shown.'),
),
);
},
child: const Text('Show SnackBar'),
);
}
}

Flutter - How to call an API every n minutes?

I need to call an API every n minutes. The data should be available across all screens. How can I implement this at app level. I am not using any state management tools.
void main() {
periodicSub = Stream.periodic(const Duration(seconds: 10))
.listen((_) {
///fetch data
someFuture =
Future<List<someObject>>.delayed(
const Duration(milliseconds: 500), () async {
return someFunction();
});
});
someFuntions returns a list. I want a certain FutureBuilder on HomePage to execute whenever the list is updated.
Here is an example using "https://pub.dev/packages/provider"
First create a Notifier:
import 'dart:async';
import 'package:flutter/material.dart';
class CustomNotifier with ChangeNotifier {
int counter = 0;
CustomNotifier() {
Stream.periodic(const Duration(seconds: 10)).listen((_) {
///fetch data
Future<List<dynamic>>.delayed(const Duration(milliseconds: 500),
() async {
return someFunction();
});
});
}
someFunction() {
counter++;
notifyListeners();
}
}
Then you could use it like:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'notifier.dart';
void main() {
final customNotifier = CustomNotifier();
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider(
create: (context) => customNotifier,
),
//You could add more providers
],
builder: (context, _) {
return const 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(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const 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> {
#override
Widget build(BuildContext context) {
var customNotifier = Provider.of<CustomNotifier>(
context,
);
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'someFunction runs this many times:',
),
Text(
'${customNotifier.counter}',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
);
}
}

My Navigation Drawer just doesn't works. I have created the screens and gone through a lot of examples

My drawer is not navigating to other screens. I don't know why, I have gone through a lot of StackOverflow solutions.
I have created routes also but it is still not working.
Here is my code for the drawer.
class SideDrawer extends StatelessWidget{
const SideDrawer({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.greenAccent,
),
child: Text('Welcome!'),
),
ListTile(
title: const Text('Home'),
onTap: () => Navigator.pushReplacementNamed(context, Routes.home)
),
ListTile(
title: const Text('Settings'),
onTap: () => Navigator.pushReplacementNamed(context, Routes.settings)
),
ListTile(
title: const Text('LogOut'),
onTap: () => Navigator.pushReplacementNamed(context, Routes.logout)
),
],
),
);
}
}
Here is the routes class.
import 'package:adaptive_layout/widgets/candidate_form.dart';
import 'package:adaptive_layout/widgets/logout.dart';
import 'package:adaptive_layout/widgets/settings.dart';
class Routes {
static const String home = CandidateForm.routeName;
static const String settings = Settings.routeName;
static const String logout = LogOut.routeName;
}
All the classes just have a text displayer in the centre.
But neither the drawer closes on its own after onTap nor does it take to that page.
This is my MaterialAppWidget i.e. the main.dart.
import 'package:adaptive_layout/pages/desktop_page.dart';
import 'package:adaptive_layout/pages/mobile_page.dart';
import 'package:adaptive_layout/pages/tablet_page.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const 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(
title: 'Views',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SafeArea(
child: LayoutBuilder(
builder: (context, constraints) {
if(constraints.maxWidth < 600){
return const MobilePage();
}
else if(constraints.maxWidth < 768){
return const TabletPage();
}
else{
return const DesktopPage();
}
}
),
),
);
}
}
Please help. being trying it for 2 days now.
This is happening because you're not defining your routes in the MaterialApp widget. This is not necessary if you're using annonymous routes, but it is a must if you're using named routes.
You'll need to get rid of you're home: property on the MaterialApp and move your LayoutBuilder elsewhere.
Like this:
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(
title: 'Views',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: '/',
routes: {
// Here you define the names and the Widgets (Preferably ones with a Scaffold) that are your pages
'/': (context) => const HomePage(),
'/second': (context) => const SecondScreen(),
},
);
}
}
Then to navigate to them using named Routes:
() => Navigator.pushReplacementNamed(context, '/second')
If you want more info, there's a cookbock on the Flutter website that show you how to use it.