Home > Software design >  Navbar flutter app does not show any where on the screen
Navbar flutter app does not show any where on the screen

Time:11-02

i am trying to print the navbar in my mobile app. Code for main.dart: the import of package navbar.dart is unused the system says.the navbar shows completely nothing. does anyone know how to fix this? the weather app itself does work. but the navbar does not print. PLaceholderPLaceholderPLaceholderPLaceholderPLaceholderPLaceholderPLaceholderPLaceholderPLaceholderPLaceholderPLaceholderPLaceholderPLaceholder

import 'package:weerappflutter/data_service.dart';
import 'package:flutter/material.dart';
import 'package:weerappflutter/models.dart';
import 'package:weerappflutter/navbar.dart';


void main() {
  runApp(MyApp());

}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _cityTextController = TextEditingController();
  final _dataService = DataService();

WeatherResponse? _response;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                if (_response != null)
                  Column(
                    children: [
                      Image.network(_response!.iconUrl),
                      Text(
                        '${_response!.tempInfo.temperature}°',
                        style: TextStyle(fontSize: 40),
                      ),
                      Text(_response!.weatherInfo.description)


                    ],
                  ),
                Padding(
                  padding: EdgeInsets.symmetric(vertical: 50),
                  child: SizedBox(
                    width: 150,
                    child: TextField(
                        controller: _cityTextController,
                        decoration: InputDecoration(labelText: 'Voer een stad in:'),
                        textAlign: TextAlign.center),
                  ),
                ),
                ElevatedButton(onPressed: _search, child: Text('Toon temparatuur'))
              ],
            ),
          ),
        ));
  }

  void _search() async {
    final response = await _dataService.getWeather(_cityTextController.text);
    setState(() => _response = response);
  }
}

code navbar.dart

import 'package:flutter/material.dart';

class NavBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        // Remove padding
        padding: EdgeInsets.zero,
        children: [
          UserAccountsDrawerHeader(
            accountName: Text('WeerBeving'),
            accountEmail: Text('WeerBeving.com'),
            currentAccountPicture: CircleAvatar(
              child: ClipOval(
                child: Image.network(
                  'https://oflutter.com/wp-content/uploads/2021/02/girl-profile.png',
                  fit: BoxFit.cover,
                  width: 90,
                  height: 90,
                ),
              ),
            ),
            decoration: BoxDecoration(
              color: Colors.blue,
              image: DecorationImage(
                  fit: BoxFit.fill,
                  image: NetworkImage(
                      'https://oflutter.com/wp-content/uploads/2021/02/profile-bg3.jpg')),
            ),
          ),
          ListTile(
            leading: Icon(Icons.favorite),
            title: Text('Weer'),
            onTap: () => null,
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: Text('Aardbevingen Nederland'),
            onTap: () => null,
          ),
          ListTile(
            leading: Icon(Icons.share),
            title: Text('Aardbevingen wereldwijd'),
            onTap: () => null,
          ),

          Divider(),
          ListTile(
            title: Text('Exit'),
            leading: Icon(Icons.exit_to_app),
            onTap: () => null,
          ),
        ],
      ),
    );
  }
}

CodePudding user response:

Inside the scaffold just above the body write

drawer:NavBar(),

You had only imported the package but didn't call it anywhere in main.dart

CodePudding user response:

You have declared NavBar widget but you forgot to place it to widget tree. To do that use drawer field of Scaffold ... Scaffold( drawer: NavBar(), body: ... )

  • Related