1
votes

Annonces chevauchant la navigation du bas en flottement

J'ai configuré des bannières publicitaires flottantes et celles-ci chevauchent la barre de navigation inférieure

Voilà à quoi ça ressemble

Je souhaite afficher des annonces sous cette barre de navigation inférieure,

puis-je ajouter une marge sous la barre de navigation inférieure?

j'ai implémenté des publicités dans home.dart (page principale)

library bottom_navy_bar;

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class BottomNavyBar extends StatelessWidget {

  final int selectedIndex;
  final double iconSize;
  final Color backgroundColor, selectedColor, unselectedColor;
  final bool showElevation;
  final Duration animationDuration;
  final List<BottomNavyBarItem> items;
  final ValueChanged<int> onItemSelected;

  BottomNavyBar(
      {Key key,
      this.selectedIndex = 0,
      this.showElevation = true,
      this.iconSize = 20,
      this.backgroundColor,
      this.selectedColor,
      this.unselectedColor,
      this.animationDuration = const Duration(milliseconds: 250),
      @required this.items,
      @required this.onItemSelected}) {
    assert(items != null);
    assert(items.length >= 2 && items.length <= 5);
    assert(onItemSelected != null);
  }


  Widget _buildItem(BottomNavyBarItem item, bool isSelected) {



    return AnimatedContainer(
      width: isSelected ? 120 : 50,
      height: double.maxFinite,
      duration: animationDuration,
      decoration: BoxDecoration(
        color: isSelected ? selectedColor.withOpacity(0.2) : backgroundColor,
        borderRadius: BorderRadius.all(Radius.circular(100.0)),
      ),
      alignment: Alignment.center,
      child: ListView(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(right: 8),
                child: IconTheme(
                  data: IconThemeData(
                      size: iconSize,
                      color: isSelected ? selectedColor : unselectedColor),
                  child: item.icon,
                ),
              ),
              isSelected
                  ? DefaultTextStyle.merge(
                      style: TextStyle(
                          fontSize: 16,
                          color: selectedColor,
                          fontWeight: FontWeight.bold),
                      child: item.title,
                    )
                  : SizedBox.shrink()
            ],
          )
        ],
      ),
    );
  }


  @override
  Widget build(BuildContext context) {
    return Container(
      color: backgroundColor,
      child: Container(
        width: double.infinity,
        height: 55,
        padding: EdgeInsets.all(8),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: items.map((item) {
            var index = items.indexOf(item);
            return GestureDetector(
              onTap: () {
                onItemSelected(index);
              },
              child: _buildItem(item, selectedIndex == index),
            );
          }).toList(),
        ),
      ),
    );
  }
}

class BottomNavyBarItem {
  final Icon icon;
  final Text title;

  BottomNavyBarItem({
    @required this.icon,
    @required this.title,
  }) {
    assert(icon != null);
    assert(title != null);
  }
}

et voici la barre de navigation du bas -

import 'package:provider/provider.dart';
import '../../ui/widgets/bottom_nav_bar.dart';
import '../../core/utils/theme.dart';
import 'search_page.dart';
import 'category.dart';
import 'main_page.dart';
import 'settings.dart';
import 'package:flutter/material.dart';
import 'package:firebase_admob/firebase_admob.dart';
import 'for_you.dart';

const String AD_MOB_APP_ID = 'ca-app-pub-3940256099942544~3347511713';
const String AD_MOB_TEST_DEVICE = 'DEC3010B2445165B43EB949F5D97D0F8 - run ad then check device logs for value';
const String AD_MOB_AD_ID = 'ca-app-pub-3940256099942544/6300978111';

class HomePage extends StatefulWidget {


  @override
  _HomePageState createState() => _HomePageState();
}


class _HomePageState extends State<HomePage> {

BannerAd _bannerAd;

  static final MobileAdTargetingInfo targetingInfo = new MobileAdTargetingInfo(
    testDevices: <String>[AD_MOB_TEST_DEVICE],
  );

  BannerAd createBannerAd() {
    return new BannerAd(
      adUnitId: AD_MOB_AD_ID,
      size: AdSize.banner,
      targetingInfo: targetingInfo,
    );
  }

  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  int _selectedIndex = 0;
  final PageController _pageController = PageController();




  @override
  void initState() {
    super.initState();


  }



  @override
  void dispose() {
    super.dispose();
    _pageController.dispose();
  }


