Question 307058 in Flutter Question posted in
The official Flutter documentation can be found here.

Input In Flutter Text Fields

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.

Tags:

2

Answers


  1. 0

    The Column and the ListView want to take up the whole vertical space which is availabe. Therefore, you need to specify a height for one of the widgets.

    Note:

    In the HomePage can remove the initState method and initialize the selectedIndex variable directly.

    In the AList you do not need the Container and the ClipRRect widgets, if you use the decoration of the TextInputField.

    Login or Signup to reply.
  2. 0

    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
        ]
        )),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search