Flutter - Create different ListTiles for a settings page

test
June 30, 2023
193 views
2 votes
3 Answers

I have a problem. I want to create a setting page (please see the image below what I want).
But unfortunately my design does not look like what I want. If I am looking inside the page, the page is complety white. Nothing shown. Not content. Nothing.

How could I create this kind of design?

What I want:

My code:

  @override
  Widget build(BuildContext context) {
    //print("called");
    return Scaffold(
      appBar: AppBar(
          centerTitle: true,
          backgroundColor: Colors.black,
          systemOverlayStyle:
              const SystemUiOverlayStyle(statusBarColor: Colors.black),
          leading: IconButton(
            icon: Image.asset('assets/logo.png'),
            onPressed: null,
          ),
          title: const Text("Settings",
              style: TextStyle(color: Colors.white),
              textAlign: TextAlign.center)),
      body: Container(
        margin: const EdgeInsets.all(30.0),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey),
          borderRadius: const BorderRadius.all(
              Radius.circular(5.0) //                 <--- border radius here
              ),
          color: Colors.white,
        ),
        child:   Row(
          children: [
            Column(
              children: [
                ListTile(
                  onTap: () {
                    if (kDebugMode) {
                      print("click");
                    }
                  },
                  leading: const Icon(
                    Icons.settings,
                    color: Colors.black,
                    size: 50.0,
                  ),
                  title: Text("Setting Version"),
                  subtitle: Text("$settingVersion"),
                ),
                ListTile(
                  onTap: () {
                    if (kDebugMode) {
                      print("click");
                    }
                  },
                  leading: const Icon(
                    Icons.access_time,
                    color: Colors.black,
                    size: 50.0,
                  ),
                  title: Text("Last change of the tag-version"),
                  subtitle: Text("$lastChanged"),
                ),
              ],

            ),
            Column(
              children: [
                ListTile(
                  onTap: () {
                    if (kDebugMode) {
                      print("click");
                    }
                  },
                  leading: const Icon(
                    Icons.settings,
                    color: Colors.black,
                    size: 50.0,
                  ),
                  title: Text("Version of something"),
                  subtitle: Text("$settingVersion"),
                ),
                ListTile(
                  onTap: () {
                    if (kDebugMode) {
                      print("click");
                    }
                  },
                  leading: const Icon(
                    Icons.access_time,
                    color: Colors.black,
                    size: 50.0,
                  ),
                  title: Text("My name of the user"),
                  subtitle: Text("$lastChanged"),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

Tags: dart flutter

Answers

You just need to the replace the Row Widget with Column which is in the child of the container.

refer this below code:

 class SearchPage extends StatefulWidget {
  const SearchPage({super.key});

  @override
  State<SearchPage> createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  bool kDebugMode = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // appbar code
      ),
      body: Container(
       // decoration
        child: Column(  /// replaced widget this widget from row to column
          children: [
            Column(
              children: [
                ListTile(),
                ListTile(),
              ],
            ),
            Column(
              children: [
                ListTile(),
                ListTile(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

And will start looking like this:

Well its realy hard to understand what you are asking for. But i would share what would i would do i case of that layout. Hopefully its close enough. I added ListView.seperated in Column in case of you need to button to stay under segments. If thats what you are trying to achive. Simply move button in column. Otherwise Column and Expanded widgets are unnecessary.

class _DemoWidget extends StatelessWidget {
  const _DemoWidget();

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: _Body(),
      bottomNavigationBar: _PageButton(),
    );
  }
}

class _Body extends StatelessWidget {
  const _Body();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: ListView.separated(
              itemBuilder: (context, index) => const _ListItem(),
              separatorBuilder: (context, index) => const SizedBox(
                height: 20,
              ),
              itemCount: 3,
            ),
          ),
        )
      ],
    );
  }
}

class _ListItem extends StatelessWidget {
  const _ListItem();

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        border: Border.all(),
      ),
      child: const Padding(
        padding: EdgeInsets.all(6),
        child: Column(
          children: [
            ListTile(
              leading: CircleAvatar(),
              title: Text("Some title"),
              subtitle: Text("Some subtitle"),
            ),
            ListTile(
              leading: CircleAvatar(),
              title: Text("Some title"),
              subtitle: Text("Some subtitle"),
            ),
          ],
        ),
      ),
    );
  }
}

class _PageButton extends StatelessWidget {
  const _PageButton();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Padding(
        padding: const EdgeInsets.fromLTRB(16, 0, 16, 0),
        child: ElevatedButton(
          onPressed: () {},
          child: const Text("Some Button"),
        ),
      ),
    );
  }
}

This produces this kind of layout