J'ai configuré des bannières publicitaires flottantes et celles-ci chevauchent la barre de navigation inférieure
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
3 Réponses :
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(), ] );
Non ça n'aide pas, mais j'ai une solution
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)
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.
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), ); } ); } }