Input In Flutter Text Fields

Question

Hey was trying to create my first flutter app where i have a home screen containing a NavBar that will render a page on the scaffold body depending on which NavBarItem is selected.

import 'package:firebase_auth/firebase_auth.dart';
import 'package:ionicons/ionicons.dart';
import 'package:flutter/material.dart';
import 'package:login/screens/AnimeNews.dart';
import 'package:login/screens/Animelist.dart';
import 'package:login/screens/mylist.dart';


class HomePage extends StatefulWidget {

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late int currentselectedindex;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    currentselectedindex =1;
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        backgroundColor: Colors.grey[300],
      ),
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Colors.deepPurple,
        title: const Text('AnimeWiki'),
      ),
      backgroundColor: Colors.grey[400],
      bottomNavigationBar: NavigationBar(
        onDestinationSelected: (index){
          setState(() {
            currentselectedindex=index;
          });
        },
        selectedIndex: currentselectedindex,
        animationDuration: const Duration(
          seconds: 1,
          milliseconds: 300
        ),
        destinations: const [
          NavigationDestination(icon: Icon(Ionicons.newspaper), label: 'AnimeNews'),
          NavigationDestination(icon: Icon(Ionicons.home), label: 'AnimeList'),
          NavigationDestination(icon: Icon(Ionicons.list_circle), label: 'MyList')
        ],
      ),
      body:[MList(),AList(),News()][currentselectedindex]

    );
  }
}
 

Up to this point everything works fine but in the Alist widget i cant type on the TextField widget

import 'package:flutter/material.dart';
import 'package:ionicons/ionicons.dart';
class AList extends StatefulWidget {
  const AList({super.key});

  @override
  State<AList> createState() => _AListState();
}

class _AListState extends State<AList> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade300,
      body:Column(
        children: [
          Container(
            color: Colors.deepPurple,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(15),
                child: Container(
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.white
                    ),
                    color: Colors.grey.shade200
                  ),
                  child: const TextField(
                            decoration: InputDecoration(
                              hintText: 'Enter anime name',
                              icon: Icon(Ionicons.search),
                              border: InputBorder.none,

                            ),

                  ),
                ),
              ),
            ),
          ),
        ListView(
          children: const [
            Padding(
              padding: EdgeInsets.all(2.0),
              child: Text('Trending'),
            ),
            Placeholder(),
            Padding(
              padding: EdgeInsets.all(2.0),
              child: Text("Just Added"),
            ),
            Placeholder(),
            Padding(
              padding: EdgeInsets.all(2.0),
              child: Text('Top 10 Airing'),
            ),
            Placeholder(),
            Padding(
              padding: EdgeInsets.all(2.0),
              child: Text('Top 10 Upcoming'),
            ),
            Placeholder(),
          ],
        )
        ],
      )

    );
  }
}

Tried removing some container and the ClipRRect but nothing has worked.

Answer 1

You need to inform ListView how much space you can take. For the proper space allocation, you can use Expanded and Flexible widgets.

Flexible(
child: ListView(
children:[
//add child here
]
)),

You can also use SizedBox widget to achieve this functionality.

     SizedBox(
       height:100,
        child: ListView(
        children:[
        //add child here
        ]
        )),