  @override
  Widget build(BuildContext context) {
    final stateData = Provider.of<ThemeNotifier>(context);
    final ThemeData state = stateData.getTheme();


FirebaseAdMob.instance.initialize(appId: AD_MOB_APP_ID);
    _bannerAd = createBannerAd()..load()..show();
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        centerTitle: false,
        backgroundColor: state.primaryColor,
        elevation: 0,
        title: Text(
          'RevWalls',
          style: state.textTheme.headline,
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(
              Icons.search,
              color: state.textTheme.body1.color,
            ),
            onPressed: () => showSearch(
                context: context, delegate: WallpaperSearch(themeData: state)),
          )
        ],
      ),
      body: Container(
        color: state.primaryColor,
        child: PageView(
          controller: _pageController,
          physics: BouncingScrollPhysics(),
          onPageChanged: (index) {
            setState(() {
              _selectedIndex = index;
            });
          },
          children: <Widget>[
            MainBody(),
            Category(),
            ForYou(),
            SettingsPage(),
          ],
        ),
      ),



      bottomNavigationBar: BottomNavyBar(
        selectedIndex: _selectedIndex,
        unselectedColor: state.textTheme.body1.color,
        onItemSelected: (index) {
          _pageController.jumpToPage(index);
        },
        selectedColor: state.accentColor,
        backgroundColor: state.primaryColor,
        showElevation: false,
        items: [
          BottomNavyBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavyBarItem(
            icon: Icon(Icons.category),
            title: Text('Subreddits'),
          ),
          BottomNavyBarItem(
            icon: Icon(Icons.phone_android),
            title: Text('Exact Fit'),
          ),
          BottomNavyBarItem(
            icon: Icon(Icons.settings),
            title: Text('Settings'),
          ),
        ],
      ),
    );
  }

  Widget oldBody(ThemeData state) {
    return NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            backgroundColor: state.primaryColor,
            elevation: 4,
            title: Text(
              'reWalls',
              style: state.textTheme.headline,
            ),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.search, color: state.accentColor),
                onPressed: () {
                  showSearch(
                      context: context,
                      delegate: WallpaperSearch(themeData: state));
                },
              )
            ],
            floating: true,
            pinned: _selectedIndex == 0 ? false : true,
            snap: false,
            centerTitle: false,
          ),
        ];
      },
      body: Container(
        color: state.primaryColor,
        child: PageView(
          controller: _pageController,
          onPageChanged: (index) {
            setState(() {
              _selectedIndex = index;
            });
          },
          children: <Widget>[
            MainBody(),
            Category(),
            ForYou(),
            SettingsPage(),
          ],
        ),
      ),
    );
  }
}

Veuillez aider


0 commentaires

3 Réponses :


1
votes

Vous pouvez utiliser MediaQuery.of (contexte) pour cela. Enveloppez tout le code dans un conteneur de hauteur: MediaQuery.of (context) .size.height - 60. (la hauteur de l'annonce)

Column(
    children: [
                 Container(
                     height: MediaQuery.of(context).size.height - 60,
                     child: HomePage(),
                    ),
                 BannerAd(),
              ]
);


1 commentaires

Non ça n'aide pas, mais j'ai une solution



1
votes

J'ai trouvé la réponse moi-même

Nous pouvons l'utiliser pour définir la marge dans un conteneur avec d'autres choses comme la hauteur, la largeur

Ce code ajoutera une marge en bas de la barre de navigation inférieure, selon mon besoin, je veux afficher des annonces sous la barre de navigation, cela résout mon problème

margin: const EdgeInsets.only(bottom: 50)


1 commentaires

Veuillez ne pas publier uniquement le code comme réponse, mais également expliquer ce que fait votre code et comment il résout le problème de la question. Les réponses avec une explication sont généralement plus utiles et de meilleure qualité, et sont plus susceptibles d'attirer des votes positifs.



1
votes

l'ajout d'un constructeur comme celui-ci résoudra le problème

var paddingBottom = 60.0;
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
//
return MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'World General info',
    //theme: ThemeData(primarySwatch: Colors.cyan,),
    theme: ThemeData(
      primaryColor: Colors.cyan,
      accentColor: Colors.green,
      textTheme: TextTheme(bodyText2: TextStyle(color: Colors.purple)),
    ),
    home: MyHomePage(title: 'World General Info'),
    builder: (BuildContext context, Widget child) {
      return new Padding(
        child: child,
        padding:  EdgeInsets.only(bottom: paddingBottom),
      );
    }
    );
}
}


0 commentaires