How can I make a floatlayout have a scrollview in kivymd?

Question

I am working on a project with python, and I need my main page to be scrollable, but it doesn't work... I've tried like literally everything. Here's my code:

main.py

from kivymd.app import MDApp
from kivy.lang import Builder
from kivymd.uix.menu import  MDDropdownMenu, MDMenuItem
from kivy.clock import Clock
from kivy.uix.video import Video
from kivy.core.window import Window
from kivy.uix.screenmanager import ScreenManager
from kivymd.uix.snackbar import Snackbar
from kivymd.uix.screen import MDScreen
from kivymd.uix.textfield import MDTextFieldRound, MDTextField, MDTextFieldRect
from kivy.uix.boxlayout import BoxLayout
from kivymd.uix.dialog import MDDialog
from kivymd.uix.button import MDFlatButton, MDFloatingActionButtonSpeedDial, MDRoundFlatButton
from kivymd.uix.list import MDList, OneLineIconListItem, ILeftBodyTouch, OneLineListItem, ILeftBody, BaseListItem
from kivy.properties import StringProperty, NumericProperty
from kivymd.theming import ThemableBehavior
from kivy.uix.image import Image
from kivymd.uix.behaviors import RectangularElevationBehavior
from kivymd.uix.selectioncontrol import MDCheckbox
from kivy.uix.floatlayout import FloatLayout
from kivymd.uix.tab import MDTabsBase
from kivymd.uix.bottomnavigation import MDBottomNavigation
from kivymd.uix.label import MDLabel
from kivymd.uix.boxlayout import MDBoxLayout
from kivy.core.audio import SoundLoader
import requests

class MainScreen(MDScreen):
    pass
class SearchScreen(MDScreen):
    pass
class WeatherPage(MDScreen):
    pass
class Settings(MDScreen):
    pass
class Manager(ScreenManager):
    pass

class NavDrawerItems(BoxLayout):
    pass
class SearchToolbar(RectangularElevationBehavior, ThemableBehavior, MDBoxLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        pass


class WeatherApp(MDApp):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.theme_cls.primary_palette = "Cyan"
        self.screen = Builder.load_file("weather.kv")
        self.apikey = 'bf527f2c0ece63f0e185788e4ea21be3'
        self.base_url = 'http://api.openweathermap.org/data/2.5'
        self.media = SoundLoader.load('Intentions.mp3')

    def build(self):
        return self.screen

    def test(self):
        print('Hello world!')

    def play(self):
        self.media.play()

    def clear(self):
        self.screen.ids.sec_layout.clear_widgets()

    def gomain(self):
        self.screen.ids.screen_manager.current = "main"
        self.screen.ids.nav_drawer.set_state('close')
    
    def search(self):
        self.screen.ids.screen_manager.current = "search"
        self.screen.ids.nav_drawer.set_state('close')
        self.screen.ids.main_search.text = ""

    def settings(self):
        self.screen.ids.screen_manager.current = "settings"
        self.screen.ids.nav_drawer.set_state('close')

    def changetheme(self):
        if self.theme_cls.theme_style == "Light":
            self.theme_cls.theme_style = "Dark"
            self.screen.ids.weather_icon.icon = "white-balance-sunny"
        elif self.theme_cls.theme_style == "Dark":
            self.theme_cls.theme_style = "Light"
            self.screen.ids.weather_icon.icon = "weather-night"

    def find(self):
        try:
            city = self.screen.ids.main_search.text
            full_url = f'{self.base_url}/weather?q={city}&appid={self.apikey}'
            weatherinfo = requests.get(full_url)
            result = weatherinfo.json()
            main = result.get('weather')[0].get('main')
            temp = result.get('main').get('temp')
            description = result.get('weather')[0].get('description')
            country = result.get('sys').get('country')
            cityname = result.get('name')
            real_temp = float(temp) - 273.15
            result = round(real_temp)
            self.screen.ids.main_weather.text = description
            self.screen.ids.temperature.text = f'{result}°'
            if main == "Clear":
                self.screen.ids.main_icon.icon = "weather-cloudy"
            elif main == "Sunny":
                self.screen.ids.main_icon.icon = "weather-sunny"
            elif main == "Clouds":
                self.screen.ids.main_icon.icon = "weather-cloudy"
            elif main == "Rainy":
                self.screen.ids.main_icon.icon = "weather-rainy"

        except Exception as e:
            self.clear()
            self.screen.ids.sec_layout.add_widget(Image(
                source = 'error_connection.png', 
                size = ["200dp", "200dp"],
                pos_hint = {"center_x": .5, "center_y": .65}
            ))
            self.screen.ids.sec_layout.add_widget(MDLabel(
                text = "Oops!",
                bold = True,
                font_size = 26,
                pos_hint = {"center_x": .5, "center_y": .41},
                halign = "center"
            ))

WeatherApp().run()

main.kv

Manager:
        id: screen_manager
        MainScreen:
            name: "main"
            md_bg_color: 1, 1, 1, 1
            MDToolbar:
                id: toolbar
                md_bg_color: 1, 1, 1, 1
                pos_hint: {"top": 1}
                specific_text_color: 0, 0, 0, 1
                elevation: 0
                left_action_items: [["sort-variant", lambda x: nav_drawer.set_state("open")]]

            FloatLayout:
                id: sec_layout
                padding: 8
                MDLabel:
                    text: f"{main_search.text}, Today"
                    pos_hint: {"center_x": .55, "center_y": .85}
                    font_size: 22
                    halign: "center"
                    bold: True
                BoxLayout:
                    orientation: "horizontal"
                    spacing: 40
                    pos_hint: {"center_x": .5, "center_y": .82}
                    padding: 60
                    MDCard:
                        orientation: "vertical"
                        size_hint: .6, .4
                        md_bg_color: app.theme_cls.primary_color
                        border_radius: 18
                        radius: [20]
                        MDLabel:
                            id: main_weather
                            text: "Hello"
                            halign: "center"
                            theme_text_color: "Custom"
                            pos_hint: {"center_x": .65}
                            text_color: 1, 1, 1, 1
                            font_size: 28
                            bold: True
                        MDLabel:
                            id: temperature
                            text: ""
                            halign: "center"
                            theme_text_color: "Custom"
                            pos_hint: {"center_x": .65, "center_y": .3}
                            text_color: 1, 1, 1, 1
                            font_size: 55
                            bold: True
                        MDIcon:
                            id: main_icon
                            icon: "blank"
                            font_size: 180
                            pos_hint: {"center_x": .6}
                            theme_text_color: "Custom"
                            text_color: 1, 1, 1, 1
                        Widget:
                            height: "15dp"
                MDLabel:
                    text: "Favorite cities"
                    bold: True
                    pos_hint: {"center_x": .55,"center_y": .33}
                    font_size: 25

How can I make the FloatLayout in the MainScreen scrollable? I would Later on add more content to the page and there would be other screens in the app also... So I need to find a way to make it scrollable. I've tried, but either gives an error, or something else... Anyone with ideas on how I can solve this?

Answer 1

You can just put the FloatLayout in a ScrollView , like this:

    ScrollView:
        do_scroll_x: False
        FloatLayout:
            id: sec_layout
            padding: 8
            size_hint_y: None  # this is required for scrolling