How can I make the HomeScreen load after the Spinkit . I was able to add the spinkit loaders on my app, but I am unable to add the navigation in it so that it can runs the home screen automatically,
Please help
This is are the codes I have used in the spinkit page:
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:road_sign/screen/home/home_screen.dart';
class LoadingPage extends StatelessWidget {
const LoadingPage({Key? key}) : super(key: key);
void main(List<String> args) {
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.green[50],
body: Center(
child: SpinKitThreeBounce(
size: 90,
color: Colors.green,
),
),
);
}
}
And these are codes of main.dart
import 'package:road_sign/screen/home/home_screen.dart';
import 'package:road_sign/screen/loadingScreen/loadingPage.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(
debugShowCheckedModeBanner: false,
title: 'Road Sign',
theme: ThemeData(
primarySwatch: Colors.red,
),
home: LoadingPage(),
);
}
}
You can use an async method and add a delay before navigation.
Please check the below sample :
class LoadingPage extends StatefulWidget {
const LoadingPage({Key? key}) : super(key: key);
#override
_LoadingPageState createState() => _LoadingPageState();
}
class _LoadingPageState extends State<LoadingPage> {
#override
void initState() {
autoNavigation();
super.initState();
}
void autoNavigation() async {
// you can change delay here
await Future.delayed(Duration(seconds: 1));
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => HomeScreen(),
));
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.green[50],
body: Center(
child: SpinKitThreeBounce(
size: 90,
color: Colors.green,
),
),
);
}
}
It will work, But I suggest using a state management solution to split logic from UI.
Related
I'm trying to use a custom theme to control my app's theme, and among other things, I have colors set for my app bar.
Although the background color is set as expected, the font color doesn't get set. What's the reason?
Also, is this the correct way to set a theme? I'll be extending the theme later, so I want everything to be as modular as possible.
// main.dart
import 'package:flutter/material.dart';
import 'package:note_that/pages/home.dart';
import 'package:note_that/theme/theme.dart';
void main() {
runApp(const NoteThat());
}
class NoteThat extends StatelessWidget {
const NoteThat({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "NoteThat",
theme: ThemeCustom.getThemeData(), // <-- Setting theme here
routes: {"/": (context) => const HomePage()},
);
}
}
// /theme/theme.dart
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class ThemeCustom {
static const Color _primaryColor = Color.fromRGBO(7, 91, 154, 255);
static ThemeData getThemeData() {
return ThemeData(
appBarTheme: const AppBarTheme(
titleTextStyle: TextStyle(color: _primaryColor), // <-- Setting title text color here
backgroundColor: Colors.white),
textTheme: TextTheme(
titleLarge: GoogleFonts.montserrat(),
titleMedium: GoogleFonts.lato(),
titleSmall: GoogleFonts.poppins(),
bodyLarge: GoogleFonts.lato(),
bodyMedium: GoogleFonts.poppins(),
bodySmall: GoogleFonts.poppins(),
labelLarge: GoogleFonts.poppins(),
labelSmall: GoogleFonts.poppins()),
colorScheme: ColorScheme.fromSeed(seedColor: _primaryColor));
}
}
// /pages/home.dart
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(
appBar: AppBar(
titleTextStyle: Theme.of(context).appBarTheme.titleTextStyle, // <-- Accessing title text color here
title: const Text("NoteThat"),
),
);
}
}
I provide themeData with provider package, so I can control dark mode and light mode in application, if you want to change Theme(dark and light), how do you plan to do it the way you did it.
import 'package:flutter/material.dart';
class ThemeNotifier extends ChangeNotifier {
bool isLighTheme = false;
void changeTheme() {
isLighTheme = !isLighTheme;
notifyListeners();
}
ThemeData get currentTheme =>
isLighTheme ? ThemeData.light() : ThemeData.dark();
}
main.dart
void main() {
runApp(MultiProvider(
providers: [
Provider(create: (_) => ResourceContext()),
ChangeNotifierProvider<ThemeNotifier>(create: (context) =>ThemeNotifier())
],
builder: (context, child) => const MyApp(),
));
}
class MyApp extends StatelessWidget with NavigatorCustom {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: context.watch<ThemeNotifier>().currentTheme,
onUnknownRoute: (settings) {
return MaterialPageRoute(builder: (context) {
return const LottieLearn();
});
},
onGenerateRoute: onGenerateRoute,
navigatorKey: NavigatorManager.instance.navigatorGlobalKey,
home: const LoginView(),
);
}
}
**Update
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(theme: ThemeCustom.getThemeData(), title: 'Material App', home: const HomePage());
}
}
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(
appBar: AppBar(
titleTextStyle: Theme.of(context).appBarTheme.titleTextStyle, // <-- Accessing title text color here
title: const Text("NoteThat"),
),
);
}
}
class ThemeCustom {
static const Color _primaryColor = Colors.black;
static ThemeData getThemeData() {
return ThemeData(
appBarTheme: const AppBarTheme(
titleTextStyle: TextStyle(
color: _primaryColor,
), // <-- Setting title text color here
backgroundColor: Colors.white),
colorScheme: ColorScheme.fromSeed(seedColor: _primaryColor));
}
}
I do develop an application which uses google maps on it's home page. As of andoird 12 I have discovered that google maps shows white page or some kind of partially rendrered map, after return from a screen which loads android keyboard. The key point is that all things working well, until the next screen shows android keyboard. After you focus to the input TextField, return to map, you have corrupted map. If you have'nt got corruption first time, you should see some flickering at the bottom, repeat again after 2-4 times you will see white map. Please help me to overcome this issue. Here is the code illustrating the problem
github repo just put your google API_KEY in manifest.xml and run. Thanks.
main.dart:
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:mytest/input_page.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: '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> {
CameraPosition initialCameraPosition = const CameraPosition(target: LatLng(40.7384685, -73.9890675), zoom: 0.0);
void _moveToInputPage() {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const InputPage())
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: const Center(
child: GoogleMap(
initialCameraPosition: CameraPosition(target: LatLng(40.7384685, -73.9890675), zoom: 0.0)
)),
floatingActionButton: FloatingActionButton(
onPressed: _moveToInputPage,
child: const Icon(Icons.arrow_forward),
),
);
}
}
input_page.dart:
import 'package:flutter/material.dart';
class InputPage extends StatefulWidget {
const InputPage({Key? key}) : super(key: key);
#override
_InputPageState createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
FocusManager.instance.primaryFocus?.unfocus();
},
child: Scaffold(
appBar: AppBar(
title: const Text("Input Page"),
),
body: Center(
child: Container(
color: Colors.grey[300],
child: const TextField(
// Enable autofocus to see corrupted map every time.
// autofocus: true,
),
),
)),
);
}
}
This setting does the magic https://pub.dev/documentation/google_maps_flutter/latest/google_maps_flutter/AndroidGoogleMapsFlutter/useAndroidViewSurface.html
import 'package:device_info/device_info.dart';
void main() async {
if (defaultTargetPlatform == TargetPlatform.android) {
DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
var androidInfo = await deviceInfo.androidInfo;
if (androidInfo.version.sdkInt > 28) {
AndroidGoogleMapsFlutter.useAndroidViewSurface = true;
}
}
}
I want to pass MaterialPageRoute as a parameter into another page. Like if want to pass onPressed((){}) to other page we declared it as
FirstPage({
this.onPressed,
});
final GestureTapCallback onPressed;
How could I pass MaterialPageRoute(builder: (context) => SecondPage()) to other page as a parameter?
Here's one way to do that:
class MyApp extends StatelessWidget {
const MyApp({Key? key}): super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: FirstPage(
materialPageRoute: MaterialPageRoute(builder: (context) => const SecondPage()),
)
);
}
}
class FirstPage extends StatelessWidget {
const FirstPage({
Key? key,
required this.materialPageRoute,
}): super(key: key);
final MaterialPageRoute materialPageRoute;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: TextButton(
onPressed: () => Navigator.of(context).push(materialPageRoute),
child: const Text('Navigate to SecondPage'),
),
)
);
}
}
class SecondPage extends StatelessWidget {
const SecondPage({Key? key}): super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: const Center(
child: Text('Second Page'),
),
);
}
}
I'm trying to find a way to add an AppBar only once without having to duplicate the AppBar code on different routes. I have tried different approaches but I still cant get the results that I want.
This is the main.dart file.
import 'package:flutter/material.dart';
import 'package:com.example.simple_app/pages/page_one.dart';
import 'package:com.example.simple_app/pages/page_one.dart';
void main() => runApp(SimpleApp());
final routes = {
'/': (BuildContext context) => new PageOne(),
'/pageone': (BuildContext context) => new PageOne(),
'/pagetwo': (BuildContext context) => new PageTwo(),
};
class SimpleApp extends StatefulWidget {
#override
_SimpleAppState createState() => _SimpleAppState();
}
class _SimpleApp extends State<SimpleApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Simple App',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blueGrey,
),
initialRoute: '/',
routes: routes,
);
}
}
Below is PageOne.dart file where I've hardcoded AppBar code.
import 'package:flutter/material.dart';
class PageOne extends StatefulWidget {
PageOne({Key key}) : super(key: key);
#override
_PageOneState createState() => _PageOneState();
}
class _PageOneState extends State<PageOne> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Simple AppBar'),
),
);
}
}
Below is PageTwo.dart file where I've also put AppBar by writing the whole code, I'm duplicating AppBar code which is not cool.
import 'package:flutter/material.dart';
class PageOne extends StatefulWidget {
PageOne({Key key}) : super(key: key);
#override
_PageTwoState createState() => _PageOneState();
}
class _PageTwoState extends State<PageOne> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Simple AppBar'),
),
);
}
}
I'm new to flutter but I hope you understand what I'm saying.
What I want is to be able to use AppBar in different routes without duplicating the code. For example when we go to web development, A website built in php you can simply include views. I want something similar here or better, Thank you.
You can create a separate App bar Widget for achieving this Like :
Create an appbar.dart file as :
import 'package:flutter/material.dart';
Widget appbar(BuildContext context, String title, dynamic otherData) {
return AppBar(
title: Text(title),
//Other data you want to show
);
}
And import the appear. dart file wherever you want to display an App bar.
Screen1:
import 'appbar.dart';
import 'package:flutter/material.dart';
class Page1 extends StatefulWidget {
#override
_Page1State createState() => _Page1State();
}
class _Page1State extends State<Page1> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: appbar(context, 'Chat App', {'icons' : Icons.menu}),
);
}
}
Screen2:
import 'appbar.dart';
import 'package:flutter/material.dart';
class Page12 extends StatefulWidget {
#override
_Page12State createState() => _Page12State();
}
class _Page12State extends State<Page12> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: appbar(context, 'Chat App', {'icons' : Icons.menu}),
);
}
}
There are a lot more ways to achieve this. This is the simple one I tried.
Use builder property in MaterialApp to build common container for every page
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: Theme.of(context).copyWith(highlightColor: Colors.amber),
//TODO: Use `builder` to add top most container for all page
builder: (context, child) {
return Scaffold(
appBar: AppBar(
title: Text("Simple AppBar"),
),
body: child, //this child is dynamically replaced with corresponding page when we navigate
);
},
home: FirstPage(),
debugShowCheckedModeBanner: false,
);
}
}
class FirstPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("This is First Page"),
RaisedButton(
child: Text("Goto Second Page"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage(),
),
);
},
),
],
);
}
}
class SecondPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("This is First Page"),
RaisedButton(
child: Text("Go Back"),
onPressed: () {
Navigator.pop(context);
},
),
],
);
}
}
First, create a file for example appBar.dart
then place your personal appBar there like this:
import 'package:flutter/material.dart';
final appBar = AppBar(
backgroundColor: Colors.orange,
elevation: 5.0,
title: Center(
child: SizedBox(
height: 40.0,
child:Image.asset("assets/images/myLogo.png"),
),
),
);
now import and use the appBar anywhere you want.
import 'package:myApp/pages/appBar.dart';
return Scaffold(
appBar: appBar,
body:......
I'm not able to navigate screen showing error 'Navigator operation requested with a context that does not include a Navigator, I have tried many solutions where navigator is used in Builder with stateless widgets but here navigation is done automatically after a few seconds in override method in intiSate. my aim is to navigate the screen after a few seconds.
class Splash extends StatelessWidget {
#override
Widget build(BuildContext context) {
return testWidget;
}
}
Widget testWidget = new MediaQuery(
data: new MediaQueryData(),
child: new MaterialApp( title: 'xxxxxxxxxxxxx',
home: SplashScreen(),
debugShowCheckedModeBanner: false,
routes: <String, WidgetBuilder>{
'/login': (BuildContext context) => new Login(),
},
)
);
class SplashScreen extends StatefulWidget {
#override
_SplashScreenState createState() => new _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
#override
Future initState () {
super.initState();
new Future.delayed(
const Duration(seconds: 2), () => Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => Login()),
));
}
#override
Widget build(BuildContext context) {
return(Scaffold(
body: Container(
height: double.infinity,
width: double.infinity,
child: Image.asset('assets/images/crop.jpg',fit:BoxFit.fill),
),
));
//build
}
}
Showing Error
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.
Code Corrected:
MaterialApp Should always be the Root Widget of all Widgets.
That Way Navigator is always Available.
void main() => runApp(Splash());
class Splash extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: testWidget,
debugShowCheckedModeBanner: false,
);
}
}
Widget testWidget =
new MediaQuery(data: new MediaQueryData(), child: new SplashScreen());
class SplashScreen extends StatefulWidget {
#override
_SplashScreenState createState() => new _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
#override
void initState() {
super.initState();
Future.delayed(
const Duration(seconds: 2),
() => Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => Login()),
));
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Spalsh'),),
body: Container(
height: double.infinity,
width: double.infinity,
// child: Image.asset('assets/images/crop.jpg', fit: BoxFit.fill),
),
);
//build
}
}
class Login extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login Page'),
),
body: Container(),
);
}
}