how to add floating action button inside tab navigation button ?
like the example in the screenshot, I want to add such a button. I've tried adding the floating action button command but instead the button is entered in the profile tab.
Here is the example for your problem:
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 const MaterialApp(
title: _title,
home: MyStatelessWidget(),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Floating Action Button'),
),
body: const Center(child: Text('Press the button below!')),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Add your onPressed code here!
},
backgroundColor: Colors.green,
child: const Icon(Icons.navigation),
),
);
}
}
Don't use FloatingActionButton in the body tag
FloatingActionButton has the separate tag under scaffold like this
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
// Add your onPressed code here!
},
backgroundColor: Colors.red,
child: const Icon(Icons.add),
),
);
Related
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 need a navigator inside each tab, so when I push a new Widget, the tab bar keeps on screen. The Code is working very well, but the android back button is closing the app instead of running Navigator.pop()
import 'package:flutter/material.dart';
void main() {
runApp(const TabBarDemo());
}
class TabBarDemo extends StatelessWidget {
const TabBarDemo({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 1,
child: Scaffold(
bottomNavigationBar: const BottomAppBar(
color: Colors.black,
child: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
],
),
),
body: TabBarView(
children: [
Navigator(
onGenerateRoute: (settings) {
return MaterialPageRoute(
builder: (context) => IconButton(
icon: Icon(Icons.directions_car),
onPressed: () => Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => newPage()))),
);
},
),
],
),
),
),
);
}
}
class newPage extends StatelessWidget {
const newPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("new page"),
),
body: Center(child: Icon(Icons.add)),
);
}
}
the code is also available here but on dartpad you cannot test the android back button.
First you should create a key for your navigator
final GlobalKey<NavigatorState> homeNavigatorKey = GlobalKey();
then add this key to your navigator
Navigator(
key: homeNavigatorKey,
then wrap your Navigator in a WillPopScope widget and add the onWillPop as follows
child: WillPopScope(
onWillPop: () async {
return !(await homeNavigatorKey.currentState!.maybePop());
},
child: Navigator(
key: homeNavigatorKey,
this will check if the navigatorKey can pop a route or not, if yes it will pop this route only if no it will pop itself thus closing the app
I need to pass a id parameter to a separate page while navigating from one page to another, I am currently using named routes to navigate but they are not letting me pass parameters.
You have to use the "final" variable in the second route class and pass the values during instantiation of that class' object.
The below navigation example was obtained from Flutter docs I just added the "passing data to a new page" process.
class FirstRoute extends StatelessWidget {
const FirstRoute({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("First Route"),
),
body: Center(
child: ElevatedButton(
child: const Text("Open route"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
const SecondRoute(text: "This is the text")),
);
},
),
),
);
}
}
class SecondRoute extends StatelessWidget {
const SecondRoute({Key? key, required this.text}) : super(key: key);
final String text;
#override
Widget build(BuildContext context) {
print(text);
return Scaffold(
appBar: AppBar(
title: const Text("Second Route"),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text("Go back!"),
),
),
);
}
}
this is the part that confuses me:
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Startup Name Generator',
actions: <Widget>[
IconButton(
icon: const Icon(Icons.shopping_cart),
tooltip: 'Open shopping cart',
onPressed: () {
// handle the press
},
),
],
home: RandomWords(),
);
}
}
I'm following the tutorial provided by google themselves, but it doesn't work:
https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2
I get this error:
The argument type 'List<Widget>' can't be assigned to the parameter type 'Map<Type, Action<Intent>>?'. dart(argument_type_not_assignable)
but the docs state that the actions property is a List<Widget>, so I have no clue what I did wrong
You're working with the wrong parent Widget. The actions of the MaterialApp is not what you're looking for.
Go to your RandomWords Widget, make sure it builds a Scaffold, add an appBar to your Scaffold and set the actions of this AppBar.
You want something like this.
import 'package:flutter/material.dart';
class Test extends StatelessWidget {
const Test({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Test appbar'),
actions: [
IconButton(
icon: const Icon(Icons.shopping_cart),
tooltip: 'Open shopping cart',
onPressed: () {
// handle the press
},
),
],
),
);
}
}
I'm trying to get a small pop up screen that pops up from the bottom of the screen when something is pressed, While not being directed to another dart file and the previous screen can be darkened and seen. I've tried searching for the widget but I cant find the one im looking for.
Picture for example of what I mean.
Use Modal Bottom Sheet for this. Please follow this link or go through the doc from here
For example
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// This is the main application widget.
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(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatelessWidget(),
),
);
}
}
/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
child: const Text('showModalBottomSheet'),
onPressed: () {
showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return Container(
height: 200,
color: Colors.amber,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Text('Modal BottomSheet'),
ElevatedButton(
child: const Text('Close BottomSheet'),
onPressed: () => Navigator.pop(context),
)
],
),
),
);
},
);
},
),
);
}
}